Menu poziome
2009
Zacznijmy od typowej listy pionowej, którą następnie przekształcimy arkuszem stylów CSS
Standardowe listy HTML używają padding, marginesów oraz lewego wcięcia. Ustawimy maginesy i padding na “0″.
#navicontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
Kod HTML
<div id=”navicontainer”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>
Step II
Aby zmienić listę pionową na poziomą należy użyć “display: inline;” dla poszczególnych pozycji listy “LI” i ustawić padding tylko dla elementu “LI”, co spowoduje, że będziemy mieli małą spację pomiędzy poszczególnymi linkami.
#navicontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navicontainer ul li { display: inline; padding-left:2;}
Kod HTML
<div id=”navicontainer”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>