www.webdeveloper.com
Results 1 to 4 of 4

Thread: UL horizontal Navbar, order reversed?

  1. #1
    Join Date
    Mar 2009
    Posts
    23

    Red face UL horizontal Navbar, order reversed?

    I've made a floating navbar over the header background graphic in my new site. For some reason, the list order is reversed - ie, the last item on the list appears as the first in the navbar.

    What have I done to cause this:

    Here is the css:

    Code:
    #nav {
    	background-color:transparent;
    	position:absolute;
    	margin:0 auto;
    	width:900px;
    	top:160px;
    	text-align:left;
    }
    
    #navlist ul {
    	list-style-type:none;
    	margin:6px;
    	margin-right:38px;
    	padding:0;
    	text-align:center;
    }
    
    #navlist ul li {
    	display:inline;
    }
    
    #navlist ul li a {
    	display:block;
    	float:right;
    	width:65px;
    	padding:3px;
    	margin-left:6px;
    }
    
    #navlist ul li a:link, #navlist ul li a:visited {
    	font-weight:bold;
    	text-decoration:none;
    	color:#ccc;
    	background-color:#666;
    }
    
    #navlist ul li a:hover {
    	font-weight:bold;
    	color:#666;
    	background-color:#ccc;
    }
    and here is the html:

    HTML Code:
    		<div id="nav">
    		 <div id="navlist">
    
                     <ul>
                      <li><a href="http://cathrynjupp.com/blog/" target="_blank">Blog</a></li>
                      <li><a href="clients.shtml">Clients</a></li>
                      <li><a href="contact.shtml">Contact</a></li>
                      <li><a href="gallery.shtml">Gallery</a></li>
                      <li><a href="products.shtml">Products</a></li>
                      <li><a href="sessions.shtml">Sessions</a></li>
                      <li><a href="index.shtml">Home</a></li>
                     </ul>
    
    		 </div>
    		</div>
    (which I have reversed so that the list appears in the right order on the site.

    Here is the site (little to no content as yet, still developing the basics)

    Thanks in advance for your help

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    float:right is the cause.
    No need for the div's:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Basic HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    
    </script>
    
    <style type="text/css">
     #nav {
           overflow:hidden;
    	background-color:transparent;
    	margin:166px auto 6px auto;
    	width:900px;
    	list-style-type:none;
    	padding:0;
    }
    
    #nav li {
    	float:left;
    }
    
    #nav li a {
    	display:block;
    	width:65px;
    	padding:3px;
    	margin-left:6px;
    	text-align:center;
    }
    
    #nav li a:link, #nav li a:visited {
    	font-weight:bold;
    	text-decoration:none;
    	color:#ccc;
    	background-color:#666;
    }
    
    #nav li a:hover {
    	font-weight:bold;
    	color:#666;
    	background-color:#ccc;
    }
    </style>
    
    </head>
    <body>
    <ul id="nav">
        <li><a href="http://cathrynjupp.com/blog/" target="_blank">Blog</a></li>
        <li><a href="clients.shtml">Clients</a></li>
        <li><a href="contact.shtml">Contact</a></li>
        <li><a href="gallery.shtml">Gallery</a></li>
        <li><a href="products.shtml">Products</a></li>
        <li><a href="sessions.shtml">Sessions</a></li>
        <li><a href="index.shtml">Home</a></li>
    </ul>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Mar 2009
    Posts
    23
    Thank you, changing it to float:left and adjusting the margins fixed it.

    I tried using your code, but it pushed the "content background" graphic down and made a mess ... why would it have affected the flow?

    Is it because you didn't use position:absolute? I'll have a proper play with it when the kids are asleep and see if I can get it to work - I do recognise that I'm falling into a trap of nested divs instead of nested tables!

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Avoid using position:absolute to position blocks of elements; use margin to control position.
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles