3. päivä

Juu, tämän oli tarkoitus tulla yhden tallin ulkoasuksi, mutta pistinkin sen tänne. Linkkien lisääminen on tässä vähän hankalempi operaatio, joten en kehoita. (linkkien lisäämisessä linkkikoodin kopioimisen lisäksi täytyisi hääräillä tuon CSS:n kanssa, joten uskon, että pärjäätte viidellä linkillä.

Tallenna tämä kuva samalla nimellä sivutilallesi:

Kopioi vielä tämä koodi sivuillesi:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>



<head>
  <title>Yläpalkin teksti tänne</title>
    <style type="text/css" media="screen">
  <!--
  td { color: #000000; font-size: 12px; letter-spacing: 1pt; font-family: arial, sans-serif;}
body { margin: 30px; background-color: #0F027D; color: #000000; letter-spacing: 1pt; font-size: 12px; font-family: arial, sans-serif;}
a:link, a:visited { font-family: arial, sans-serif; letter-spacing: 1pt; font-size: 12px; color: #0F027D; text-decoration: none;}
a:hover, a:active { font-family: arial, sans-serif; letter-spacing: 1pt; font-size: 12px; color: #000000; text-decoration: none;}

.otsikko { color: #CA71B1; text-align: center; font-size: 24px; font-family: verdana, sans-serif; letter-spacing: 2pt;}
.divi { width: 553px; padding: 0px; border: 0px; background-color: #FFFFFF; position:absolute; top: 0px; left: 150px;}
.solu { padding: 5px; }
 A.linkit, A:link.linkit, A:visited.linkit {position:absolute; top: 10px; left: 50px; display: block; width: 100px; padding: 5px; text-align: center; background-color: #CA71B1; border: 0px;}
 A:hover.linkit {background-color: #BD1A8C; text-decoration: none;}
 A.linkit2, A:link.linkit2, A:visited.linkit2 {position:absolute; top: 60px; left: 50px; display: block; width: 100px; padding: 5px; text-align: center; background-color: #CA71B1; border: 0px;}
 A:hover.linkit2 {background-color: #BD1A8C; text-decoration: none;}
 A.linkit3, A:link.linkit3, A:visited.linkit3 {position:absolute; top: 110px; left: 50px; display: block; width: 100px; padding: 5px; text-align: center; background-color: #CA71B1; border: 0px;}
 A:hover.linkit3 {background-color: #BD1A8C; text-decoration: none;}
  A.linkit4, A:link.linkit4, A:visited.linkit4 {position:absolute; top: 160px; left: 50px; display: block; width: 100px; padding: 5px; text-align: center; background-color: #CA71B1; border: 0px;}
 A:hover.linkit4 {background-color: #BD1A8C; text-decoration: none;}
  A.linkit5, A:link.linkit5, A:visited.linkit4 {position:absolute; top: 210px; left: 50px; display: block; width: 100px; padding: 5px; text-align: center; background-color: #CA71B1; border: 0px;}
 A:hover.linkit5 {background-color: #BD1A8C; text-decoration: none;}
--></style>
</head>
<body>

<a href="linkki" class="linkit">linkki</a>
<a href="linkki" class="linkit2">linkki</a>
<a href="linkki" class="linkit3">linkki</a>
<a href="linkki" class="linkit4">linkki</a>
<a href="linkki" class="linkit5">linkki</a>
<table class="divi" cellpadding="0" cellspacing="0"><tr>
<td><img src="pink.jpg" alt="" /></td></tr><tr><td class="solu">
<p class="otsikko">Otsikko tähän</p>

<p>TEKSTIT TÄHÄN!</p>
<p>TEKSTIT TÄHÄN!</p>
<p>TEKSTIT TÄHÄN!</p>
<p>TEKSTIT TÄHÄN!</p>

<p style="text-align: center">
leiskan © <a href="http://olionet.org/kuvasivut">Zephyr Layouts</a></p>
</td></tr>
</table>

</body>
</html>