Oppaassa on tavoitteena saada tehdyksi pystysuuntainen navigointipalkki vain HTML:ää ja CSS:ää käyttäen.
Aluksi aioin tehdä tämän oppaan, kuten monet muutkin CSS-navigointipalkki oppaat listojen avulla, mutta
tässä oppaassa käytän vain yksinkertaista rakennetta, jossa on vain itse linkit (<a></a>), "<div></div>"-käärin.
Ensimmäiseksi pitää avata tekstiedori, jota haluat käyttää, kuten windowsin
notepad. Luo HTML-sivunmuut rakenteet, ennen kuin alat tekemään itse navigointipalkkia. Voit myös kopioida tämän pohjan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ensimmäinen navigointivalikkoni</title>
</head>
<body>
<!-- Sisältö <body>......</body>-tagien väliin -->
</body>
</html>
Käytin DOCTYPEnä xhtml 1.0 Transitionalia, mutta jos haluat, voit poistaa tai vaihtaa sen.
Seuraavaksi kirjoita <body> ja </body> tagien väliin tämä:
<div id="navibar">
<a href="#">Etusivu</a><br />
<a href="#">Linkit</a><br />
<a href="#">Oppaat</a><br />
<a href="#">Lataamo</a><br />
<a href="#">Vieraskirja</a><br />
<a href="#">Keskustelu</a><br />
</div>
Kohdassa <div id="navibar> luomme uuden elementin, joka sisältää ja linkit, ja jolla rajoitamme palkin koon.
Sille on myös annettu tunnus id-attribuutilla, jotta voimmeviitata siihen CSS-tyylipohjassa.
Alla olevassa kohdassa luomme linkit ja käytämme rivinvaihtoon tagia "<br />".
href-attribuutilla määritämme linkin osoitteen. (Tässä tapauksessa niillä ei ole kohdetta.
<a href="#">Etusivu</a><br />
<a href="#">Linkit</a><br />
<a href="#">Lataamo</a><br />
<a href="#">Vieraskirja</a><br />
<a href="#">Keskustelu</a><br />
Ja lopuksi suljemme navigointipalkin käärinelementin tagilla </div>.
Seuraavaksi voimmekin sirtyä CSS:n pariin.
Luo uusi .css päätteinen tiedosto (notapadilla uusi tekstitiedosto > tallenna nimellä> navigointipalkki.css
Kopioi nämä rivit luomaasi uuten tiedostoon:
#navibar{
float: left;
height: 100%;
width: 300px;
background-color: #008981;
border: 1px solid black;
border-right: 3px solid black;
border-bottom: 2px solid black;
margin: 10px;
text-align: center;
}
#navibar a, #navibar a:visited{
float: left;
width: 100%;
border-bottom: 1px solid black;
text-decoration: none;
color: white
}
#navibar a:hover, #navibar a:active{
text-decoration: none;
background-color: #588986;
color: white;
font-weight: bold;
}
Alla olevassa kohdassa teemme muotoilut itse palkille (<div id="navibar>....</div>).
Ensimmäisellä rivillä viittaamme elementtiin, jonka id on navibar ja aloitamme muotoilut
aaltosulkeella: "{".
ominaisuus-arvoparilla
float: left; määritämme palkin "kellumaan sivun vasempaan laitaan.
ominaisuus-arvoparilla
height: 100%; määritämme palkin korkeuden sen sisällön mukaan, eli
palkin korkeus kasvaa sitä mukaa, miten paljon lisäät linkkejä.
ominaisuus-arvoparilla
width: 300px; määritämme palkin leveydeksi 300 pikseliä (px).
Seuraavalla ominaisuus-arvoparilla
background-color: #008981; määritämme palkin taustaväriksi
hex-arvon #008981. Väri on vihertävän ruskea. Voit myös määrittää väriksi minkä tahansa värin joko
viittaamalla värin nimeen. (katso
http://www.w3schools.com/css/css_colornames.asptietääksesi aiheesta lisää.)
Seuraavaksi määritämme palkille joka puolella 1 pikselin paksuisen mustan rajan:
border: 1px solid black;.
Ja oikealle 3 pikselin paksuisen, samanlaisen rajan. Sekä 2 pikselin paksuisen rajan pohjaan.
Seuraavissa kahdessa kerromme, kuinka paljon haluamme tilaa palkin ympärille (
margin: 10px; - 10 pikseliä tilaa) ja miten haluamme
tasata tekstin palkin sisällä (
text-align: center; - keskelle).
#navibar{
float: left;
height: 100%;
width: 300px;
background-color: #008981;
border: 1px solid black;
border-right: 3px solid black;
border-bottom: 2px solid black;
margin: 10px;
text-align: center;
}
Seuraavaksi viittaamme palkin sisällä oleviin <a>-elementteihin. (linkit).
Aloitamme muotoilut, kuten edelläkin aaltosulkeilla.
Ensimmäisellä muotoilurivillä ilmoitamme, että linkien pitää "kellua" vasemmalle.
Tämä aiheuttaa koko linkin varaaman tilan (
width: 100%) toimimaan, kokonaan linkkinä.
Linkistä muodostuu painikemainen. (Katso lopputulos).
Rivillä
border-bottom: 1px solid black; määritämme jokaiselle linkille pohjaan rajaksi 1 pikselin
paksuisen mustan rajan.
Seuraavaksi määritäämme, ettei linkkiä korosteta millään lailla (oletus useissa selaimissa on alleviivaus).
ja viimeisellä rivillä kerromme, minkä väriseksi linkin teksti tullee (valkoinen.)
Kohdassa
a:visited määritämme, että nämä muotoilutpätevät myös käytyihin linkkeihin.
#navibar a, #navibar a:visited{
float: left;
width: 100%;
border-bottom: 1px solid black;
text-decoration: none;
color: white
}
Nyt voimme edetä viimeiseen osaan CSS-muotoiluista.
Nyt määritämme muotoilut linkeille, kun hiiri on linkin päällä, kun linkkiä pidetään painettuna.
Määritämme tekstin korostuksen (yleensä alleviivaus pois) kohdassa
text-decoration: none;.
Seuraavaksi määritämme linkin alueella taustaväriksi hieman palkin alkuperäistä taustaväriä harmaamman
värin.
background-color: #588986;. Ja vielä viimeisenä kerromme, että teksti tulee lihavoida.
#navibar a:hover, #navibar a:active{
text-decoration: none;
background-color: #588986;
font-weight: bold;
}
Nyt tallenna navigointipalkki.css.
Vielä pitää lisätä HTML-tiedostoon yksi rivi koodia. Nimittäin linkki tekemääsi tyylipohjaan.
Lisää tämä koodi <head> ja </head> tagien väliin:
<link rel="stylesheet" type="text/css" href="navigointipalkki.css" />
Sijoita kummatkin tiedostot (navigointipalkki.css ja tekemäsi HTML-tiedosto samaan kansioon).
Lopulta HTML-koodisi tulisi näyttää suunnilleen tältä:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ensimmäinen navigointivalikkoni</title>
<link rel="stylesheet" type="text/css" href="navigointipalkki.css">
</head>
<body>
<!-- Sisältö <body>......</body>-tagien väliin -->
<div id="navibar">
<a href="#">Etusivu</a><br />
<a href="#">Linkit</a><br />
<a href="#">Oppaat</a><br />
<a href="#">Lataamo</a><br />
<a href="#">Vieraskirja</a><br />
<a href="#">Keskustelu</a><br />
</div>
</body>
</html>
Ja CSS-tyylipohjasi tältä:
#navibar{
float: left;
height: 100%;
width: 300px;
background-color: #008981;
border: 1px solid black;
border-right: 3px solid black;
border-bottom: 2px solid black;
margin: 10px;
text-align: center;
}
#navibar a, #navibar a:visited{
float: left;
width: 100%;
border-bottom: 1px solid black;
text-decoration: none;
color: white
}
#navibar a:hover, #navibar a:active{
text-decoration: none;
background-color: #588986;
color: white;
font-weight: bold;
}
Nyt voimmekin jo tarkastella lopputuloksia.
Jos teit kaiken oikein, niin lopputuloksen pitäisi olla jotakuinkin tämän näköinen:
http://finwe.arkku.net/oppaat/navigointipalkit/pysty.htmlLisäys: Voit myös tehdä tämän palkin käyttämättä <br />-tagia, jos käytät <span></span>-tageja yksittäisten linkkien käärimiseen
ja määrittämällä tyylipohjassa niiden muotoiluksi
width: 100%; ja korkeudeksi haluamasi korkeuden.
Ja
kommentteja tällekkin kiitos
