Navigation
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
Ebene vertikal und horizontal zentrieren
Das Ergebnis wird eine Ebene sein, die sich immer in der Mitte des Browsers befindet. Dreamweaver-User kennen dies vielleicht als "Letterbox-Frameset". Die Logik hinter der Lösung ist ganz einfach zu behalten: Erst wird die linke obere Ecke der Ebene in den exakten Mittelpunkt des Viewports gesetzt, um dann die Ebene jeweils die Hälfte der Breite und der Höhe nach links wieder zu schieben. Der Code:
#zentriert2 {width: 620px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -310px; margin-top: -200px;background-color: #dedede; }
Erst wird also mit 620x420px eine recht große Ebene aufgezogen. Dann wird diese Ebene (Bezugspunkt ist immer die linke obere Ecke) mit absoluter Positionierung direkt in die Mitte des Viewports (left: 50%; top: 50%;) positioniert. Da dies mit Prozentangaben passiert, paßt sich die Positionierung jeder Änderung der Browsergröße an. Mit den nagativen margins in der Größe der Hälfte der Höhe und der Breite schiebt sich dann die Ebene in ihrer gesamten Schönheit in das Zentrum des Browsers.
Tags: -
Verwandte Artikel:
- Mozilla-Fehler bei Zentrierung
- Positionierung und der Fluß der Elemente
- Ebene horizontal zentrieren
- Horizontale Navigation mithilfe einer Liste
- Horizontal und vertikal zentrieren, ohne fest stehende Dimensionen
Letzte Änderung des Artikels: 2011-09-26 22:25
Autor: Jens Grochtdreis
Revision: 1.1
Kommentieren nicht möglich
Kommentar von Michael Schwarz:
Schon mehrfach angewendet, aber:
MacIE 5.2: Hier funktioniert die Sache nur horizontal. Vertikal sitzt das DIV halb abgeschnitten am oberen Rand.
Habe dafür noch keine Lösung gesucht oder gefunden.
Added at: 2038-01-19 04:14
Kommentar von Schuer:
IE5 Mac siehe weiter unten: http://www.hicksdesign.co.uk/articles/archives/000030.php
Added at: 2038-01-19 04:14
Kommentar von Jens Grochtdreis:
Ich glaube, Du meinst eher diese Adresse:
http://www.hicksdesign.co.uk/articles/archives/000030.php
Added at: 2038-01-19 04:14
Kommentar von eläkeläiset:
Das Problem bei dieser Art der Zentrierung ist, daß sobald das Browserfenster kleiner ist als \"width\", der Inhalt links verschwindet/abgeschnitten wird (wegen margin-left).
Added at: 2038-01-19 04:14
Kommentar von humppa :(:
*räusper* steht ja schon in den obengenannten Links
Added at: 2038-01-19 04:14
Kommentar von be@no:
hat tatsächlich funktioniert wie gewünscht, danke sehr
Added at: 2038-01-19 04:14
Kommentar von makcie:
\'Das Problem bei dieser Art der Zentrierung ist, daß sobald das Browserfenster kleiner ist als \"width\", der Inhalt links verschwindet/abgeschnitten wird (wegen margin-left).\'
Analog wird bei height der Inhalt oben abgeschnitten.
Lösung: http://d-graff.de/selfhtml/center1.html
bitte dort die beiden nächsten
Dateien ansehen, wichtig ist vor allem center.3html
Added at: 2038-01-19 04:14
Kommentar von Thomas:
Hej,
der aktuelle Verweis lautet:
http://www.hicksdesign.co.uk/journal/vertical--horizontal-centering-2
viele Grüße Thomas
Added at: 2038-01-19 04:14