Problem mit CSS Container

S

StephanSch

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2006
Beiträge
406
Reaktionspunkte
1
Ich möchte mit Hilfe eines CSS Layers einen Container definieren, der genau zentriert vom Browser ist...habe das ganze auch realisiert. Das Problem an der Sache ist nun, dass wenn ich das Browserfenster extrem klein ziehe, schneidet er mir die linke Hälfte des Layers ab, und man kann dort hin auch nicht mehr scrollen. Lediglich die Rechte Hälfte des Layers kann man durch scrollen anschaun. Hier mein Code:

HTML Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
<title>Stephan Schr&ouml;ter | portfolio</title>

<link rel="stylesheet" type="text/CSS" href="MAIN/CSS/standard.css" />

</head>


<body>


<div id="container">


<div id="content">
<img src="MAIN/JPG/PHOTOGRAPHY/faces_1.jpg" alt="Foto: Stephan Schröter" />
</div>

<div id="navigation">
Navigation
</div>


</div>


</body>
</html>



CSS-Datei:

html, body {
background: #f5f5f5;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

p, div, ul, td, li {
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
}

#container {

position: absolute;
left: 50%;
top: 50%;
text-align: left;
width: 650px;
height: 475px;
background-color: #F2F322;
margin-left: -325px;
margin-top: -238px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}

#content {

text-align: left;
width: 650px;
height: 435px;
background-color: #CCCCCC;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}

#navigation {

text-align: left;
width: 650px;
height: 40px;
background-color: #F5F5F5;
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}
 
Moin!

Ich kann es gerade nicht testen, aber wahrscheinlich liegt es daran, oder?
Code: 
#container {

position: absolute;
[COLOR="Red"]left: 50%;[/COLOR]
top: 50%;
text-align: left;
width: 650px;
height: 475px;
background-color: #F2F322; 
margin-left: -325px;
margin-top: -238px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}
 
Schau dir mal dieses Portfolio an, da wurde eine andere Variante
verwendet, mit der dieser Effekt nicht auftritt.
(Hab jetzt leider nicht die Zeit, das rauszusuchen und zu posten... :keks:)

:)
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: loginvergessen
#container {

position: absolute;
left: 50%;
top: 50%;
text-align: left;
width: 650px;
height: 475px;
background-color: #F2F322;
margin-left: -325px;
margin-top: -238px;
border: 0px solid;
overflow-x: hidden;
overflow-y: hidden;
}

overflow: hidden ist wahrscheinlich das Problem oder?
Ich würde zum zentrieren aber das altbewährte:

margin: 50% auto;

machen. Das auto zentriert immer mittig!
 
okay, danke, werds mal ausprobieren...
das overflow hidden ist nicht das Problem, da sich das ja nur auf den Inhalt des Container Layers selbst bezieht.
 
Also das mit dem margin: 50% auto; geht nicht.....
eine Alternative wäre, das ganze in eine Tabelle reinzusetzen und die zentrieren...das hab ich schon ausprobiert und geht, ich möchte aber das komplette Design vom Inhalt trennen...daher sollte der Container ein CSS Layer sein und keine tabelle!!!
 
StephanSch schrieb:
Also das mit dem margin: 50% auto; geht nicht.....
eine Alternative wäre, das ganze in eine Tabelle reinzusetzen und die zentrieren...das hab ich schon ausprobiert und geht, ich möchte aber das komplette Design vom Inhalt trennen...daher sollte der Container ein CSS Layer sein und keine tabelle!!!
Zum Vergrößern anklicken....

probiere das margin: 0 auto mal für den Content aus!
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten