Archiv
glitzi schrieb am 30.October.2008, 22:26:52 in der Kategorie web.design
<!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\">
<head>
<title>Liana Del Degan - Startseite</title>
<link rel=\"stylesheet\" href=\"liana.css\" type=\"text/css\" />
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />
</head>
<body>
<ul id=\"navigation\">
<li><span>Startseite</span></li>
<li><a href=\"#\">Tanzpädagogik</a></li>
<li><a href=\"#\">Tanztherapie</a></li>
<li><a href=\"#\">Pilates</a></li>
<li><a href=\"#\">Mein Angebot</a></li>
<li><a href=\"#\">Vita</a></li>
<li><a href=\"#\">Impressum</a></li>
<li id=\"lang\"><a href=\"#\"><img src=\"./flagge1.gif\" alt=\"Italiano\" /></a></li>
</ul>
<div id=\"content\">
<img src=\"./67411a.jpg\" alt=\"Startbild\" />
</div>
</body>
</html>
CSS-Code:
* {
font-size:1em;
color:black;
margin:0;
padding:0;
font-weight:normal;
}
body {
background-color:black;
color:white;
padding:20px;
}
#navigation {
width:9em;
border:black solid 1px;
float:left;
margin-right:10px;
}
#navigation li {
display:block;
background-color:#EF8410;
text-align:center;
margin:5px 0;
height:1.5em;
}
#navigation li a {
display:block;
text-decoration:none;
width:100%;
height:100%;
}
#navigation li a:hover {
font-weight:bold;
}
#navigation li a:active {
font-weight:bold;
}
#navigation li span {
display:block;
cursor:pointer;
width:100%;
height:100%;
}
#navigation #lang {
background-color:black;
margin-top:20px;
}
Ich persönlich resette immer die wichtigsten Einstellungen im CSS auf Basiswerte (Schriftgröße, Abstände usw.). Sonst fragt man sich ständig wo jetzt dieser seltsame Abstand herkommt oder warum jene Schrift so groß ist.
Im HTML habe ich als Menüpunkt noch die aktuelle Seite dazugepackt. Allerdings nich als Link, sondern als normalen Text. Ein Link auf die momentane Seite ist ziemlich unnötig, jeder Browser hat einen Aktualisierungs-Knopf.
Spiel einfach mal mit den einzelnen Werten rum, schau was passiert und schlag die Eigenschaften bei SelfHTML nach wenn du sie nicht kennst. Damit solltest du schon ziemlich weit kommen.
mfg glitzi
PS: Die Bilder sollten nicht im Code vergrößert oder verkleinert werden, die Datei muss trotzdem in voller Größe zum Client übertragen werden. Speziell bei der Flagge einfach das Bild in einem Grafikprogramm auf die gewünschte größe skalieren und neu abspeichern.
Archiv