Siisti sivuvalikko CSS:lla
03.02.2005 klo 12.52 • Aihe: Web
Tässä siisti valikko tilanteisiin, joissa sisältö on pilkottu usealle samanarvoiselle sivulle.
Esimerkki valikosta käytössä.
Ei viimeisen päälle hiottu, mutta tuntuu toimivan. Testattu IE 6.0, Firefox 1.0 ja Opera 7.54:ssa (Windows XP). Perustuu osin Listamaticin Clagnut CSS Tabs -valikkoon.
XHTML:
<div id="sel">
<ul>
<li><span>1 </span>Linkkiteksti</li>
<li><a href="sivu02.htm"><span>2 </span>Linkkiteksti</a></li>
<li><a href="sivu03.htm"><span>3 </span>Linkkiteksti</a></li>
</ul>
</div>
CSS:
#sel ul {
list-style: none;
margin: 0 0 1em 0;
padding: 0;
}
#sel li {
padding-top: 0.3em;
}
#sel a {
margin: 0;
}
#sel a span {
text-decoration: none;
border: 1px solid #669;
padding: 2px 1px 2px 5px;
margin-right: 5px;
background: #ffd47d
}
#sel a:hover {
background: #ffd47d
}
#sel span {
border: 1px solid #669;
padding: 2px 1px 2px 5px;
margin-right: 5px;
background: #fff;
}
Lisäys (3.2.2005 14.21): Pari turhaa marginaalityyliä poistettu.
Kommentit
1 Aki Björklund (03.02.2005 klo 13.43)
Eikö tuo ole selvästi järjestetty lista (OL) eikä järjestämätön? Entä onko listan ympärillä oleva DIV välttämätön?
2 Mikko (03.02.2005 klo 14.18)
DIV on turha. id:n voisi myöskin muuttaa class:iksi, jos valikkoja haluaa käyttää useampia samalla sivulla.
Ja totta, lista on paremminkin järjestetty. Silloin kuitenkin ilman tyylejä katsottuna valikossa olisi numerot kahteen kertaan (tyyliin "1. 1 Linkkiteksti"). Siksi päädyin järjestämättömään listaan, joka on minusta tyylittelemättömänä selkeämpi.
3 Jarkko (03.02.2005 klo 14.33)
Macilla Safari piirtää alleviivauksen koko rivin leveydeltä, eli numerolaatikon vasemmasta reunasta alkaen. Firefox taas aloittaa alleviivauksen heti laatikon oikeasta reunasta.
Tätä viestiä ei voi enää kommentoida.