/* Allgemein */
body {
background-image: url(http://i919.photobucket.com/albums/ad40/oida_schwede/possible2-1.jpg?t=1283111009); /* Wenn vorhanden, Klammer mit Bildadresse füllen */
background-color: #FAEBD7; /* Hintergrundfarbe mithilfe eines Hex-Codes*/
font-family: sans-serif; /* Schriftart */
font-size: 0.8em; /* Schriftgröße */
text-align: center; /* zentriert das Design im IE */
}
a {
color: #8B008B /* Farbe der Links */
}
/* Container */
#design1 {
width: 900px; /* Breite des Designs */
margin: 0 auto; /* zentriert das Design */
text-align: left; /* positioniert den Text links */
background-color: #FFF0F5; /* Hintergrundfarbe des Containers */
border: 1px solid #FFF0F5; /* Rand um das Design */
}
#unten {
clear: both; /* sorgt dafür, das Hintergrundfarbe über gesamten Container läuft */
}
/* Header */
#header_container {
height: 199px; /* Höhe des Headers */
background-image: url(http://i919.photobucket.com/albums/ad40/oida_schwede/header.png?t=12831115705);
background-color: #transparent; /* Hintergrundfarbe des Headers */
border-bottom: 0px solid #FFF0F5; /* Rand am unteren Ende des Headers */
}
#pre_header, #post_header {
display: none; /* entfernt nicht genutzte Klassen */
}
#header {
margin: 0px; /* entfernt den weißen Rand oben */
padding-left: 400px; /* Abstand vom linken Rand */
padding-top: 50px; /* Abstand vom oberen Rand */
color: #000; /* Schriftfarbe */
font-family: serif; /* Schriftart */
}
/* Navigation */
#nav_heading {
display: none; /* nicht genutzte Klasse wird entfernt */
}
#nav {
padding: 0; /* keinen Innenabstand der Liste (links und rechts) */
margin: 0; /* keinen Außenabstand der Liste (oben und untent) */
float: left; /* Richtet die Navigation links aus und sorgt dafür, dass der Content rechts daneben ist */
width: 150px; /* Definiert die Breite der Navigation */
}
#nav li {
list-style-type: none; /* löscht den Listenpunkt */
padding: 2px; /* Innenabstand eines einzelnen Punktes */
padding-left: 15px; /* Innenabstand eines einzelnen Punktes nach links */
padding-right: 15px; /* Innenabstand eines einzelnen Punktes nach rechts */
font-size: 1.0em; /* Schriftgröße */
display: block; /* vergrößert die Navigation auf volle nav_container Breite */
border-bottom: 1px solid #BC8762; /* unterer Rand */
}
#nav li:hover {
background-color: #ffd194; /* Hintergrundfarbe beim Hovereffekt */
}
#nav a {
text-decoration: none; /* macht Verlinkungen in der Navigation ohne Unterstrich */
}
#nav a:hover {
color: #000; /* ändert die Schriftfarbe beim Hovereffekt */
}
/* Content Container */
#content_container {
width: 749px; /* Definiert die Breite des gesamten Contentbereiches inklusive der Sidebar (Breite des Containers - der Navigation - Rahmen des Contents) */
float: left; /* Sorgt dafür, dass der gesamte Content (inkl. Header) auch wirklich rechts steht */
border-left: 1px solid #BC8762; /* kleine Abtrennung zwischen Content und Navigation, Benutzung optional */
}
/* Content */
#content {
width: 518px; /* Breite des Inhaltbereichs */
padding: 15px; /* Innenabstände des Inhaltsbereiches */
float: left; /* wird für die Anordnung benötigt (Sidebar rechts neben dem Content */
border-right: 1px solid #BC8762; /* Kleine Trennung zwischen Sidebar und Content. Benutzung optional */
}
/* Sidebar */
#sidebar_container {
float: left; /* wird für die Anordnung benötigt (Sidebar rechts neben dem Content */
width: 170px; /* Breite der Sidebar */
padding: 15px; /* Innenabstand der Sidebar */
}
div.menu {
position: absolute;
left: 50%;
top: 190px;
margin-left: +300px;
width: 900px; }
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }
/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }
/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }
/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 295px;
left: 50px;
width:850px; }
/* Breite der Menüpunkte einstellen */
.menu li {
width: 200px;
float: left; }
/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #CDC1C5;
background-color: #CDC1C5;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #FFF5EE ; }
/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #F5DEB3
background-image: url(URL);
color: # #FFF5EE; }
#smenu1, #smenu2, #smenu3, {
font-size: 14px;
display: none;
width: 160px;
float: left; }
#smenu1 a, #smenu2 a, #smenu3 a, {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF; }
//-->
</style>
<!-- Anfang des Scriptes -->
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->
<div class="menu">
<li class="top_menu"><a href="http://cindysimsdownloads.de.tl/">Home</a></li>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Downloads</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://cindysimsdownloads.de.tl/Erwachsene-weiblich.htm">Erwachsene weiblich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Teenager-weiblich.htm">Teenager weiblich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Kleinkind-weiblich.htm2">Kleinkind weiblich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Erwachsene-m.ae.nnlich.htm">Erwachsene männlich</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Kleinkind-m.ae.nnlich.htm">Kleinkind männlich</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Über diese Seite</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://cindysimsdownloads.de.tl/G.ae.stebuch.htm">Gästebuch</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Kontakt.htm2">Kontakt</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Anleitung-.htm">Downloadanleitung</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Links.htm">Links</a></li>
<li><a href="http://cindysimsdownloads.de.tl/FAQ-und-TOU.htm">FAQ & TOU</a></li>
<li><a href="http://cindysimsdownloads.de.tl/Diese-Seite-unterst.ue.tzen.htm">
Seite unterstützen</li>
</ul>
</div>
) einfügen.