Grafik wird abgeschnitten

[ByeBye 242513]

Hallo Community,

ich möchte gerne das meine Navigationsgrafik (im Screen schwarz, mittig) nicht an der linken Seite abgeschnitten wird, wenn man den Browser oder Auflösung verkleinert und dann nach links Scrollt.

An Hand der Screenshots sollte mein Problem ersichtlich sein.

CSS-Datei:

#container { position: absolute; left: 50%; margin-left: -500px; min-height: 300px; width: 1000px; text-align: center; }
#logo { position: absolute; width: 239px; height: 52px; top: 57px; background-image: url(../img/logo.jpg); background-repeat: no-repeat;  }
#navigation { position: absolute; left: 50%; margin-left: -474px; width: 948px; height: 55px; top: 151px; background-image: url(../img/img_bg_navi.jpg); background-repeat: no-repeat;  }

Index-Datei:

<div id="container">
  <div id="logo1"></div>
  <div id="navigation"></div>
  test
</div>

 

[Maik]

Moin,

die Ursache liegt in deiner gewählten Positionierungstechnik, die die Blöcke im Viewport horizontal zentriert.

In diesem (Negativ-)Beispiel http://d-graff.de/selfhtml/center1.html betrifft dies auch den oberen Bereich der zusätzlich vertikal zentrierten Box, wenn die Browserfensterhöhe die Höhe der Box unterschreitet.

Entweder greifst du auf diese Methode http://d-graff.de/fricca/center.html zurück, die den linken und oberen Boxenbereich nicht verschwinden lässt, wenn der Viewport kleiner ist, wie die Boxendimension, oder du zentrierst #container und #navigation auf diese Weise:

#container { position: relative; margin: auto; min-height: 300px; width: 1000px; text-align: center; } 
#navigation { position: relative; margin: auto; width: 948px; height: 55px; top: 151px; background-image: url(../img/img_bg_navi.jpg); background-repeat: no-repeat;  }

mfg Maik