Menu poziome

Mar 31
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″.

Kod CSS

#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.

Kod CSS

#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>


Comments are closed.

Visit Our Friends!

A few highly recommended friends...

Archives

All entries, chronologically...

Pages List

General info about this blog...