Sinun joka tätä luet tulisi osata ainakin (X)HTML:n perusteet ja hieman CSS:ää, jotta ymmärtäisit, mistä tässä on kysymys.
1. Dokumentin rakenne
- Koodi: Valitse kaikki
<!-- Yksinkertainen (X)HTML-dokumentin rakenne -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi-FI" lang="fi-FI">
<head>
<title>Yksinkertainen valikko</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* <![CDATA[ */
/* ]]> */
</style>
</head>
<body>
<div id="navikaatio">
<h3>Valikko</h3>
<ul>
<li><a href="#linkki-1">Linkki 1</a></li>
<li><a href="#linkki-2">Linkki 2</a></li>
<li><a href="#linkki-3">Linkki 3</a></li>
</ul>
</div>
</body>
</html>
Edellinen koodinpätkä luo normaalin (X)HTML-dokumentin, joka sisältää järjestämättömän listan. Selaimessa edelinen koodinpätkä näyttää suunnilleen tältä:
- [url=#linkki-1]Linkki 1[/url]
- [url=#linkki-2]Linkki 2[/url]
- [url=#linkki-3]Linkki 3[/url]
2. Tyylittely
Opas voisi olla kokonaisuudessaan tässä, mutta jotakin siitä puuttuu... Aivan! Se on ehkä "vähän" paljaantapainen... Siistitäänpä sitä hieman:
- Koodi: Valitse kaikki
#navikaatio
{
border: 1px solid #eee; // asettaa laatikkomme ympärille vaaleanharmaan, yhden pikselin paksuisen reunuksen.
width: 250px; // asettaa laatikon leveydeksi 250 pikseliä eli noin viisi senttiä.
padding: 2px; // pistää kahden pikselin täytteen reunuksen ja taustavärin väliin.
}
Laatikko sai pientä kasvonkohotusta, mutta inhat pallukat ovat edelleen näkyvissä... Seuraavaksi vuorossa kolmannen tason otsikon tyylittely:
- Koodi: Valitse kaikki
#navikaatio h3
{
margin: 0; // nollaa otsikon "näkymättömän reunuksen" eli etäisyyden muista elementeistä.
padding-left: 15px; // sisentää tekstiä viidentoista pikselin verran.
border-bottom: 1px solid #2b6b83; // asettaa alareunukseen tummansinisen, yhden pikselin paksuisen reunan.
background: #428a9e none; // asettaa vähän vaaleamman sinisen taustavärin otsikolle. HUOM: none tarpeellinen siksi, että jotkut selaimet pistävät oman taustakuvansa joidenkin elementtien kohdalle tyylien ollessa poissa käytöstä.
color: #fff; // asettaa otsikolle valkoisen värin paremman luettavuuden takaamiseksi.
font: 14px/2em "Lucida Grande", verdana, arial, serif; // asettaa otsikolle fontiksi 14 pikselin korkuisen fontin, ja käy Lucida Grande, verdana ja arial -nimiset fontit läpi. Jos mitään em. fonteista ei järjestelmässä ole, turvautuu mihin tahansa fonttiin serif-fonttiperheestä. Asettaa myös tekstin pystysuunnassa keskelle.
}
Otsikon ollessa kunnossa seuraavaksi tyylittelemme järjestämätöntä listaa:
- Koodi: Valitse kaikki
#navikaatio ul
{
list-style: none; // poistaa ärsyttävän nappulan jokaisen LI-elementin edestä.
margin: 0;
padding: 0; // Edelliset lauseet nollaavat tyhjän tilan ja täytteen elementistämme.
}
#navikaatio ul li
{
border-top: 1px solid #709cb5; // asettaa vaaleansinisen reunuksen jokaisen listan jäsenen yläpuolelle.
background: #4e8199 none; // asettaa tumansinisen taustan elementillemme.
}
#navikaatio ul li a
{
display: block; // asettaa linkin lohkoelementiksi joten voimme kontrolloida sen leveyttä.
padding-left: 20px; // sisentää linkin tekstiä hieman.
font: 10px/2.5em verdana, arial, tahoma, serif; // tämänkin selitin ylempänä...
text-decoration: none; // poistaa linkistä alleviivauksen, jota emme tässä tapauksessa tarvitse.
color: #fff; // asettaa linkin väriksi valkoisen.
}
#navikaatio ul li a:hover
{
color: #9fffa5; // jos ja kun hiiri viedään linkin yläpuolelle, linkin väri muuttuu vaalean vihreäksi.
}
Valmista tuli! Ja koodi kokonaisuudessaan niille, jotka laiskuudessaan eivät itse jaksa kirjoittaa:
- Koodi: Valitse kaikki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi-FI" lang="fi-FI">
<head>
<title>Yksinkertainen valikko</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* <![CDATA[ */
#navikaatio
{
border: 1px solid #eee;
width: 250px;
padding: 2px;
}
#navikaatio h3
{
margin: 0;
padding-left: 15px;
border-bottom: 1px solid #2b6b83;
background: #428a9e none;
color: #fff;
font: 14px/2em "Lucida Grande", verdana, arial, serif;
}
#navikaatio ul
{
list-style: none;
margin: 0;
padding: 0;
}
#navikaatio ul li
{
border-top: 1px solid #709cb5;
background: #4e8199 none;
}
#navikaatio ul li a
{
display: block;
padding-left: 250px;
font: 10px/2.5em verdana, arial, tahoma, serif;
text-decoration: none;
color: #fff;
}
#navikaatio ul li a:hover { color: #9fffa5; }
/* ]]> */
</style>
</head>
<body>
<div id="navikaatio">
<h3>Valikko</h3>
<ul>
<li><a href="#linkki-1">Linkki 1</a></li>
<li><a href="#linkki-2">Linkki 2</a></li>
<li><a href="#linkki-3">Linkki 3</a></li>
</ul>
</div>
</body>
</html>
oppaan tuloksen voit katsoa tästä.
Ja extraa nille, jotka haluavat, että valikon kaikki elementit säätävät leveytensä selaimen fonttien koon muutettaessa (FireFoxissa Ctrl + + ja Ctrl + -)
- Koodi: Valitse kaikki
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi-FI" lang="fi-FI">
<head>
<title>Yksinkertainen valikko</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* <![CDATA[ */
#navikaatio
{
border: 0.05em solid #eee;
width: 15em;
padding: 0.2em;
}
#navikaatio h3
{
margin: 0;
padding-left: 1em;
border-bottom: 0.05em solid #2b6b83;
background: #428a9e none;
color: #fff;
font: 14px/2em "Lucida Grande", verdana, arial, serif;
}
#navikaatio ul
{
list-style: none;
margin: 0;
padding: 0;
}
#navikaatio ul li
{
border-top: 0.05em solid #709cb5;
background: #4e8199 none;
}
#navikaatio ul li a
{
display: block;
padding-left: 2em;
font: 10px/2.5em verdana, arial, tahoma, serif;
text-decoration: none;
color: #fff;
}
#navikaatio ul li a:hover { color: #9fffa5; }
/* ]]> */
</style>
</head>
<body>
<div id="navikaatio">
<h3>Valikko</h3>
<ul>
<li><a href="#linkki-1">Linkki 1</a></li>
<li><a href="#linkki-2">Linkki 2</a></li>
<li><a href="#linkki-3">Linkki 3</a></li>
</ul>
</div>
</body>
</html>
Ja tästäkin esimerkki sivulla taikasilma.com.
EDIT: Tämä ei toimi kunnolla IE:llä, joten jätän sen SINUN itsesi ratkaisuksi.
