✔ 1px Versatz bei zentriertem Layout

Steffen Giers

Steffen Giers

Erfahrenes Mitglied
Hallo Kollegen,

seit stunden schlage ich mich mit folgendem Problem rum. Wahrscheinlich gibt es eine einfach Lösung dafür...

Für ein Projekt muss eine Seite zentriert werden. Die diversen Methoden der Zentrierung sind mir bekannt aber dieses spezielle Problem ist mir bisher noch nicht untergekommen.

Ich habe je nach Größe des Viewports einen 1px breiten Versatz zwischen dem vertikal gekachelten Bild im Body und dem Hintergrundbild des Headers.

Wenn ich das Fenster dann ein kleines Stückchen kleiner oder größer mache passt es zunächst wieder, allerdings taucht der Versatz wieder auf, wenn ich das Fenster noch weiter ziehe.

Das Problem konnte ich unter OSX 10.6 / Safari 4.04 und Windows 2000 IE 6.0.2800 verifizieren. Im Firefox sieht es gut aus und verhält sich wie erwartet.

Vielen Dank für die Hilfe.
 
Zuletzt bearbeitet:
Hi,

ich schlage hier eine kleine Umstellung vor, die ich in den beiden genannten Browsern (unter WinXP) erfolgreich getestet habe:
HTML: 
<body>
      <div id="wrapper">
           <div id="head">

           </div>
      </div>
</body>
CSS: 
@media screen {
        /* PAGE STRUCTURE */
        html,body { height:100%; }
        body {
                background:#32C746;
                color:#888;
                font:62.5%/1.5em Verdana, Tahoma, "Lucida Grande", Arial, Helvetica, sans-serif;
        }
        #wrapper {
                min-height:100%;
                height:auto !important;
                height:100%;
                width:995px;
                margin:auto;
                background:url('../img/body_bg.png') repeat-y;
        }
        #head {
                width:995px;
                height:284px;
                padding-top:30px;
                background:url('../img/head_bg.png') no-repeat 0 0;
        }

}


mfg Maik
 
Danke für deine Antwort. Allerdings habe ich in dieser Richtung schon ermittelt ;o) Der Ansatz ist sehr schlüssig und funktioniert natürlich auch. Aber nur so lange wie der Inhalt kleiner als der Viewport des Browser ist.

Im Klartext: Der Safari, Firefox und auch der Opera rendern die Seite leider nur bis zum unteren sichtbaren Rand des Viewports und hören dann mit dem Kacheln des Hintergrundes auf.

Wenn ich die Seite dann skaliere wird der Hintergrund auch wieder gekachelt. Das Body Element scheint sich einfach anders zu verhalten. Im IE 6 hingegen funktioniert das wie erwartet.
 
Zuletzt bearbeitet:
Das liegt an der height:100%-Regel für #content, die von den genannten Browsern als feste Höhe interpretiert wird.

Vergleich hierzu mal in meinem Lösungsansatz die ersten drei CSS-Regeln für #wrapper, mit denen ich browserübergreifend eine Mindesthöhe eingerichtet habe, die den Block bei zunehmenden Inhalt auch mitwachsen lässt.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück