CSS Webdesign Breite der Webseite und zentrieren
Breite der Webseite
Wenn Sie eine Webseite in der Mitte des Browserfensters zentriert darstellen wollen, sollte zunächst die Breite eingestellt werden. Dies geschieht wenn Sie einen DIV Bereich mit wrapper in Ihre html-Seite eingebaut haben folgendermaßen:width: 720px; /* Breite des Inhaltsbereiches */
Zentrieren der Webseite
- margin-right: auto; /* Abstand rechts automatisch */
- margin-left: auto; /* Abstand links automatisch */
- margin-top: 10px; margin-bottom: 10px; /* Ist der Rand oben und unten */
Außenabstand mit padding
Damit der Text nicht am äußeren Rand steht, sondern etwas eingerückt wird, musste den einzelnen DIV-Bereichen mit einem padding die Anweisung zum innereren Abstand gegeben werden, nicht im wrapper, da dadurch auch der Headbereich, samt Logo eingerückt werden würde, sondern nur den dafür in Frage kommenden Bereichen #navibereich #textbereich #fussbereich:- padding-top: 10px; padding-right: 20px; padding-bottom: 0; padding-left: 20px;
Rand mit Border
Damit die Unterteilung von Haupttext und dem Fußbereich besser erkenntlich wird, kann eine Linie eingefügt werden mit hr, aber die Lösung hier ist eleganter, es wurde in den Fußbereich ein oberer Rand eingefügt:border-top: 1px solid #8c8c8c; /* Rahmenlinie oben */
Die Anleitung orientiert sich an dem Buch little boxes
Webseiten gestalten mit CSS Grundlagen.
Von dem Autor sind die nachfolgenden Titel verfügbar: