Nyt, kun meillä on sisältöä, haluamme toki muotoilla sitä. Tämä tutoriaali on nyt askel askeleelta osaltaan ohi. Mikäli jokin asia on jäänyt epäselväksi, pyydän antamaan palautetta, jotta voin laajentaa opastusta. Oppaasta löytyy vielä lista XHTML -tageja ja hyödyllisiä linkkejä. Näistä uskoisi olevan apua. Kaikki internetsivujen tekemiseen liittyvät kysymykset ovat erittäin tervetulleita. Niiden esittäminen onnistuu helpoiten vieraskirjassa tai sähköpostitse. Tämän tutoriaalin tuottama ulkoasu ei ole kauneimmasta päästä. Toivottavasti opit riittävästi, jotta voit luoda oman div-pohjaisen ulkoasun.
Tässä nyt vielä lopullinen tyylitiedosto:
body{
color:black;
background-color:rgb(238,238,238);
padding:0;
margin:0;
font-size:medium;
}
div.otsikko{
background-color:rgb(204,204,204);
position:fixed;
top:0;
right:0;
left:0;
right:0;
height:10ex;
padding-right:0;
padding-top:0;
padding-bottom:0;
padding-left:22ex;
width:100%;
right:167px;
margin:0;
z-index:2;
overflow:hidden;
border:0.5ex double black;
font-family:sans-serif;
}
div.valikko{
background-color:rgb(204,204,204);
position:fixed;
top:10.5ex;
left:0;
width:20ex;
padding:0.5ex;
margin:0;
height:41ex;
z-index:3;
overflow:auto;
border-right:0.5ex double black;
border-left:0.5ex double black;
border-bottom:0.5ex double black;
font-family:sans-serif;
}
div.sisalto{
background-color:rgb(238,238,238);
position:absolute;
top:11ex;
left:28.5ex;
height:auto;
width:auto;
right:128px;
padding:1ex;
margin:0;
height:auto;
z-index:1;
overflow:auto;
font-family:serif;
}
div.oikea{
background-color:rgb(238,238,238);
position:absolute;
right:0;
top:12ex;
padding:1px;
width:124px;
height:250px;
margin:0;
z-index:0;
text-align:right;
vertical-align:top;
}
image {border-width:0;}
p.code {
font-family:monospace;
background-color:white;
border:1px dashed black;
}
code{
font-family:monospace;
background-color:transparent;
border:0;
}
p.valikko {
padding-top:0;
padding-bottom:1px;
padding-left:1ex;
padding-right:1px;
margin:0;
}
a:link.valikko
{
display:block;
width:18ex !important;
padding:0.1ex;
margin:0;
border-right:2px dotted black;
border-left:2px dotted black;
}
a:active.valikko
{
display:block;
width:18ex !important;
padding:0.1ex;
margin:0;
border-right:2px dotted black;
border-left:2px dotted black;
}
a:visited.valikko {
display:block;
width:18ex !important;
padding:0.1ex;
margin:0;
border-right:2px dotted black;
border-left:2px dotted black;
}
a:hover.valikko {
display:block;
width:18ex !important;
padding:0.1ex;
margin:0;
border-right:2px solid black;
border-left:2px solid black;
}
li {
display:list-item;
list-style-type:square;
list-style-position:outside;
}