Results 1 to 3 of 3

Thread: navigation list

  1. #1
    Join Date
    Jul 2010
    Posts
    228
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Default navigation list

    I download a horizontal navigation bar in dynamic drive, but the problem is i want that company bar first, then the event and the last is the product.. but when i run my webpage the product bar was come first... here is the code:

    Code:
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    #ddcolortabs{
    margin-left: 2px;
    padding: 0;
    width: 100%;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    padding-left: 2px;
    }
    
    #ddcolortabs ul{
    font: bold 11px Arial, Verdana, sans-serif;
    margin:0;
    padding:0;
    list-style:none;
    }
    
    #ddcolortabs li{
    display:inline;
    margin:0 2px 0 0;
    padding:0;
    text-transform:uppercase;
    }
    
    
    #ddcolortabs a{
    float:right;
    color: white;
    background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;
    margin:115px 2px 0 0;
    padding:0px 0 1px 3px;
    text-decoration:none;
    letter-spacing: 1px;
    }
    
    #ddcolortabs a span{
    float:right;
    display:block;
    background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;
    padding:9px 9px 2px 6px;
    }
    
    #ddcolortabs a span{
    float:none;
    }
    
    
    #ddcolortabs a:hover{
    background-color: #678b3f;
    }
    
    #ddcolortabs a:hover span{
    background-color: #678b3f ;
    }
    
    #ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
    background-color: #678b3f;
    }
    
    #ddcolortabsline{
    clear: both;
    padding: 0;
    width: 100%;
    height: 8px;
    line-height: 8px;
    background: #678b3f;
    border: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
    }
    
    </style>
    
     <div id="ddcolortabs">
    <ul>
    <li style="margin-left: 1px" id="current"><a href="Company.php" title="Company"><span>Company</span></a></li>
    <li><a href="Event.php" title="Events"><span>Events</span></a></li>
    <li> <a href="Products.php" title="Products"><span>Products</span></a></li>
    </ul>
    </div>
    <div id="ddcolortabsline"></div>

  2. #2
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You use 'float: right;' so your menu items will be reversed.
    The "Last item in" is the "First item out". (backwards)
    Just reverse your menu ul/li declaration.

    Hope this helps.

    The GadgetGuy

  3. #3
    Join Date
    Jul 2010
    Posts
    228
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Default

    thank you...

Bookmarks

Posting Permissions

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