CSS izbornik

Dodatno oblikovanje popisa

Uz razmještanje elemenata na stranici, izbor boja i dodavanje ukrasa pripadaju poslu web dizajnera. Ovdje se može vidjeti snaga CSS-a, jer web dizajner, bez obzira na napisan kôd, mijenjanjem CSS-a u potpunosti može promijeniti izgled popisa.

Popis ćemo obojiti plavom bojom, znakove ćemo podebljati, a kao ukras i podlogu za dinamički efekt, koristit ćemo lijevu granicu linka. Postavit ćemo je na debljinu od 6 piksela za linkove glavnog izbornika, odnosno 4 piksela za linkove podizbornika, definirati liniju (vrijednost solid) i postaviti joj boju koju smo dodijelili slovima.

ul, li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
ul li a, ul li a:visited {
  display: block;
  text-decoration: none;
  margin: 1px;
  padding: 2px 0px 2px 5px;
  width: 120px;
  color: #336;            /* boja linkova */
  font-weight: bold;  /* podebljana slova */
  border-left: 6px solid #336; /* granica */
}
ul ul li a, ul ul li a:visited {
  display: block;
  text-decoration: none;
  margin: 1px 1px 1px 15px;
  padding: 2px 0px 2px 5px;
  width: 108px;
  color: #336;            /* boja linkova */
  font-weight: bold;  /* podebljana slova */
  border-left: 4px solid #336; /* granica */
}

Predefinirana vrijednost širine granice linka je 0 piksela, tako da ovdje trebamo postaviti debljinu samo lijeve granice. Ovim smo dobili sljedeći prikaz:

Oblikovani popis je tu. Ono što nam slijedi je završavanje dodavanjem dinamičkog efekta.

  • Znate li sad zašto su u definiciju stila uvrštene pseudoklase a:visited? Ako sad to ne možete otkriti, isprobajte definiciju stila bez tih pseudoklasa.
   
CARNet