Skip navigation
ErzaScarlet77
Currently Being Moderated

Spry Horizontal menu stacking up vertocally

Dec 12, 2012 5:24 PM

Tags: #error #javascript #css #layout

help

i thought by dividing the width (960px) by 4 itd make the 4 menu bar even out perfectly but now its a mess

 

http://i.imgur.com/tiLaz.jpg

 

what uh what do i do?

 

this is spry HORIZONTAL btw

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 12, 2012 6:24 PM   in reply to ErzaScarlet77

    No, that is wrong. When you divide the width by 4, you're actually containing the entire menu into that width, not for each button.

     

    Upload the file to your webserver and give us a link so we can check.

     

    -ST

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 13, 2012 4:49 AM   in reply to ErzaScarlet77

    Try the following

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">

    <style>

         body {width: 960px; margin: auto;}

         ul.MenuBarHorizontal li {width: 25%;}

    </style>

    </head>

     

    <body>

    <ul id="MenuBar1" class="MenuBarHorizontal">

         <li><a href="#">Item 1</a></li>

         <li><a href="#">Item 2</a></li>

         <li><a href="#">Item 3</a></li>

         <li><a href="#">Item 4</a></li>

    </ul>

    <script src="SpryAssets/SpryMenuBar.js"></script>

    <script>

         var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

    </script>

    </body>

    </html>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points