Tabovi u pet koraka: Prvi korak

Prvi korak – definiranje popisa tabova

Osnovu našeg rješenja čini nenumeriran popis linkova – koriste se <ul> i <li> tagovi -

<ul>
<li><a href="1korak.html">1. korak</a></li>
<li><a href="2korak.html">2. korak</a></li>
<li><a href="3korak.html">3. korak</a></li>
<li><a href="4korak.html">4. korak</a></li>
<li><a href="5korak.html">5. korak</a></li>
</ul>

koji u prikazu daje linkove nanizane jedan ispod drugog.

Da bi se linkovi prikazali jedan do drugog, uvodi se novi selektor:

#jahaci li {
display: inline; /* postavlja popis u redak */
}

koji se dodaje na nenumerirani popis:

<ul id="jahaci">
<li><a href="1korak.html">1. korak</a></li>
<li><a href="2korak.html">2. korak</a></li>
<li><a href="3korak.html">3. korak</a></li>
<li><a href="4korak.html">4. korak</a></li>
<li><a href="5korak.html">5. korak</a></li>
</ul>

čime se u prikazu dobije željeni raspored linkova.

„Trik” s imenovanjem jedinstvenog dijela stranice, što izbornik obično jest, često olakšava definiranje stilova. Objasnite što bi se moglo dogoditi da stil elementa popisa, li, nije definiran kontekstno, unutar elementa #jahači.
Uputa: na stranicu iza popisa tabova dodajte malo teksta i još jedan popis.
Jednako kao u ovom poglavlju, ova bi tehnika mogla koristiti i u prethodnom.

Accessibility

Reset All

Boja pozadine

Font

Veličina fonta

Boja teksta