Crushed Spry menu

Hi, I am a student who recently bought Dreamweaver CS6. I'm familiar with Dreamweaver but am a little lost with the layouts fluid grid.

I have a spry menu bar in a fluid layout Div tag however when I save the page in a browser from the menu didn't shrink at all or the images inside become out of proportion and crushed boggles the mind. How narrow the menu in a browser is suitable for a phone without going through the images become crushed?

Thank you

Rob

I'm sorry, but the CSS became unrecognizable. When I see

UL. MenuBarHorizontal

{

list-style-type: circle;

do-size: 100%;

cursor: default;

Width: 100%;

top: 100%;

margin-top: 0%;

margin-right: auto;

margin-bottom: 0%;

left margin: auto;

padding-top: 0;

padding-right: 0;

padding-bottom: 0px;

padding-left: 0%;

min-height: 1%;

min-width: 1%;

}

When the original says

UL. MenuBarHorizontal

{

margin: 0;

padding: 0;

list-style-type: none;

do-size: 100%;

cursor: default;

Width: auto;

}

It goes beyond my understanding.

Please take a look at http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one

Tags: Dreamweaver

Similar Questions

  • Spry menu bar alternatives?

    I use DW CS5.5.  I understand that Spry is no longer supported and outdated architecture, so what are my options if I want to include drop-down menus on my site?  I have never used the drop down menu option before, but now a need to do so.  I was eager to try the Spry menu bar in DW CS5.5, until I discovered it is not recommended.  I just want to find something that is easy to configure and professional.  I'm not a coder by any stretch of the imagination, that's why I'm looking for something I can use and change via CSS, as you can do with Spry.

    In CS5.5, there is a jQuery Mobile option in the Insert menu, but do not know how this would be related to what I am trying to accomplish.  Thank you for advice or useful links.

    Take a look at the seven project. There are a number of different menu options of guys who really know their business of script.

    Chris

  • How can I insert a spry menu in Dremweaver cc

    I'm trying to insert a spry menu inside Dremweaver CC HOW DO YOU DO

    SPry is no longer supported in 2015 CC DW, but you can do better by inserting a "bootstrap" navigation bar in this way:

    Insert > Bootstrap components > Navbar > Navbar fixed top of page

    There are other styles as well, but I prefer to have a fixed navigation bar so that it is not lost when scrolling down.

    See this photo (you can click on it to enlarge):

  • How to add the collapsible functionality to the Spry Menu?

    Dear Adobe community,

    How to add the functionality of collapsible for the Spry Menu like the one on the White House | whitehouse.gov ?

    Load the White House Web site and minimize your browser window as observe you what happends to the menu bar when you pass a certain limit.

    This is the feature that I want to put in place and I would be happy if one of you could direct me to or share relevant information.

    Concerning

    Andreas

    This isn't a menu Spry Spry do not appear on mobile devices.

    Use any sensitive menu you like for example:

    CSS & jQuery Mobile Navigation Menu Demo

    The tutorial is here:

    CSS and jQuery Menu of Navigation Mobile reactive

  • Dreamweaver CC: Layouts start CSS & missing of the Spry menu bar

    • I preset web training and our client updated for Dreamweaver CS4 Dreamweaver CC 2015. That are the CSS Starter layouts in Dreamweaver, for example the column 2 fixed, header and footer layout? I don't find it in Dreamweaver CC 2015. It was a good starting point to teach students to create a web page using one of these start CSS page layouts and then customize.
    • I also can't find the Spry menu bar to create a menu (up to three levels) bar.
    • What is the best options for me to use instead the CSS starter layouts & the Spry menu bar? Students know nothing about web design when they start with the course.

    It is more a spry menu bar, which was crap anyway. You can learn how to make a simple CSS - only menu or a menu jQuery.

    The new version of DW includes a starter starter site, which is how many sites asre built these days. Bootstrap also contains a navigation pane.

  • Can this page (a spry menu) be changed to a sensitive page by using bootstrap?

    Can this page (a spry menu) be changed to a sensitive page by using bootstrap or bootstrap ext DMX data?

    LAPINEL ARTS CUSTOM LEATHER GOODS

    Or, what I have to do it again?

    Kind regards

    Dean

    It would be a real stretch, especially when you have not used HTML5 or Bootstrap framework for all this. It lacks all the necessary brackets of the HTML (div classes).  Start over.

    Nancy O.

  • How to bind a spry menu item to the script for mail chimp campaign

    I already have a site with a spry menu upward. My customer wants to add a link to an e-mail account of chimpanzee for a campaign newsletter.  Chimp mail offers a script to do their campaign newsletter without an administrator log in. How can I associate this script with a submenu item?

    I don't know that a menu link is appropriate for this.  I think MailChimp gives you a script to integrate a form into your web pages.  The obvious place for it would be a sidebar, header or footer tag.

    Better integrated registration forms | MailChimp Email Marketing Blog

    Nancy O.

  • Missing tab of the Spry Menu on CS5 using an iMac (only 2 computers do not see)

    I use Dreamweaver CS5 on iMac in my class. Two students are not able to see the blue tab of the Spry menu bar.  Is there something that should be selected in so that they can see it?  I thought that maybe they missed a step, so we followed our book and recreated the Menu bar on another page.  Once the menu bar is complete and you click on the Blue Menu Spry tab is not available.  Any suggestions would be greatly appreciated.

    Spry menus have been abandoned by Adobe.two years ago because they can not be used by millions of visitors on portable devices.  We use now of JQuery menus or pure HTML/CSS menus.

  • change the spry menu bar

    Just opened my page in the new Dreamweaver 20141. What happened to the easy edit function for the Spry menu bar? I'm sure he's here somewhere, I just can't find it. It was so easy in the previous version. It just appeared at the bottom of the screen when I clicked on the bar. Where is he now?

    Never mind. I found it. Window > properties

  • Spry menu bar and Style sheets

    Dreamweaver CS6:

       

    I insert a Spry menu bar in a .dwt file model.

    .dwt file seems functional in Live View mode and the Spry menu bar behaves as expected.   I save the .dwt file and then create a new .dwt file .html page.

    The new .html page appears in Design view, but when I switch to Live View there is no visible style.  Content is present, but it is as if the stylesheet has been turned off.   Both the general style of the page and the Spry menu bar are missing.  Even when the page is downloaded.

    The general page style sheet is in the folder of css and Spry worksheet menu bar is located in the SpryAssets folder.   The references in the page coding for style sheets look correct.

    Advice appreciated please.

    Ok.  In your model, change this:

    Index<p class="reply"> <p class="reply">to do this:</p> <p class="reply"><!-- TemplateBeginEditable name="doctitle" --></p> <p class="reply"><title>Index

    And this:

    to all this:

    Save the model.  Now try to generate a new page of the child.

    Nancy O.

  • Spry menu bar is not properly displayed in Internet Explorer.

    Hello. I just got a new computer at work, and so I had to reinstall Dreamweaver CS6. Now my spry menu bar I have in a model is all disfigured. Instead of "horizontal", it's categories listed vertically and with no style. I tried messing around with turn styles, but the problem is that the spry menu bar seems well in Dreamweaver. I can provide the code if necessary. Let me know how you want to display. Thank you very kindly in advance.

    Hi Nancy,.

    I thought about it. The error was in my site definition. I had a mistake in "web URL".
    What can make a difference of two points.

    Thank you.

  • How do I Center my spry menu bar? (to learn)

    I have a simple Web page, I have a background (color) and a background image of the Center and a picture of the top banner. Then, I inserted a "Spry menu bar" but her sitting to the left of the page? IV been tried at the Center, I tried to put a < div align = "center" > all about all this, but nothing works. even if I switch to the design view and click on the menu bar and click on 'align'-> 'Center', but it still does not. can you please help me!

    Link code in Green is placed just above of your

    Code HTML of Jon added two places below red


    The CSS of Jon code in blue could go in a block style above the tag

    or it could be added to your stylesheet to distance

    Hakisak wrote:

    Hello thanks for the reply, sorry I couldn't respond sooner (I've been busy). but I'm still learning the creation of Internet sites, and I don't understand where to put this code, you said?

    Dreamweaver has insert 'menu spry bar' that looks like this, but I'm still not sure how to Center?

  • Spry menu drop-down does not work in internet explore

    Hi guys, I have a problem with my menu drop-down. Please help me

    1. I already use spry menu bar 2.0. It works in firefox but not in internet explore.  It is said: "internet explore restricts this form of running scripts or Xcontrol active Web page.
    2. I want to make the spry menu to be "liquid". I mean when I restore down the window of firefox or internet explorer, it will automatically change size. I want to like it so that size it can look also into ipad or pc.

    Thank you for your help

    For some, I don't understand why that is to say the berms when you try to run a script from a local file. As a general rule, if you need to download the file, then download in IE, it works without problem.

    This page should help...

    imations http://www.troublefixers.com/Disable-ActiveX-Warning-in-Internet-Explorer-while-Playing-an.

  • How can I remove the gap above my Spry menu bar?

    Hi people,

    I have a large website I have built over the years and using different programs but dumped now all thse and works exclusively with Dreamweaver to maintain and improve it myself. So far, I've always had to change each element on each page separately, then upload everything to keep my now large site updated.

    I read that if I did a SSi file for my navigation menu, then I don't have to change it on every other page of my site as long as I have the pages of my site in the form of .shtml files and insert a line of Server-Side Includes in the code of my web pages. All great in theory BUT for a reason that is confusing to me there is a gap appearing at the top of the page that isn't there in the pages that aren't .shtml and have my sprymenu embedded in the code.

    Rather than fix the long code here, it might be easier to see the problem on my live pages. Please go to any page of www.dominicnatoli.com to see how the site with the spry menu in each page and then go to www.dominicnatoli.com/2011.shtml to see a newly loaded page that displays the menu in the file www.dominicnatoli.com/includes/navmenu.shtml. Interestingly, enough if I open the navmenu.shtml alone, it displays at the top of the page, but whenever I open it as embedded code on my content .shtml pages that it does not display the top of the page.

    I have not completely uploaded all site .shtml files that I have encountered this problem and if I can't fix it I'll ababndon this action plan and find an alternative so if you click on some of the menu items and it takes you to a dead end that is not in and of itself the problem that all .shtml files have been uploaded to the server again.

    I have trawled through the css and code to the best of my ability "limited" and am frustrated because I can't find my mistake. He epossibly ar of hundreds of errors in pages like this site was created using many different programs over the decades and that of my reason for trying to make this new menu management is part of my revision stragtegy who already stumbled in the first step. LOL I know say not that us if it ain't broke don't fix it, but I need to sort out a better way to editin the universally navigation menu instead of having to write code in each menu on every page so that the navigation bar be compatible wide wite.

    I would be really grateful if any of you gurus can tell me where I'm wrong so I can reproduce the solution for the rest of my pages. I don't know if the problem is in the page navmenu.shtml and his associates css or in the other with its much larger css shtml page. Thanks for any help you can give me his sort.

    I'm working on Dreamweaver CC and CS6 (this last has an extension insert Server Side Includes that does not work in CC so I tend to use CC for the major updates and the CS6 for the things of the SSI.)

    Please let me know if you need further information or things from me. Thank you very much and

    All the best

    Dominic

    If it's done. Everything what does HTML5 and the menu ssi works on all pages AND all pages pass validation. Thanks for your help.

  • My spry menu disappeared. Help!

    I had my spry menu all planned except for she was not quite long enough. He went doing the width correct, transparent. I see the Properties menu on the elements and in the code and the blue box is here. I can't see the menu itself in Dreamweaver or online. I can't figure out what I changed that does this.

    UL. MenuBarHorizontal
    {
    list-style-type: none;
    cursor: default;
    Width: 890
    `;
    text-align: center;
    float: left;
    z-index: 1000;
    Width: 878px;
    Clear: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding: 0px;
    Clip: rect (auto 0px auto, 0px);
    margin: 0px;
    position: relative;
    height: inherit;
    left: 147px;
    Top: 0px;
    right: 0px;
    Bottom: 0px;
    }
    / * Value of the menu bar active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/Meuk/IE-zindexbug.html */
    UL. MenuBarActive
    {
    z-index: 1000;
    text-align: left;
    float: none;
    Width: auto;
    Clear: right;
    height: auto;
    }
    / * Menu item containers, position of children relative to this container and are a fixed width * /.
    UL. MenuBarHorizontal li
    {
    margin: 0px;
    padding: 0;
    list-style-type: none;
    font-size: 105%;
    text-align: center;
    cursor: pointer;
    do-family: "Trebuchet MS", Arial, Helvetica, without-serif, Biondi;
    z-index: auto;
    make-weight: normal;
    white-space: normal;
    display: block;
    Width: auto;
    height: auto;
    float: left;
    position: absolute;
    left: 315px;
    top:-310px;
    }
    / * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.
    UL. MenuBarHorizontal ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    z index: 1020;
    cursor: default;
    Width: auto;
    left:-1000em;
    text-align: left;
    float: none;
    Clear: right;
    position: relative;
    height: auto;
    }
    / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.
    UL. MenuBarHorizontal ul. MenuBarSubmenuVisible
    {
    text-align: left;
    left: auto;
    Width: auto;
    Clear: right;
    float: none;
    position: relative;
    }
    / * Container of menu items are same fixed width parent * /.
    UL. MenuBarHorizontal ul li
    {
    Width: auto;
    float: none
    ! important;
    ;
    display: block;
    white-space: nowrap;
    text-align: left;
    Clear: right;
    }
    / * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.
    UL. MenuBarHorizontal ul ul
    {
    text-align: left;
    Width: auto;
    margin-top:-5%;
    right margin: 0;
    margin-bottom: 0;
    margin left: 95%;
    Clear: right;
    float: none;
    position: relative;
    }
    / * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.
    UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible
    {
    left: auto;
    top: auto;
    text-align: left;
    right: auto;
    bottom: auto;
    height: auto;
    Width: auto;
    float: none;
    Clear: right;
    }

    /*******************************************************************************

    INFORMATION DESIGN: Describes the set of colors, borders, fonts

    *******************************************************************************/

    / * Submenu containers have borders on all sides * /.
    UL. MenuBarHorizontal ul
    {
    text-align: center;
    Width: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    float: none;
    Padding: 0em;
    Clear: right;
    position: relative;
    }
    / * Menu items are a light grey block with padding and no text decoration * /.
    UL. MenuBarHorizontal a
    {
    display: block;
    cursor: default;
    background-color: #102842;
    text-decoration: none;
    text-align: left;
    border: inset thin #FFF.
    color: #FFF;
    letter-spacing: normal;
    Word-spacing: normal;
    Width: auto;
    list-style-type: none;
    margin: auto;
    float: none;
    padding-top: 0.25em;
    padding-right: 0.75em;
    padding-bottom: 0.75em;
    padding-left: 0.25em;
    do-family: "Trebuchet MS", Arial, Helvetica, without-serif, Biondi;
    do-size: 100%;
    Clear: right;
    position: relative;
    }
    / Components menu that have mouse over or focus have a blue background and white text * /.
    UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus
    {
    background-color: #FFF;
    color: #102842;
    text-align: center;
    padding: 0px;
    Width: auto;
    float: none;
    }
    / * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.
    UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible
    {
    background-color: #FFF;
    color: #0D8C17;
    padding: 0px;
    text-align: left;
    margin: auto;
    Width: auto;
    }

    /*******************************************************************************

    Submenu INDICATION: styles if there is a submenu in a given category

    *******************************************************************************/

    / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
    UL. MenuBarHorizontal a.MenuBarItemSubmenu
    {
    text-align: left;
    margin: auto;
    Width: auto;
    Padding: 0.5em;
    float: none;
    Clear: right;
    position: relative;

    }
    / * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
    UL. MenuBarHorizontal ul a.MenuBarItemSubmenu
    {
    background-image: url (SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 50 95%;
    background-color: #102842;
    text-align: left;
    Width: auto;
    }
    / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.
    UL. MenuBarHorizontal a.MenuBarItemSubmenuHover
    {
    background-image: none;
    text-align: left;
    position: relative;
    Width: auto;
    }
    / * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.
    UL. MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    {
    background-image: url (SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 50 95%;
    background-color: #FFF;
    text-align: left;
    position: relative;
    }

    /*******************************************************************************

    BROWSER HACKS: hacks below should not be changed, unless you are an expert

    *******************************************************************************/

    / * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.
    UL. MenuBarHorizontal iframe
    {
    z index: 1010;
    Filter:alpha(opacity:0.1);
    text-align: left;
    position: relative;
    }
    / * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.
    @media screen, projection
    {
    UL. MenuBarHorizontal li. MenuBarItemIE
    {
    display: block;
    f\loat: left;
    Background: #FFF;
    text-align: left;
    position: relative;
    Width: auto;
    }
    }

    < ul class = "MenuBarHorizontal" id = "MenuBar1" >
    < li > < a href = "#" > HOME < /a > < /li >
    < li > < a href = "#" class = "MenuBarItemSubmenu" > ABOUT US < /a >
    < ul >
    < li > < a href = "#" > join < /a > < /li >
    < li > < a href = "#" > photo library < /a > < /li >
    < li > < a href = "#" > contact us < /a > < /li >
    < /ul >
    < /li >
    < li > < a href = "#" class = "MenuBarItemSubmenu" > NEWS < /a >
    < ul >
    < li > < a href = "#" > events < /a > < /li >
    < li > < a href = "#" > photo library < /a > < /li >
    < li > < a href = "#" > jobs < /a > < /li >
    < li > < a href = "#" > Hot Deals < /a > < /li >
    < /ul >
    < /li >
    < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > COMMUNITY
    < ul >
    < li > < a href = "#" > Scott Air Force Base < /a > < /li >
    < li > < a href = "#" > city of O'Fallon < /a > < /li >
    < li > < a href = "#" > welcome Guide O'Fallon < /a > < /li >
    < li > < a href = "#" > neighborhood restaurants Guide O'Fallon - Shiloh < /a > < /li >
    < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Shiloh
    < ul >
    < li > < a href = "#" > Village of Shiloh < /a > < /li >
    < li > < a href = "#" > Village Services Guide < /a > < /li >
    < /ul >
    < /li >
    < li > < a href = "#" > events & amp; Home Planning Guide < /a > < /li >
    < li > < a href = "#" > relocation package Info < /a > < /li >
    < li > < a href = "#" > Tourism Office Illinois South < /a > < /li >
    < /ul >
    < /li >
    < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > COMMITTEES
    < ul >
    < li > < a href = "#" > Board of Directors < /a > < /li >
    < li > < a href = "#" > ambassadors < /a > < /li >
    < li > < a href = "#" > investors Star < /a > < /li >
    < li > < a href = "#" > MSN < /a > < /li > Member Directory
    < /ul >
    < /li >
    < li > < a href = "#" class = "MenuBarItemSubmenu" > CONTACT US < /a >
    < ul >
    < li > < a href = "#" > Login Member < /a > < /li >
    < li > < a href = "#" > MSN < /a > < /li > Member Directory
    < li > < a href = "#" > relocation package Info < /a > < /li >
    < li > < a href = "#" > Community Business Info < /a > < /li >
    < /ul >
    < /li >
    < li > < a href = "#" class = "MenuBarItemSubmenu" > EVENTS < /a >
    < ul >
    < li > < a href = "#" > News < /a > < /li >
    < li > < a href = "#" > calendar < /a > < /li >
    < li > < a href = "#" > photo library < /a > < /li >
    < li > < a href = "#" > Hot Deals < /a > < /li >
    < /ul >
    < /li >
    < li > < a href = "#" class = "MenuBarItemSubmenu" > JOIN < /a >
    < ul >
    < li > < a href = "#" > MSN < /a > < /li > Member Directory
    < li > < a href = "#" > join < /a > < /li >
    < li > < a href = "#" > Hot Deals < /a > < /li >
    < li > < a href = "#" > Login Member < /a > < /li >
    < li > < a href = "#" > Community Business Info < /a >
    < br / >
    < /li >
    < /ul >
    < /li >
    < /ul >

    I added the following to the document (after the link to the sections)

    and he was able to see the menu bar.

    However, while browsing through the stylesheet, I noticed that he had been ill-treated unrecognizable. In this regard, I would recommend starting with a blank style sheet and by changing only the colors and sizes of font style rules existing. Do not add new rules, do not delete the existing rules.

    See how you go and return report problems.

Maybe you are looking for

  • ConfigFree - Radar continues to show an error message and the FN key does not work

    Error message: "wireless communication disabled. Please select a Wi - Fi using the Fn + F8 key". (Even when the wireless connection is active and works very well - hardware button works) problem is that pressing FN + F8 help is no longer. FN key not

  • Windows media player - live radio stream does not.

    Original title: windows media player - live radio stream Windows media player-i'm trying to listen to a live stream of a radio station.  I did this for a few days and it worked fine.  Now, it won't work, it shows the connection and made, but nothing

  • reset all preferences

    How can I reset all default preferences Windows 10.  < Alt > < cntl > < shft > tried without success.

  • Oracle 11g Planner get_file - shows

    Hi allI am runnign a job and out go to a file. By default when you use external (EXECUTABLE) jobs, the file goes to $ORACLE_HOME/Planner/log.It all works very well.Where I have a problem, it's when I try to read the contents of the file (DBMS_SCHEDUL

  • How to create brands in a vaulted space policy

    I need to recreate this dial and I learned how to create regularly spaced tick marks in a circle, but it is an ellipse.  Here, I tried to draw two ellipse then used scissors to cut down them to size.  Then, I used the online tool and called each of t