Jari Sarjan materiaalia verkossa

Valikko eli menu

Lopuksi laitetaan valikko paikoilleen css:n avulla, joilloin siitä saadaan tyylikäs ja nopea. Siis html:ään siihen vasemalle tarvitaan:

<div id="valikko"><ul id="menu">
<li><a href="index.htm">Etusivu</a></li>
<li><a href="tavoitteet/index.htm">Tavoitteet</a></li>
<li><a href="miehet/index.htm">Kausiohjelma</a></li>
<li><a href="miehet/index.htm">Pelisäännöt</a></li>
<li><a href="miehet/index.htm">Ohjaajat</a></li>
<li><a href="miehet/index.htm">Ryhmäläiset</a></li>
<li><a href="miehet/index.htm">Tukijat</a></li>
<li><a href="miehet/index.htm">Kuvia</a></li>
<li><a href="miehet/index.htm">Ylläpito</a></li>
</ul></div>

Ja tältähän se näyttää

Siis viilausta tarvitaan eli alkamaan solun yläreunasta. Kas näin siis viilataan.

<TD VALIGN="top" class="tausta1" 
WIDTH=134 HEIGHT=288>

Lopuksi css näin ja homma on valmis!

#valikko{float: left; margin: 0 0 0 0; padding: 0;}

#menu{

	width: 120px;

	margin: 5px;

	padding: 0;

	list-style-type: none;

	font: 70% Verdana, Helvetica, sans-serif;

	letter-spacing: 0.1em;

     font-weight: bold

#menu li{margin-bottom: 0.25em;}

#menu a{

	display: block;

	width: auto;

	height:100%;

	padding: 0.25em;

	text-decoration: none;

	border: 1px solid #06AC54;

#menu a:link{color: #333333;}

#menu a:visited{color: #333333;}

#menu a:hover{background: #06CEFF; color: #06AC54;}

#menu a#current{background: #F9D447; color: #06AC54;}

Ai niin se tyttö. Siis tyttö irti kuvasta ja css:llä näin

teksti     { padding: 0.2em 0.2em 0.3em 0.5em;
 font-family:arial, sans-serif;
 font-size:14px;
background: url(tytto.jpg) no-repeat fixed 100% 100%;
}