Mitä navigointipalkit ovat?
Mietipä: navigointipalkkisi on itseasiassa vain luokittelematon lista linkkejä.
Sijoitetaanpa ne <ul>
-tägin sisään.
- linkki 1
- linkki 2
- linkki 3
- linkki 4
- linkki 5
Navigaatio vaakatasoon
CSS:ää käyttäen voimme määrätä, miten nämä listat näytetään.
Käyttämällä käskyä display:inline
voimme helposti luoda horisontaalisen
navigaation.
Tässä koodi tätä vaakatasossa olevaa navigaatiota varten:
#nav1{
margin-top: 1em;
margin-bottom: 0.5em;
}
#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}
#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}
#nav1 li:first-child {
border: none;
}
Pystypalkit navigaatiossa
Alla koodi tätä navia varten:
#nav2 {
background-color: silver;
border: solid 1px gray;
width: 8em
}
#nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}
#nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray;
width: 100%;
display: block
}
html>body #nav2 li {
width: auto;
}
#nav2 li:first-child {
border: none
}
Lisätietoja löydät mm. Mark Newhouse:n artikkelista, Taming lists, A List Apart-sivustolla, ja "Styling lists" CSS-Discuss wikistä.