Grafische gevorderde |
|
/*------------------------------
| Navigatie |
------------------------------*/
#navcontainer {
text-align: center;
height: 35px;
}
#navlist {
list-style: none;
margin: 0px;
padding: 0px;
vertical-align: bottom;
height: 35px;
}
#navlist li {
font-family: impact;
font-size: 18px;
color: #D8D9CB;
padding: 0px;
margin: 0px;
height: 35px;
display: inline;
}
li#n_sep {
background-color: #0D0D0D;
text-align: center;
width: 7px;
height: 35px;
}
<div id="navcontainer">
<ul id="navlist">
<li id="n_link">Item one</li>
<li id="n_sep"><img src="images/nav_sep.gif" width="1" height="35" alt="" /></li>
<li id="n_link">Item one</li>
<li id="n_sep"><img src="images/nav_sep.gif" width="1" height="35" alt="" /></li>
<li id="n_link">Item one</li>
<li id="n_sep"><img src="images/nav_sep.gif" width="1" height="35" alt="" /></li>
<li id="n_link">Item one</li>
</ul>
</div>
/*------------------------------ | Navigatie | ------------------------------*/ #navcontainer { text-align: center; height: 35px; } #navlist { list-style: none; margin: 0px; padding: 0px; vertical-align: bottom; height: 35px; } #navlist li { font-family: impact; font-size: 18px; color: #D8D9CB; padding: 0px; margin: 0px; height: 35px; display: inline; } li#n_sep { background-color: #0D0D0D; text-align: center; width: 7px; height: 35px; } <div id="navcontainer"> <ul id="navlist"> <li id="n_link">Item one</li> <li id="n_sep"><img src="images/nav_sep.gif" width="1" height="35" alt="" /></li> <li id="n_link">Item one</li> <li id="n_sep"><img src="images/nav_sep.gif" width="1" height="35" alt="" /></li> <li id="n_link">Item one</li> <li id="n_sep"><img src="images/nav_sep.gif" width="1" height="35" alt="" /></li> <li id="n_link">Item one</li> </ul> </div>
De #navlist {..} wil nog wel 35px hoog worden, maar ik wil de #navlist li {..} 35px hoog krijgen en verticaal in het midden uitlijnen, maar dat lukt niet, hoe los ik dat op?
|