/*Tweaks und generelle Einstellungen*/ /* Zentrieren und Hintergrundfarbe einstellen */ /* im Body-tag sämtliche Anweisungen einstellen, die generell gültig sind, so z.b. Standardschrift + Farbe, Hintergrundfarbe des gesamten Dokuments usw.*/ body { margin-left: 0px; margin-top: 2px; /*Die Seite wird zwar horizontal zentriert jedoch nicht vertikal, deshalb hier einen Rand einstellen, damit das Ganze nicht so oben an der Kante klebt. */ margin-right: 0px; margin-bottom: 0px; background-color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#000000; } /*Dieser Trick gibt dem Div Tag die Anweisung sich seinen Rand rauszusuchen. Ergebnis ist, dass sich das Ganze auf die Mitte einstellt. Sowas nennt man auch Zentrieren ;-) */ div { margin-left:auto; margin-right:auto; } img { border:none } /* hier kannst Du das Verhalten der Links einstellen, welche Farbe beim Hovern, untersreichen usw. */ A:link { color: #000000; text-decoration: none; font-weight: bold; } A:visited { color: #000000; text-decoration: none; font-weight: bold; } A:hover { color: #41b54a; /*wenn der Mauszeiger drüber fährt wird's grau. Gewünschte Farbe einstellen */ text-decoration: none; font-weight: bold; } /* Das Clear tag ist wichtig, damit das Floaten beendet wird und eine neue Zeile angefangen wird. Funktionsweise: Headerzeugs clear:both; Contentzeugs clear:both; Footerzeugs Leider macht der IE7 hier Probleme, deshalb muss man das Ganze noch in einem extrastyle anpassen. */ .clear { clear:both; } /*layoutspezifisch*/ /*Für unsere blinden Leser und Google */ #invisible { display:none; /* bedeutet soll nicht angezeigt werden.*/ } #header { width:900px; height:185px; background-image: url(../images/back_top.png); background-repeat:none; /* border:#FF0000 thin solid;*/ } #headerline { width: 900px; height: 28px; background:none; background-position:left; background-image:url(../images/header_line.png); background-repeat:repeat-y; } /* Stu Nichols' http://www.cssplay.co.uk/menus/flickerfree_mk3.html Wie funktioniert das? Grafik erstellen mit beiden Zuständen untereinander. In der Höhe ist die Grafik also doppelt so hoch wie der Link einmal sein wird. Die Grafik wird als Hintergrundbild eingebunden und verändert beim Hovern eifach die Position. Der Rollover Effekt wird erreicht. Elemente, welche in CSS nacheinander geschrieben werden, vererben sich. Also #startseite a: das Element "startseite" vererbt seine Eigenschaften an "a". Also werden nur LInks innerhalb von Startseite mit diesen EIgenschaften versehen. Siehe auch "Kind" oder Nachfahren selektor" */ #startseite { width:175px; height:28px; float:left; padding-left:51px; font-size:23px; color:#000000; display:block; /*Gibt dem Element das Verhalten einer Box.*/ } #startseite ul {margin:0; padding:0; list-style-type:none;} /*Die Bullets von der Liste entfernen und die Innenabsände löschen.*/ #startseite li {float:left; margin-right:1px; display:block; width:175px; height:28px;} /*Dem LIstenelement ebenso das Verhalten einer Box zuweisen und Höhe und Breite des einzelnen Links vergeben. */ #startseite li.home {background:transparent url(../images/home.gif);} /*Die Grafik wird zugewiesen*/ #startseite a {display:block; width:175px; padding-top:28px; height:0; color:#000; text-decoration:none; overflow:hidden;} * html #startseite a:link, * html #startseite a:visited {height:28px; he\ight:0;} /*Ein Internetexplorer hack, damit die Höhen korrekt dargestellt werden und nix flackert. Guilliotinebug beim IE6, Methode: Star-Hack */ #startseite a#home {background:transparent url(../images/home.gif) -175px 0px no-repeat;} /*Damit die Schrift in den Links unsichtbar wird, lässt man sie einfcah rausrutschen. */ #startseite a#home:hover {background-position:0px -28px; z-index:50;} /*Hier passiert endich die Magie. Das IMage wird einfach hochgerutscht.*/ * html #startseite a:hover {height:28px; he\ight:0;} /*Auch hier Guilliotine-BUg, siehe auch Star-Hack */ #suchfeld{ width:280px; height:28px; float:left; padding-left:350px; font-size:23px; color:#000000; } #middle { width:900px; min-height:558px; background-image:url(../images/back_content.png); background-repeat:repeat-y; /* border:#FF0000 thin solid; */ /*Eine kleine Border um das ELement ziehen, damit man sieht was passiert. Wenn mans nicht mehr braucht, dann einfach auskommentieren.*/ } #kiwi { width:865px; min-height:558px; float:right; margin-right:22px; background:none; background-image:url(../images/kiwi.png); background-repeat:no-repeat; } /* hier nochmal Stu Nichols' http://www.cssplay.co.uk/menus/flickerfree_mk3.html */ #menu {display:block; width:175px; height:191px; float:left; padding-left:38px; /*Breite der Internetseite von 900px 51px des Links zur Startseite ergibt das heir ein Padding von 38px, weil: #kiwi nur 865px breit ist. Dazu kommt noch margin-rihgt von 22px, bleiben übrig 13px. Die vom pAdding-left:51px abziehen. */ padding-top:44px; font-size:23px; color:#000000; } #menu ul {margin:0; padding:0; list-style-type:none;} #menu li {float:left; margin-right:1px; display:block; width:175px; height:46px;} #menu li.info {background:transparent url(../images/info.gif);} #menu li.service {background:transparent url(../images/service.gif);} #menu li.interactive {background:transparent url(../images/interaktive.gif);} #menu li.kontakt {background:transparent url(../images/kontakt.gif);} #menu a {display:block; width:175px; padding-top:46px; height:0px; color:#000; text-decoration:none; overflow:hidden;} * html #menu a:link, * html #menu a:visited {height:46px; he\ight:0;} #menu a#info {background:transparent url(../images/info.gif) 175px 0px no-repeat;} #menu a#service {background:transparent url(../images/service.gif) 175px 0px no-repeat;} #menu a#interactive {background:transparent url(../images/interaktive.gif) 175px 0px no-repeat;} #menu a#kontakt {background:transparent url(../images/kontakt.gif) 175px 0px no-repeat;} #menu a#info:hover {background-position:0px -46px; z-index:50;} #menu a#service:hover {background-position:0px -46px; z-index:50;} #menu a#interactive:hover {background-position:0px -46px; z-index:50;} #menu a#kontakt:hover {background-position:0px -46px; z-index:50;} #content { /*Die Textbox */ width:570px; padding-top:20px; padding-right:50px; padding-bottom:20px; float:right; } #footer { width:900px; height:63px; background-image:url(../images/back_bottom.png); background-repeat:none; /* border:#FF0000 thin solid;*/ } /*wieder Stu Nichols*/ #footerContent { width:500px; padding-right:50px; float:right; display:block; height:28px; } #footerContent ul {margin:0; padding:0; list-style-type:none;} #footerContent li {float:left; margin-right:1px; display:block; width:115px; height:28px;} #footerContent li.impressum {background:transparent url(../images/impressum.gif);} #footerContent li.sitemap {background:transparent url(../images/sitemap.gif);} #footerContent li.agb {background:transparent url(../images/agb.gif);} #footerContent a {display:block; width:125px; padding-top:28px; height:0; color:#000; text-decoration:none; overflow:hidden;} * html #footerContent a:link, * html #footerContent a:visited {height:28px; he\ight:0;} #footerContent a#impressum {background:transparent url(../images/impressum.gif) -125px 0px no-repeat;} #footerContent a#sitemap {background:transparent url(../images/sitemap.gif) -125px 0px no-repeat;} #footerContent a#agb {background:transparent url(../images/agb.gif) -125px 0px no-repeat;} #footerContent a#impressum:hover {background-position:0px -28px; z-index:50;} #footerContent a#sitemap:hover {background-position:0px -28px; z-index:50;} #footerContent a#agb:hover {background-position:0px -28px; z-index:50;} * html #footerContent a:hover {height:28px; he\ight:0;} .search { width:166px; font-family:Verdana, Arial, Helvetica, sans-serif; /*Schriftart im Eingabefeld*/ font-size:15px; /* regelt gelcihzeitig die Höhe des Eingabefeldes */ vertical-align:top; /*Obwohl hier top steht, sieht das Feld so aus, als ob es mittig wäre. */ border:#676D67 3px solid; /* Um Abstand zum Rand zu bekommen */ }