/************************************************************ Optiker-Durchblick CSS-Definitionen Kopie ----------------------------- ************************************************************/ /************************************************************ Allgemeine Definition für den Body: Schriftart des Textes - Standardschriftart(en) Schriftgröße des Textes - relativ zur Browsereinstellung Abstand zwischen den Buchstaben - macht den Text etwas besser lesbar Hintergrundfarbe - Grau als Kontrast bzw. Abgrenzung Schriftfarbe des Textes - Schwarz Rahmen - explizit auf 0 gesetzt, um eine Default-Anzeige der Browser zu verhindern Außenabstand - explizit auf 0 gesetzt, um Default-Abstände der Browser zu verhindern Innenabstand - explizit auf 0 gesetzt, um Default-Abstände der Browser zu verhindern ************************************************************/ body { font-family: Arial, Helvetica, sans-serif; font-size: small; letter-spacing: 1px; background-color: #e3e3e3; color: #000; border: 0px; margin: 0px; padding: 0px; } /************************************************************ Definition für den alles umschließenden Container: Gesamtbreite - des Containers Hintergrundfarbe - Weiß zur guten Lesbarkeit des Textes Außenabstand - nach oben und unten, damit das Layout nicht am Browserfenster „klebt“, nach rechts und links wird er automatisch errechnet, damit das Layout zentriert wird Innenabstand - explizit auf 0 gesetzt, um Default-Abstände der Browser zu verhindern ************************************************************/ #gesamt { width: 811px; background-color: #fff; margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; padding: 0px; border: 0px; } /************************************************************ Definition für den Kopfbereich: Gesamtbreite - des Containers Hintergrundfarbe - passend zum später eingefügten Hintergrundbild, damit Kontrast zum Text auch bei nicht angezeigtem Bild bleibt Gesamthöhe - des Containers Innenabstand - links, um Text im Kopf nach rechts zu verschieben Außenabstand - explizit auf 0 gesetzt, um Default-Abstände der Browser zu verhindern Schriftausrichtung - links Zeilenhöhe - setzt den Text weiter nach unten Overflow:hidden - verhindert das vergrößern eines Containers: Ist ein Inhalt größer als die definierte Breite, wird der Rest, der die Grenzen des Elements überschreitet, abgeschnitten ************************************************************/ #kopf { background: #6bb6b6; background-image: url(../grafiken/kopf.png); background-repeat: no-repeat; height: 143px; padding-left: 30px; margin: 0px; text-align: left; line-height: 180px; overflow: hidden; } /************************************************************ Definition für einen links angeordneten Bereich innerhalb des Kopfbereichs: Elementfluss - Element wird aus dem normalen Elementfluss herausgenommen und links angeordnet ************************************************************/ #kopf-links { float: left; } /************************************************************ Definition für einen rechts angeordneten Bereich innerhalb des Kopfbereichs: Elementfluss - Element wird aus dem normalen Elementfluss herausgenommen und rechts angeordnet Gesamtbreite - des Containers Schriftgröße - relativ zur definierten Schriftgröße des Body Innenabstand - oben Zeilenhöhe - vergrößert den Abstand zwischen den Zeilen Zeichenabstand - explizit auf 0 gesetzt, da sonst der für body definierte Wert angewendet wird ************************************************************/ #kopf-rechts { float: right; width: 133px; font-size: 0.9em; padding-top: 25px; line-height: 1.6em; letter-spacing: 0em; } /************************************************************ Definition für eine Überschrift erster Ordnung innerhalb des Kopfbereichs: Schriftgröße - relativ größer zur definierten Schriftgröße des Body Schriftgewicht - fett Zeichenabstand - etwas größer als normal Außenabstand - oben und unten ************************************************************/ #kopf h1 { font-size: 170%; font-weight: bold; letter-spacing: 0.4em; margin-top: 0em; margin-bottom: 0.4em; } /************************************************************ Definition für den Navigationsbereich: Elementfluss - Element wird aus dem normalen Elementfluss herausgenommen und links angeordnet ************************************************************/ #navi { float: left; } /************************************************************ Definition für die Navigation, die als Liste definiert wird: Innenabstand der Liste - oben, rechts, unten links, rechts Außenabstand - oben, rechts und unten keiner; links ein negativer Abstand, der bewirkt, dass sich die Buttons nach links über den Container hinaus verschieben ************************************************************/ #navi ul { padding: 15px 5px 10px 0px; margin: 0px 0px 0px -11px; } /************************************************************ Definition für die Listenpunkte der Navigation, die als Liste definiert wird: Breite - der Listenpunkte Schriftart des Textes - Standardschriftart(en) Schriftgröße des Textes - relativ zur Angabe für body Schriftstil – normal, nicht kursiv Schriftgewicht - fett Rahmen - dünn, schwarz und durchgehend alle vier Seiten Außenabstand - unten Schriftfarbe des Textes - Dunkelgrau Textauszeichnung - keine, nicht unterstrichen o. ä. Hintergrundfarbe - Hellgrau Höhe - der Listenpunkte Darstellungstyp - der Listenpunkte, keine Darstellung ************************************************************/ #navi li { width: 160px; font-family: Arial, Helvetica, sans-serif; font-size: 1.6em; font-weight: bold; border: 1px #666 solid; margin-bottom: 8px; color: #333; text-decoration: none; background-color: #CCC; height: 50px; list-style-type: none; } /************************************************************ Definition für einen definierten Verweis/Link der Navigation: Schriftfarbe des Links - Dunkelgrau Textauszeichnung - keine, nicht unterstrichen ************************************************************/ #navi a:link { color: #333; text-decoration: none; } /************************************************************ Definition für einen besuchten Verweis/Link der Navigation: Schriftfarbe des Links - Dunkelgrau Textauszeichnung - keine, nicht unterstrichen ************************************************************/ #navi a:visited { color: #333; text-decoration: none; } /************************************************************ Definition für einen Verweis/Link der Navigation (wenn man mit der Tastatur diesen Link ansteuert, wenn man mit der Maus über diesen Link fährt, wenn der Link gedrückt/aktiviert wird): Schriftfarbe des Links - wie Farbe des Fußbereichs, türkis Textauszeichnung - keine, nicht unterstrichen ************************************************************/ #navi a:focus, #navi a:hover, #navi a:active { color: #099; text-decoration: none; } /************************************************************ Definition für einen Listenpunkt (wenn man mit der Maus über diesen Link fährt): Hintergrundfarbe - des Listenpunkts ändert sich ************************************************************/ #navi li:hover { background-color: #fff; } /************************************************************ Definition für einen Listenpunkt auf dessen Seite man sich gerade befindet (also bspw. Listenpunkt „Kontakt“, wenn man sich gerade auf der Seite „Kontakt“ befindet). Damit hebt sich der Link optisch von den anderen ab und dient so zusätzlich der Orientierung, wo man sich gerade innerhalb der Website befindet: Schriftfarbe des Links - wie Farbe des Fußbereichs, türkis Textauszeichnung - keine, nicht unterstrichen ************************************************************/ #navi a:link#aktuell, #navi a:visited#aktuell { color: #099; text-decoration: none; } /************************************************************ Definition für den aktuellen Listenpunkt auf einer Seite: Hintergrundfarbe - des Listenpunkts bleibt weiß ************************************************************/ #navi li.aktuell { background-color: #fff; } /************************************************************ Definition für die Bilder der Navigation: Innenabstand - links ************************************************************/ #navi img { padding-left: 10px; } /************************************************************ Klassen-Definition bspw. für die Beschriftung der Navigation: Innenabstand - links ************************************************************/ .verweise { padding-left: 9px; } /************************************************************ Klassen-Definition bspw. für den Abstand des Navigationspunktes „Service“ zum darüberliegenden Navigationspunkt der Navigation: Außenabstand - oben ************************************************************/ .service { margin-top: 30px; } /************************************************************ Definition für den Hauptbereich: Gesamtbreite - des Containers ************************************************************/ #haupt { width: 811px; } /************************************************************ Definition für den Inhaltsbereich: Gesamtbreite - des Containers Elementfluss - Element wird aus dem normalen Elementfluss herausgenommen und rechts angeordnet Hintergrundfarbe - Weiß Innenabstand - oben, rechts, unten, links Außenabstand - keiner Zeilenhöhe - vergrößert den Abstand zwischen den Zeilen ************************************************************/ #inhalt { width: 570px; float: right; background-color: #fff; padding: 10px 40px 30px 0px; margin: 0px; line-height: 1.3em; } /************************************************************ Definition für Überschrift zweiter Ordnung: Schriftgröße - relativ zur definierten Schriftgröße des Body Schriftfarbe des Textes - Mittelgrau Außenabstand von oben - bezogen auf das darüber angeordnete Element ************************************************************/ h2 { font-size: 110%; color: #666; margin-top: 1.6em; } /************************************************************ Definition für einen Absatz: Außenabstand - oben ************************************************************/ p { margin: 0.5em 0em 0em 0em; } /************************************************************ Definition für einen Absatz mit weniger Abstand als normal: Außenabstand - oben ************************************************************/ p.abstand { margin: -0.5em 0em 0em 0em; } /************************************************************ Definition für eine Unterschrift im Text: Schriftart des Textes - Standardschriftart(en) Schriftgröße - relativ größer zur definierten Schriftgröße des Body Schriftstil - kursiv ************************************************************/ .unterschrift { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 105%; font-style: italic; } /************************************************************ Definition für den Fußbereich: Gesamtbreite - des Containers Elementfluss - wird aufgehoben Hintergrundfarbe - wie Hintergrundbild, türkis Innenabstand - rechts und links Außenabstand - keiner Zeilenhöhe - vergrößert die Zeile bzw. den Abstand zwischen den Zeilen Zeichenabstand - explizit auf 0 gesetzt, da sonst der für body definierte Wert angewendet wird Wortabstand - vergrößert den Anstand zwischen den Wörtern ************************************************************/ #fuss { width: 788px; clear: both; background-color: #6bb6b6; border: 1px solid #666; padding: 0px 1px 0px 20px; margin: 0px; line-height: 25px; letter-spacing: 0em; word-spacing: 3em; } /************************************************************ Definition für einen definierten Verweis/Link im Fußbereich: Schriftfarbe des Links - schwarz Textauszeichnung - keine, nicht unterstrichen ************************************************************/ #fuss a:link { color: #000; text-decoration: none; } /************************************************************ Definition für einen besuchten Verweis/Link im Fußbereich: Schriftfarbe des Links - schwarz Textauszeichnung - keine, nicht unterstrichen ************************************************************/ #fuss a:visited { color: #000; text-decoration: none; } /************************************************************ Definition für einen Verweis/Link im Fußbereich (wenn man mit der Tastatur diesen Link ansteuert, wenn man mit der Maus über diesen Link fährt, wenn der Link gedrückt/aktiviert wird): Schriftfarbe des Links - schwarz Textauszeichnung - keine, nicht unterstrichen Rahmen - unten, dünn, durchgehend, weiß ************************************************************/ #fuss a:focus, #fuss a:hover, #fuss a:active { color: #000; text-decoration: none; border-bottom: 1px solid #fff; } /************************************************************ Definition für den aktuellen Listenpunkt im Fussbereich einer Seite: Schriftfarbe des Links - schwarz Textauszeichnung - keine, nicht unterstrichen Rahmen - unten, dünn, durchgehend, weiß ************************************************************/ #fuss a:link#aktuell, #fuss a:visited#aktuell { color: #000; text-decoration: none; border-bottom: 1px solid #fff; } /************************************************************ Definition für einen Textbereich im Fußbereich: Innenabstand - links, der Text wird nach rechts verschoben Wordabstand - normal, sonst würde die Definition für #fuss greifen ************************************************************/ .text_rechts { padding-left: 310px; word-spacing: normal; }