@charset "utf-8"; /* CSS Document */ @import url("norm.css"); /* Zentralisieren der Website mittels body! Durch position:relative wird zum Positionierungskontext für alle nachfolgenden Elemente. » Mit margin: 0 auto weisen Sie der Seite oben und unten null Außenabstand hinzu, links und rechts jeweils den gleichen, d.h., die Seite sitzt damit in den meisten Browsern in der Mitte. Der Internet Explorer benötigt jedoch text-align: center für das Zentrieren. Ausnahmsweise fügen wir temporär einen Rahmen statt einer farbigen Hintergrundfarbe hinzu, um die Breite der Seite besser zu sehen. Eine Hintergrundfarbe würde sich hier auf die gesamte Seite auswirken und wir könnten damit die Breite nicht erkennen. Üblicherweise empfiehlt es sich jedoch, Hintergrundfarben einzusetzen, da diese im Gegensatz zu einem Rahmen einem Element keine zusätzlichen Pixel hinzufügen. Wie Sie am Screenshot erkennen, wird unsere Webseite nun zentriert im Browser-Fenster angezeigt. Der schwarze Rahmen zeigt uns die Abmessungen von genau an. Den Rahmen entfernen wir im nächsten Schritt gleich wieder. */ body { position:relative; margin:0 auto; text-align:center; width:950px; /*border: 1px solid #000;*/ background:#6e6a60; /*dunkelgraue Seitenfarbe*/ font-size:100.01%; font-family:"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "sans-serif"; color:#5a6267; } div#wrapper { text-align: left; position: relative; width: 950px; background-image: url(images/Hg_bild_eigen_mitte_A.jpg); background-repeat: repeat-y; background-position: center; } div#oben { height: 93px; width: 950px; background-image: url(Bildersammlung/Hintergrundbild_F/Hg_bild_komplett_eigen_F_oben.jpg); background-repeat: no-repeat; background-position: center; } div#content { padding: 0 110px; background-image: url(Bildersammlung/Hintergrundbild_F/Hg_bild_komplett_eigen_F_mitte1.jpg); background-repeat: no-repeat; background-position: center top; } h1.logo { background-image: url(images/landschaften.jpg); background-repeat: no-repeat; text-indent: -9999px; height: 60px; width: 265px; position: relative; left: 435px; clear: left; top: -28px; } blockquote.info { text-indent: -9999px; height: 0px; } /*Der Punkt bedarf noch der Überarbeitung, damit der Text unter dem Logo erscheint*/ div#footer { height: 93px; width: 950px; background-image: url(images/Hg_bild_eigen_unten_A.jpg); background-repeat: no-repeat; background-position: center bottom; } #main { overflow: auto; text-align: center; margin-right: 15px; /*Wert ermittelt*/ margin-left: 15px; } dl { float: left; margin: 12px; border: 1px solid #5a6267; } dt { position: relative; line-height: 0; height: 145px; /*Mit "auto" ist der Abstand zu gross*/ width: 143px; text-align: center; /*Zentriert das Bild mittig von dd*/ background-color: #fef9e9; /*Hintergrundfarbe des Hintergrundbildes "mitte1"*/ } dd { padding: 2px; font-size: 0.7em; width: 140px; height: auto; background: #555; color: #fff; margin: 0; } img { border: 1px solid #fff; } #main dl dt #bild1 { padding-top: 5px; } #main dl dt #bild2 { padding-top: 8px; } #main dl dt #bild3 { padding-top: 27px; } #main dl dt #bild4 { padding-top: 5px; } /* Wie kann die Zentralisierung von Bildreihen innerhalb Body-Grenzen z.B. 950 px erreicht werden? In dem ich jedem einzelnen Bild eine "id" gab und händisch mittels Border-top die Mitte ermittelte */ #site_info h4 { text-indent: -9999px; } div#site_info { font-size: 0.7em; line-height: 1.3em; margin-left: 25px; } div#zurueck { margin-left: 35px; } #navi { float: left; width: 500px; background-image: url(Bildersammlung/navi_eigen_hg.png); position: relative; left: -95px; background-repeat: repeat; background-position: left top; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 0.75em; letter-spacing:0.2em; min-height: 30px; text-decoration: none; top: 22px; } #navi ul li { float: left; margin-right: 8px; margin-left: 8px; text-decoration: none; margin-top: 8px; padding-left: 20px; } #navi ul li a { text-decoration: none; color: #5a6267; }