- This topic is empty.
-
AuthorPosts
-
January 15, 2012 at 12:18 pm #36126thebossanovaMember
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 #94669BillyParticipantin 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 #94704timmeyMemberimo 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 #94877thebossanovaMembercynerWATCH: 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;
}
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.