Meniu orizontal cu CSS

Mai de mult, cand inca ma chinuiam cu phpul aveam obiceiul de a folosi tagurile paragraph () pentru afisarea meniului principal. Mai tarziu mi s-a atras atentia ca este gresit, asa ca m-am mobilizat si am inceput sa invat CSS (Cascade Style Sheet) si atunci am descoperit ca pentru meniuri se folosesc tagurile pentru lista (<ul></ul>).

In HTML codul trebuie sa arate ceva de genul:

Codul de mai sus va afisa un meniu vertical. Ce fac daca vreau ca sa nu mai apara acele bulinute in fata linkului? Vom da o clasa tagului <ul> astfel:

<code><ul class=”navigator”></code>

Acum tagul ul are clasa navigator, dar asta nu modifica cu nimic lookul meniului daca nu definim clasa in CSS:

<code>ul.navigator {

list-style: none;

}</code>

In acest moment am scapat de bulinutele din fata linkurilor. Dar nu am terminat, titlul articolului era „Meniu orizontal cu CSS”. Pentru a face un meniu orizontal trebuie sa scapam in primul rand de paddingul tagului ul:

ul.navigator {

list-style: none;

padding: 0px;

}</code>

Si acum sa aliniem linkurile de la stanga la dreapta:

<code>.navigator li {

float: left;

margin-right: 3px;

}

</code>

Tagurile <li></li> ce vor fi continute in interiorul tagurilor <ul class=”navigator”></ul> vor fi aliniate de la stanga spre dreapta, iar spatiul dintre ele va fi de 3 pixeli.

In final codul css ar trebui sa arate cam asa:

<code>ul.navigator {

list-style: none;

padding: 0px;

}

.navigator li {

float: left;

margin-right: 3px;

}</code>

El poate fi amplasat intr-un fisier css exterior sau in interiorul tagurilor <style></style> din head.