Trying to get rid of some weird bottom padding under the nav items, which is being caused by the navigation .span
style (which is the one that makes things work so I can't get rid of it). I want the nav items to be flush to the top and bottom.
I've been using this bit of coder for the longest time and I think it's either the first time I notice the padding or I've just been sweeping it under the rug.
Fiddle here http://jsfiddle.net/arminvit/B2sAn/
Quick look at the code below:
CSS
/* NAVIGATION */
.navigation {
width:100%;
clear:both;
float:left;
text-align:justify;
padding:0;
margin:0;
}
.navigation * {
display: inline;
margin:0;
padding:0;
}
.navigation ul {
list-style-type: none;
margin:0;
padding:0;
}
.navigation li {
font-family:Arial;
font-size:12px;
color:white;
background:black;
padding:5px;
margin:0px;
white-space:nowrap;
}
.navigation span {
display: inline-block;
position: relative;
width: 100%;
height:0;
margin:0;
padding:0;
}
HTML
<div class="navigation">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span></span>
</div><!--END navigation-->
Not too sure of what you want, but seems to be a mixed or left overs of differents method .
So if you want to text-align justify your links, drop all about floatting.
http://jsfiddle.net/69LjY/
some to read : http://www.barrelny.com/blog/text-align-justify-and-rwd/
/* NAVIGATION */
.navigation {
width:100%;
text-align:justify;
padding:0;
margin:0;
}
.navigation ul {
list-style-type: none;
margin:0;
padding:0;
line-height:0;
}
.navigation li {
font-family:Arial;
font-size:12px;
color:white;
background:black;
padding:5px;
margin:0px;
display:inline-block;
line-height:1.2em;
}
.navigation ul:after {content:'';padding-right:2700px;}/* line-height 0 + this avoid gaps under , padding , use widest screen width you like*/