@ greyblue
Hier ein Vorschlag (valider Quelltext) in XHTML strict
======================================================
index.html
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" lang="de" xml:lang="de">
<head>
<title>D ~ U Event</title>
<meta name="description" content="Hier einen Text, der den Inhalt beschreibt" />
<meta name="author" content="Name des Autors/derAutorin" />
<meta name="author-mail" content="mailto:kontakt@domain.tld" />
<meta name="copyright" content="Wer hat die (Urheber)Rechte?" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" href="css/event.css" type="text/css" media="screen" />
</head>
<body>
<!--Hier folgt die Kopfzeile-->
<h1 id="top">D ~ U Event</h1>
<h2 id="kreativ">Kreativität & Emotionen ohne Grenzen</h2>
<!--Hier endet die Kopfzeile-->
<!--Hier folgt der Inhalt-->
<div id="content">
<p class="center">Keiner kommt daran vorbei, einmal die Gastgeberrolle zu übernehmen - privat und beruflich.<br />
Sie sagen mir Ihre Wünsche und Träume, ich plane, organisiere und führe Ihren <span class="red">erlebnisreichen und unvergesslichen</span> Event durch.<br />
So können Sie <span class="red">"Ihren Tag"</span> ganz entspannt genießen und erleben.</p>
<p class="emotion">D ~ U Events <span class="red">sind EMOTIONEN</span></p>
</div>
<!--Hier endet der Inhalt-->
<!--Hier folgt die Navigation-->
<div id="navi">
<ul>
<li><a href="agentur/" title="Über die Agentur">Agentur</a></li>
<li><a href="leistungen/" title="Meine Leistungen">Leistungen</a></li>
<li><a href="impressum/" title="Impressum">Impressum</a></li>
<li><a href="kontakt/" title="Kontakt mit mir">Kontakt</a></li>
</ul>
</div>
<!--Hier endet die Navigation-->
</body>
</html>
Und hier die dazugehörige .css Datei (Farben und Abstände bitte nach Geschmack anpassen)
=====================================================
event.css
body {
color: #630;
background-color: #963;
margin: 0px;
padding: 0px;
font-family: Arial,Verdana,sans-serif;
font-size: 101%;
}
#navi {
position: absolute;
width: 150px;
height: auto;
top: 200px;
right: auto;
bottom: auto;
left: 30px;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
color: #fff;
background-color: #963;
border-top: thin solid #fc0;
border-bottom: thin solid #630;
border-right: thin solid #630;
border-left: thin solid #fc0;
}
#navi ul li {
list-style-type: none;
padding-right: 30px;
padding-bottom: 5px;
margin-left: -15px;
}
/* Links der Navi */
div a:link { color: #fff; background-color: #c93; line-height: 1.5em; display: block; border-top: thin solid #fc0; border-bottom: thin solid #630; border-right: thin solid #630; border-left: thin solid #fc0; padding-left: 6px; text-decoration:none; padding-top: 3px; padding-bottom: 3px;} /* noch nicht besuchte Verweise */
div a:visited { color: #fff; background-color: #c93; line-height: 1.5em; display: block; border-top: thin solid #fc0; border-bottom: thin solid #630; border-right: thin solid #630; border-left: thin solid #fc0; padding-left: 6px; text-decoration:none; padding-top: 3px; padding-bottom: 3px;} /* bereits besuchte Verweise */
div a:hover { color: #fff; background-color: #960; line-height: 1.5em; display: block; border-top: thin solid #630; border-bottom: thin solid #fc0; border-right: thin solid #fc0; border-left: thin solid #630; padding-left: 7px; text-decoration:none; padding-top: 3px; padding-bottom: 3px;} /* Verhalten bei "MouseOver" */
div a:active{ color: #FFFFFF; background-color: #fc3; line-height: 1.5em; display: block; border-top: thin solid #000; border-bottom: thin solid #800000; border-right: thin solid #800000; border-left: thin solid #000; padding-left: 7px; text-decoration:none; padding-top: 3px; padding-bottom: 3px;} /* Angeklickte Verweise */
#top {
margin-left: 260px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 2.8em;
}
#content {
margin-left: 260px;
margin-top: 25px;
margin-right: 30px;
color: #fff;
padding-bottom: 80px;
background-color: #c93;
border-top: thin solid #630;
border-left: thin solid #630;
border-right: thin solid #fc0;
border-bottom: thin solid #fc0;
}
#kreativ {
color: #800000;
text-align: right;
margin-right: 30px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 1.3em;
}
p.center {
padding: 8px;
font-size: 1.1em;
text-align: center;
line-height: 1.5em;
}
p.emotion {
font-size: 1.3em;
text-align: center;
}
.red {
color: #800000;
}
Gruß, Jaja.