Tabovi u pet koraka

Peti korak – oblikovanje aktivnog jahača

Za kraj je potrebno dodati efekt koji boju pozadine na aktivnom jahaču čini jednakom boji stranice. To se postiže upotrebom još jednog CSS identifikatora:

#aktivni {
color: #000;
background: #fff;
border-bottom-color: white;
}

Ova klasa se dodaje na link koji pokazuje na trenutnu stranicu (u našem primjeru na peti korak).

<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 id="aktivni" href="5korak.html">
5. korak</a></li>
</ul>

Konačan izgled navigacije:

Cjelokupna CSS uputa:

#jahaci {
color: #000;
border-bottom: 2px solid #455372;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 1px;
padding-left: 30px;
}
#jahaci li {
display: inline;
}
#jahaci li a {
color: #000;
background: #d9dbe1;
border: 2px solid #455372;
padding: 3px 5px 1px 5px;
margin: 0px;
text-decoration: none;
}
#jahaci li a:hover {
border-bottom: 2px solid white;
background-color: #eee;
color: #455372;
}
#jahaci li a:active {
color: #c00;
}
#jahaci li a#aktivni {
color: #000;
background: #fff;
border-bottom: 2px solid white;
}

Na vašoj stranici na kojoj ste uz čitanje ovog poglavlja pratili izgradnju skupa jahača proglasite jedan jahač aktivnim. Ostali linkovi vodit će na druge stranice, koje možete stvoriti iz ove prve, a od kojih će svaka imati svoj aktivni jahač.

Prava je snaga ovakvog načina rada vidljiva, ponovno, kad se promjena sadržaja kartice obavlja JavaScriptom, te skripta automatski mijenja aktivni jahač. Automatska promjena aktivnog jahača može se postići i skriptama sa serverske strane, što pripada naprednijim tehnikama izrade web sjedišta.

Accessibility

Reset All

Boja pozadine

Font

Veličina fonta

Boja teksta