SIVUJESI OTSIKKO

No niin tehdäänpäs lähtökohdat nyt heti ihan selviksi. Kyllä, fontti on tajuttoman pientä ja kyllä, oli pakko laittaa noin paljon härpäkettä layoutin yläosaan. Kieltämättä tekijänoikeusmerkinnät näyttävät aika härskeiltä (voiko teksti näyttää härskiltä?) tuossa, mutta ne eivät sopineet muuallekaan. Otsikon fontti on Angelina ja anteeksi vielä kerran mahdollisesta päänsärystä! Tilanne helpottuu Buranalla, silmälaseilla tai selaimen Näytä -valikon vaihtoehdolla "Tekstin koko". Älä poista tekijänoikeusmerkintöjä ulkoasusta! Älä myöskään muuttele ulkoasun koodia, ellet ole varma siitä, mitä olet tekemässä. Ulkoasu toimii moitteettomasti sekä Internet Explorerilla että Mozilla Firefoxilla.

KUVAT & KOODIT

Tallenna nämä kaksi kuvaa samannimisinä palvelimellesi..

.. ja lisää tämä koodi jokaiselle tekemällesi sivulle.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="fi">
<HEAD>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SIVUJESI OTSIKKO</title>
<meta http-equiv="imagetoolbar" content="no">

A:link
{color:#FFFFFF;
font-size:10px;
text-decoration:none;
cursor: default;
}

A:visited
{color:#D84F83;
font-size:10px;
text-decoration:none;
cursor: default;
}

A:active
{color:#D84F83;
font-size:10px;
text-decoration:none;
cursor: default;
}

A:hover
{color:#D84F83;
font-size:11px;
text-decoration:none;
cursor: none;

}

A:link.navigaatio {
font-family: arial;
font-size : 10px;
letter-spacing: 1px;
color: #FFFFFF;
text-decoration: none;
}
 
A:visited.navigaatio {
font-family: arial;
color: #FFFFFF;
text-decoration: none;
 
}

A:hover.navigaatio {
font-family: arial;
font-size : 10px;
letter-spacing: 1px;
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #DB5185;
 
}

#teksti{
position: absolute;
top:329px;
left:387px;
width:338px;
text-align:justify;
letter-spacing: 1px;
}

#otsikkokuva{
position:absolute;
top: 0px;
left:344px;
}

.otsikko{
text-align: center;
}

#linkit{
top:297px;
left:400px;
position:absolute;
width:335px;
text-align: left;
}

.esim{
border: 1px solid #DB6990;
}

table td{
font-size:11px;
}

-->
</style>
</head>

<body>

<div id="linkit">
<a href="linkki.htm" class="navigaatio">LINKKI</a>  
<a href="linkki.htm" class="navigaatio">LINKKI</a>

<a href="linkki.htm" class="navigaatio">LINKKI</a>  
<a href="linkki.htm" class="navigaatio">LINKKI</a>

<a href="linkki.htm" class="navigaatio">LINKKI</a>  
<a href="linkki.htm" class="navigaatio">LINKKI</a>  
<a href="linkki.htm" class="navigaatio">LINKKI</a>  
<br><br>
</div>

<div id="teksti">
kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän kirjoita tekstisi tähän

</div>

EXTRAT

Tallenna ekstramateriaali omalle sivutilallesi.

Ulkoasusta otan enemmän kuin mielelläni palautetta vastaan vieraskirjassa :)