✔ CSS-Layout horizontal zentrieren, Problem beim Skalieren

Status
Nicht offen für weitere Antworten.
DJTrancelight

DJTrancelight

Erfahrenes Mitglied
Hi zusammen,

ich bin gerade auf obiges Problem gestoßen und finde gerade die Lösung nicht. Google hat mir in meinem Fall auch nicht helfen können.

Wie kann ich es verhindern, dass das zentrierte div (#seite) beim verkleinern des Browserfensters plötzlich nicht mehr angezeigt wird? Ich möchte es gerne so haben, dass der Seitenbereich horizontal zentriert ist. Reicht der Aussenabstand zum Browserfenster nicht mehr aus, so soll die linke obere Ecke immer sichtbar sein und nicht aus dem Fenster verschwinden, wie es jetzt gerade der Fall ist.

Also so wie z.B. auf der tutorials.de-Seite soll es sein:)

Hier mein HTML-Code (ohne Kopfdaten)

<link href="css_styles/screen.css" rel="stylesheet" type="text/css">

</head>
<div id="seite">
<div id="header"></div>

</div><!--Ende von Seite-->
</body>
</html>
Zum Vergrößern anklicken....

und hier das ext. CSS:

/*CSS-File optimiert fuer 1024x768*/

* html, body{
margin:0px;
padding:0px;
}

body{
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size:13px;
background-color:#c5effa;
}

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

#header{
position:relative;
text-align:center;
background-color:#AAAAAA;
width:1000px;
height:200px;
margin:0px;
padding:0px;
}
Zum Vergrößern anklicken....

Wäre toll, wenn ihr mir helfen könnt und eine Lösung für IE6, und Firefox hättet. Mit margin:auto; hat es bei mir leider nicht geklappt.

Vielen Dank!

Schöne Grüße
DJ Trancelight
 
Hi,

bei mir funktioniert die horizontale Zentrierung des DIVs #seite mit margin:0 auto einwandfrei:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body{
margin:0px;
padding:0px;
}

body{
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size:13px;
background-color:#c5effa;
}

#seite{
position:relative;
width:1000px;
margin:0 auto;
}

#header{
position:relative;
text-align:center;
background-color:#AAAAAA;
width:1000px;
height:200px;
margin:0px;
padding:0px;
}
-->
</style>

</head>
<body>

<div id="seite">
     <div id="header"></div>
</div><!--Ende von Seite-->

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück