|
Popis formatiramo jednostavnim (ul i li) i kontekstnim selektorima (ul li a i ul ul li a). Primjećujete da ovaj posljednji identificira samo one linkove koji su u li elementu potpopisa (ul ul).
Na linkove u oba popisa postavljamo sljedeća svojstva:
- display:block – prikaz linkova jedan ispod drugog
- text-decoration – ukidamo podvlačenje linkova
- margin – marginom razdvajamo linkove
- padding – udaljavamo linkove od ruba njegovog budućeg okvira
- width – definiramo širinu linka.
ul, li {
list-style: none;/*uklanja grafičku oznaku*/
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;
}
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;
}
Sada imamo formatiran popis i slijedi dodavanje boje i biranje efekta uz linkove.
-
 Možete li već sad naslutiti zašto su margine i, osobito, odmaci definirani na linkovima, a ne na elementima lista, li?
- Vidite li možda neku sitnicu vezanu uz dimenzije koja vam djeluje čudno? Potrudite se naći je skicirajući dimenzije formatiranih elemenata. Razlozi za upisane vrijednosti će vam biti također jasni nakon pročitanih sljedećih lekcija.
- Često se za sve linkove na stranici definira boja, te posebno boja za posjećene linkove pseudoklasom a:visited. No, želimo da se to odnosi samo na „obične” linkove, one u tekstu, a ne i za linkove u izborniku, za koje želimo da uvijek budu iste boje.
- Zbog toga smo za izbornik odmah napisali ul li a, ul li a:visited umjesto samo ul li a (te analogno za potpopise), da kasnije, kad CSS-u dodate navedene opise izgleda „običnih” linkova, ne morate ispravljati pogreške.
|
|
|
