Navigointi 2008-01-12 17:46
| Kuvaus: | Navigointilistan toteuttaminen XHTML:llä ja muotoilu CSS:llä. Navigointilistan rakenneSivuston sisäinen navigointi toteutetaan tekemällä ul-lista XHTML-asiakirjan loppuun. Lista ympäröidään div-elementillä, jolle annetaan kuvaava id. Myöhemmin lista asetellaan esimerkiksi vasempaan tai oikeaan reunaan id-attribuuttiin kohdistettavien CSS-määritysten. <div id="navigointi">
<ul>
<li><a href="index.html">Etusivu</a></li>
<li><a href="eka.html">Osio 1</a></li>
<li><a href="toka.html">Osio 2</a></li>
<li><a href="kolmas.html">Osio 3</a></li>
<li><a href="neljas.html">Osio 4</a></li>
<li><a href="info.html">Yhteystiedot</a></li>
</ul>
</div>
Pystysuuntainen navigointiListamerkkien poistaminenLuettelomerkit voidaan poistaa navigointilistasta CSS:llä. Samassa yhteydessä myös ul-elementin oletusmarginaalit ja -täytöt kannattaa poistaa. #navigointi ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
PainikkeetNavigoinnista voi myös tehdä painikkeet, jolloin myös linkit saadaan toimimaan laajemmalla alueella kuin pelkän tekstin päällä. Painikkeiden ominaisuuksia on helpompi määrittää kappaletason elementille. Määritetään ensin kappaletasoinen li-elementti merkkitasoiseksi display: inline. Merkkitasoisesta a-elementistä taas tehdään kappaletasoinen display: block. Tämän jälkeen padding ja muut painikkeiden ominaisuudet määritetään a-elementille. #navigointi {
/* muista varata tyhjää tilaa leveyssuunnassa koska
käyttäjä saattaa suurentaa fonttia */
width: 200px;
/* rivin vaihtuminen voidaan estää fonttia suurennettaessa */
white-space: nowrap;
}
#navigointi li {
display: inline; /* ulottuvuudet määritellään a-elementille */
}
#navigointi li a, #navigointi li a:hover {
display: block; /* ulottuvuudet määritellään a-elementille */
margin: 0;
padding: 2px 7px;
width: 100%;
}
/* esimerkki värien vaihtamisesta */
#navigointi li a {
background: #000;
}
#navigointi li a:hover {
background: #ccc;
}
Sivulla Kuvat ja grafiikka verkkosivuilla painikkeiden toteuttamisesta taustagrafiikalla. Vaakasuuntainen navigointiNavigointilista asetellaan vaakasuuntaan li-elementin CSS-määrityksellä display: inline. Kappaletasoinen listarivi siis määritetään käyttäytymään merkkitason elementin tavoin. #navigointi ul li {
display: inline;
margin: 0;
padding: 0;
}
Painikkeiden kokoa voidaan tämän jälkeen muuttaa määrittämällä a-elementille täyttöä padding-ominaisuudella. Huom! Jos lista asetellaan vaakasuoraan, li-elementit kannattaa kirjoittaa yhteen ilman rivinvaihtoja ja välilyöntejä. Muutoin selaimet lisäävät elementtien väliin välilyönnin mittaisen tyhjän tilan jota on vaikea poistaa. Mikäli tämä tila taas halutaan lisätä, se on helpompi tehdä li-elementille määrittämällä joko ominaisuutta margin-left tai margin-right.
<div id="navigointi">
<ul> <li><a href="index.html">Etusivu</a></li><li><a href="eka.html">Osio 1</a></li><li><a href="toka.html">Osio 2</a></li><li><a href="kolmas.html">Osio 3</a></li><li><a href="neljas.html">Osio 4</a></li><li><a href="info.html">Yhteystiedot</a></li> </ul> </div> LinkitInternetistä löytyy myös valmiita koodeja joilla navigoinnin voi toteuttaa pudotusvalikkona.
Uusimmat linkit
Lisää linkkejä haulla navigointi |
| Luokka: | web » ohje |
| Avainsanat: | xhtml, CSS, navigointi, lista |