SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display:inline not working correctly

    Here is my css:

    Code:
    #navcontainer-topnav ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    #navcontainer-topnav li {
    	border-bottom: 1px solid #CCC;
    	margin: 0;
    }
    
    #navcontainer-topnav li a {
    	display: inline;
    	padding: 3px 5px 3px 0.5em;
    	border-left: 10px solid #333;
    	border-right: 10px solid #9D9D9D;
    	background-color: #666;
    	color: #FFF;
    	text-decoration: none;
    }
    
    #navcontainer-topnav li a:hover, a#active_menu:link, a#active_menu:visited {
    	border-left: 10px solid #1C64D1;
    	border-right: 10px solid #5BA3E0;
    	background-color: #80C358;
    	color: #FFF;
    }
    and here is my html:

    HTML Code:
    <div id="navcontainer-topnav">
    <?php  mosLoadModules('header', -2);  ?>
    </div>
    When I put just this into a page it displays my menu vertically, not horizontally. In Joomla I have my menu set to flat list but it still displays vertically.

    Any ideas?

    Dan

  2. #2
    Non-Member Webby007's Avatar
    Join Date
    Sep 2005
    Location
    UK, England
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried adding float: left; into #navcontainer-topnav li a { ?

  3. #3
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A is inline by default, you should make LI inline instead.

  4. #4
    SitePoint Addict hurricanedan's Avatar
    Join Date
    Feb 2006
    Location
    North Carolina
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Webby007,

    That worked!

    Now, if you don't mind, why did it work?

    Thanks again,

    Dan

  5. #5
    Non-Member Webby007's Avatar
    Join Date
    Sep 2005
    Location
    UK, England
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well you have told the li elements to float left, this causes them not to go onto a seperate line but to ...float next to each other as the property is applied for each li tag. so you have a string of floats!

    Glad to be of service

    I have a nice list of useful CSS Rollovers on my forum if you wanted to check them out.

    Website: www.webdesignerforum.co.uk/index.php?showtopic=138


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
  •