zentrierte page, aber linke seite verschwindet

AppeL

Ich hab ne Seite, die 1000px breit ist, und diese hab ich nun zentriert mit folgendem Code:

Code

<body>
 <div id="container">
 inhalt
 </div>
</body>




CSS-Datei:


body {
width: 1000px;
}


#container {
left:50%;
margin-left: -500px;
position:absolute;
width: 1000px;
}

Alles anzeigen

Diese Seite ist nun auch mittig, nur sobald man mit einer kleineren Auflösung als 1024x768 die Seite betrachtet, wird eine horizontale Scrollbar erstellt, mit der man allerdings nicht an das linke Ende der Seite scrollen kann.

Dass das an dem margin-left liegt, das die Seite nach links rausschiebt, hab ich schon rausgefunden. Hat jemand eine andere Idee, wie man die Seite möglichst einfach zentrieren kann?

scaexp

Hallo,
probier mal diesen Code
Gruss
K.H.

<body style="background-color: #FFFFA9">
<center>
<div id="container" style="width: 1000px; background-color: #F1DEF5; text-align: left;" >
Inhalt</div>
</center>
</body>

sejuma

Nimm beim body statt "width:1000px"

Code

width:100%;

AppeL

ne width: 100% geht nicht

hab grad ne lösung gefunden:

Code

html {
min-width: 1000px;
}

edit: ok, das geht nur im FF
auch wenn ich für den IE width: 1000px; nehme, macht ers nicht 8[

sejuma

So erreichst du die horizontale Zentrierung:

Code

body {
width: 100%;
height:100%;
margin:0;
padding:0;
}


#container {


margin-left: -500px;
position:absolute;
left:50%;
width: 1000px;
background-color:red;
}

Alles anzeigen

Die Scrollbar erscheint, wenn die Auflösung < 1.000 px ist. Müsste sich aber in jedem Fall scrollen lassen.

Lizzard

Das könnt ihr doch auch einfacher machen

Code

body {
  margin: 0 auto;
  padding: 0;
}


div {
   margin: 0 auto;
   width: 1000px;
}

AppeL

geht beides nicht

ich habs mal geuppt: http://stefalicious.st.ohost.de/projekt-j/index.html

wenn man das browser fenster verkleinert, dann kommt die scrollbar, man kann aber nicht mehr links in die navigation scrollen

bei FF hab ich das problem mittlerweile mit nem min-width: 1000px; bei html behoben, beim IE gehts halt net so richtig

sejuma

Das Hauptproblem liegt daran, dass du alles in den zentrierten Container packst (richtig), dann aber die einzelnen Elemente absolut zum body positionierst, der bei dir immer 1000 px breit ist (falsch). Das kann nicht gut gehen. Bei kleineren Auflösungen rücken sie dann durch margin-left -500px über den Rand raus.
Versuch deshalb mal alle Elemente, die in den Container kommen durch float- und margin-Angaben innerhalb des Containers zu positionieren.

scaexp

Hallo,
schau mal zu diesem Link: http://www.drweb.de/csstechnik/layer_4.shtml
gruss
K.H.

zentrierte page, aber linke seite verschwindet

Tags

Benutzer online in diesem Thema