Drugi korak – oblikovanje popisa

U ovom se koraku linkovima dodaje pozicioniranje (smještanje), boja znakova te crta koja se koristi za razgraničenje od sadržaja. Smještanje se uspostavlja marginama i odmacima, a kao crta širine 2 piksela upotrebljava se donja granica nesortiranog popisa.

#jahaci {
  color: #000;
  border-bottom: 2px solid #455372;
    /* linija razgraničenja od sadržaja */
  margin-top: 50px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding: 1px;
  padding-left: 30px;
}

U HTML kôdu popisa i dalje nije potrebno ništa mijenjati jer je cijela uputa definirana implicitno putem atributa id nenumeriranog popisa:

<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 linija s linkovima poredanim jedan do drugog.

    
CARNet
Accessibility
Reset All

Boja pozadine

Font

Veličina fonta

1

Boja teksta