Navigation
38 users online :: 38 Gäste und 0 Registrierte
Einträge in dieser Kategorie
- Ebene horizontal zentrieren
- Ebene vertikal und horizontal zentrieren
- Teile der Seite verstecken
- Wie verstecke ich die CSS-Anweisungen vor Netscape 4.x und Internet Explorer 4.x?
- Mehrere Stylesheets einbinden
- Wie binde ich CSS-Dateien mit Browserweiche und media-Attribut richtig ein?
- Wie kann man das Layout der ausgedruckten Seite beeinflussen?
- Horizontale Navigation mithilfe einer Liste
- Dropdown-Menüs mit CSS
- Scrollbar einfärben
- Barrierefreie Navigationsmenüs mit CSS
- Layer fixieren (CSS-Frames)
- Wie erstelle ich einen zentrierten Dreispalter?
- Kann man ein Hintergrundbild relativ zum rechten Rand des viewports positionieren?
- Kann man ein Hintergrundbild relativ zum rechten Rand des viewports positionieren?
- Seite mal mit, mal ohne CSS anzeigen
- Der IE zeigt die farbige Scrollbar nicht an.
- Kennt Mozilla (Firefox und andere) das cursor[url]-element?
- Wie kann ich ohne Tabelle eine Bildunterschrift erreichen?
- Kann man ein Bild nur dann erscheinen lassen, wenn man CSS aktiviert hat?
- Wie kann ich Styles auf einer einzelnen PHP-Seite einbinden?
- Ich habe meine Hauptseite zentriert, links und rechts möchte ich einen Übergang machen. Leider verschiebt sich entweder die ganze Seite nach unten oder es liegt nicht genau an der Mitte an.
- Horizontal und vertikal zentrieren, ohne fest stehende Dimensionen
- Wie sperrt man html-seiten, dass der user den Quellcode nicht öffnen kann.
- Wie kann ich erreichen, daß bei zwei Spalten, die jeweils als float-definiert sind (:left und :right) und von denen Spalte A eine feste Pixelangabe hat, Spalte B so skaliert, daß der komplette Rest-viewport ausgefüllt wird (also abzüglich des Platzes, den Spalte A braucht)? (Breite auf 100 % setzen klappt natürlich nicht, weil dann Spalte B unter Spalte A springt.)
- Per Zufall wechselnde Hintergrundgrafiken erzeugen
- Inline-Popup mit CSS
- Ich möchte in der Navigation die vertikal angeordneten Elemente unterschiedlich weit einrücken. Wie kann ich das erreichen?
- Wie kann ich erreichen, dass mein Hintergrundbild mit jedem Seitenaufruf zufällig die Position wechselt? Danke.
- Eine Ebene vor die andere schieben
Tags
Sticky FAQs
Tricks und Kniffe
ID #1000
Ebene horizontal zentrieren
1. Ebene horizontal zentrieren
Der erste Versuch führt über folgendes CSS zu einem Teilerfolg:
body {text-align: center;}
#zentriert1 { width: 300px; height: 30px; background-color: #dedede; margin-left: auto; margin-right: auto;}
Teilerfolg deshalb, weil alle Browser, die nicht "Internet Explorer" heißen, die Ebene tatsächlich zentrieren, denn die Außenabstände (margins) nach links und rechts werden korrekt immer automatisch angepaßt. Den IE ficht das nicht an. Schade, denn die meisten User surfen mit diesem Browser. Also brauchen wir eine Lösung für die Mehrheit.
Deshalb fügen wir folgendes hinzu:
body {text-align: center;}
Der IE interpretiert "text-align" auch für die Ebene und zentriert sowohl die Ebene, als auch den Text. Um den zentrierten Text in allen Browsern wieder loszuwerden, müssen wir einfach nur in allen betroffenen Ebenen "text-align: left" hinzufügen und alles ist okay.
Der ganze Schnipsel liest sich also folgendermaßen:
body {text-align: center;}
#zentriert1 { width: 300px; height: 30px; background-color: #dedede; margin-left: auto; margin-right: auto; text-align: left;}
Hier steht normalweise Inhalt
Der erste Versuch führt über folgendes CSS zu einem Teilerfolg:
body {text-align: center;}
#zentriert1 { width: 300px; height: 30px; background-color: #dedede; margin-left: auto; margin-right: auto;}
Teilerfolg deshalb, weil alle Browser, die nicht "Internet Explorer" heißen, die Ebene tatsächlich zentrieren, denn die Außenabstände (margins) nach links und rechts werden korrekt immer automatisch angepaßt. Den IE ficht das nicht an. Schade, denn die meisten User surfen mit diesem Browser. Also brauchen wir eine Lösung für die Mehrheit.
Deshalb fügen wir folgendes hinzu:
body {text-align: center;}
Der IE interpretiert "text-align" auch für die Ebene und zentriert sowohl die Ebene, als auch den Text. Um den zentrierten Text in allen Browsern wieder loszuwerden, müssen wir einfach nur in allen betroffenen Ebenen "text-align: left" hinzufügen und alles ist okay.
Der ganze Schnipsel liest sich also folgendermaßen:
body {text-align: center;}
#zentriert1 { width: 300px; height: 30px; background-color: #dedede; margin-left: auto; margin-right: auto; text-align: left;}
Tags: -
Verwandte Artikel:
- Mozilla-Fehler bei Zentrierung
- Positionierung und der Fluß der Elemente
- Ebene vertikal und horizontal zentrieren
- Horizontale Navigation mithilfe einer Liste
- Horizontal und vertikal zentrieren, ohne fest stehende Dimensionen
Letzte Änderung des Artikels: 2003-10-24 15:03
Autor: Jens Grochtdreis
Revision: 1.0
Kommentieren nicht möglich