Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › floating nav list elements

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 15, 2012 at 12:18 pm #36126
    thebossanova
    Member

    Hi All,

    new to the forum but appreciate any feedback.

    I’m styling a list for navigation (horizontally), but the links and hover/transition effects stop working when I float them to the left for positioning, and they need to be floated as if the browser is made smaller the list becomes 2 rows.

    HTML:

    CSS:


    

    
nav {
    
width:80%;
    
margin: 10px auto;
    
}
    

    
nav ul, nav ol {
    
list-style: none;
    
list-style-image: none;
    
margin: 0;
    
padding: 0;
    
}
    

    
nav li {
    
width:16.33%;
    
display:inline-block;
    
text-align:center;
    
text-decoration:none;
    
float:left;
    
}
    

    

    
nav li a, nav li a:link {
    
color:#000000;
    
text-decoration:none;
    
font:17px arial;
    
outline:0;
    
background-color:none;
    
width:100%;
    
height:100%;
    
}

    There’s more CSS around the link transitions but I don’t think that’s relative.

    Thanks

    January 15, 2012 at 4:22 pm #94669
    Billy
    Participant

    in nav ul, nav ol, the “l” is next to the bracket, and the “ist-style” below it.

    Can you float <li>s to the left like that?

    This it?
    I think that the mixing of float and inline has made them go over each other. I don’t know how you can fix it to make it do what you want it to, but removing the float should make it a little better.

    January 16, 2012 at 5:34 am #94704
    timmey
    Member

    imo the problem is the %-width of your li-elements.

    it works when you set width:auto, for example:
    http://jsfiddle.net/cjkFm/4/

    January 17, 2012 at 4:53 pm #94877
    thebossanova
    Member

    cynerWATCH: Fixed that, it was just a product of fixing up my code to display in the snippet.

    I reckon it’s a problem between those 2 elements as well, but can’t seem to find a solution online. All I’m trying to do is to centre the navigation and have them spaced evenly across the specified width.

    timmey: width set to auto pushes the elements back together as the width is only as big as the contained element (the text).

    edit: fixed! removing the float and setting text-align: centre on the <-ul-> has sorted it. Now the list is centered and I can set the size of the space between the elements whatever way I want (padding/margin/width etc…) Code below for my solution. Thanks for the help!


    

    
nav {
    
width:80%;
    
margin: 10px auto;
    
text-align:center;
    
}
    

    
nav ul {
    
margin:0;
    
padding:0;
    
list-style:none;
    
text-align:center;
    
}
    

    
nav li {
    
width:16%;
    
display:inline-block;
    
text-align:center;
    
text-decoration:none;
    
}
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.