Well, in trying to keep my xhtml semantic, I put my navigation links in an unordered list. I've been able to style it fine before, but now I can't get it to do what I want. I have it uptop in a bar, and want to make each link the same size so that this top bar is evenly divided. I've just got the bare bones, and haven't checked cross-browser-ness yet (don't want to put a lot of work in if it can't be done). There aren't any images or colors yet, and there are fixes needed, but you get the idea. It can be viewed here. (<!-- m --><a class="postlink" href="http://www.wdhaven.com/layout.php">http://www.wdhaven.com/layout.php</a><!-- m -->)
CSS:
#firstul {
list-style-type:none;
margin:0;
padding:0;
width:700px;
text-align:center;
position:absolute;
top:110px;
border-bottom:1px solid #808080;
}
#firstul li {
display:inline;
margin:0;
padding:0;
border:solid #808080;
border-width:0 1px 0 1px;
}Forget to check A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/#pipe">http://www.alistapart.com/articles/taminglists/#pipe</a><!-- m -->)?Well, that's not what I'm looking for. I'm looking to make each list item the same width, and they're of varying sizes. But I found a way of doing it by setting display to block and using floats. problem solved
List items are already blocks. All you need to do is set their widths and float them.
CSS:
#firstul {
list-style-type:none;
margin:0;
padding:0;
width:700px;
text-align:center;
position:absolute;
top:110px;
border-bottom:1px solid #808080;
}
#firstul li {
display:inline;
margin:0;
padding:0;
border:solid #808080;
border-width:0 1px 0 1px;
}Forget to check A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/#pipe">http://www.alistapart.com/articles/taminglists/#pipe</a><!-- m -->)?Well, that's not what I'm looking for. I'm looking to make each list item the same width, and they're of varying sizes. But I found a way of doing it by setting display to block and using floats. problem solved
List items are already blocks. All you need to do is set their widths and float them.