Keine zentrierte Darstellung mit CSS

Mister Knister

Mister Knister

Aktives Mitglied
Thread Starter
Dabei seit
27.04.2005
Beiträge
570
Reaktionspunkte
2
Hi MacUser
Ich bastle gerade an meiner eigenen kleinen Website. Da ich nicht im Zeitdruck bin moechte ich mit diesem Zug CSS vollstaendig verwenden. Nun habe ich aber ein Problem, ich habe ein div-Container mit left:auto; und right:auto; formatiert, eigentlich sollte er ja jetzt zentriert sein. Ist er aber nicht, zumindest bei Safari 2.0.3 .
Koenntet ihr mir helfen?

Ich poste mal noch die beiden Quelltexte:


index.html

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Website von Sven Michelmichel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Sven Michelmichel">
<meta name="generator" content="Taco HTML Edit - Made on a Mac">
<meta name="robots" content="follow">
<link rel="stylesheet" type="text/css" href="formate.css">
</head>
<!--Anfang Layout Box-->
<div class="layout">
<!--Anfang Banner Box-->
<div class="banner">
<img src="images/banner.jpg" alt="www.sven-mimi.de">
</div>
<!--Ende Banner Box-->
<!--Anfang Valid-Grafiken-->
<div class="valid">
<img src="images/valid-html401.jpg" alt="Diese Website ist HTML 4.01 Valid"> <img src="images/valid-css.jpg" alt="Diese Website ist CSS Valid">
</div>
<!--Ende Valid-Grafiken-->
</div>
<!--Ende Layout Box-->
</body>
</html>


formate.css

Code: 
<!--

body { background-image:url(images/background_apple.jpg); background-attachment:fixed; }

div.layout { background-color:#FFDDDD; position:absolute; top:100px; width:800px; height:1000px; }

div.banner { background-image:url(images/background_alu.jpg); position:absolute; top:10px; left:10px; right:10px; width:auto; height:100px; }

div.valid { position:absolute; left:20px; bottom:20px; }

-->

Der Mister Knister
 
Du musst auch sagen das da was zentriert werden soll:
body { text-align:center;}
 
nimm mal left und right = 50%

... und nicht auto oder fahrrad :D
 
Ich hätte da jetzt einfach ein margin:auto genommen. Im Übrigen fehlt dir ein <body>. ;)
 
Also bis jetzt hat keine der Moeglichkeiten etwas genutzt.

body { text-align:center; }
bringt nichts weil ich ja absolut positioniert hab

bei left und right = 50%
bringt nichts weil dann mein Comtainer in der Mitte anfaengt aber zentriert ist er nich, ich muss dann scrollen

margin:auto
bringt nichts weil ich ja oben andere abstaende eingegeben habe, ausserdem ist margin ist margin glaubich nich erlaubt vom W3C

Der Mister Knister
 
alsooooo...
du brauchst einen div um deine inhalte drumherum, quasi einen "wrapper".
dem gibst du eine feste breite (soweit das zu deinem layout passt.) Dann richtest du den div "wrapper" mittels position:absolute aus:
width:xxx;
postition:absolute;
left:50%;
margin-left: hälfte von width;
z-index:1

So klappt es auf jeden Fall und ist auch W3C-Konform.
 
was bedeutet das z-index?

Der Mister Knister
 
Code: 
#container { position: absolute; top: 50%; left: 50%; height: 500px;
width: 700px; visibility: visible; margin-top: -250px; margin-left: -350px;
text-align: left ; }

… so könnt's gehen,… ist zwar ein wenig geschummelt, funzt aber!! ;) :D

Greetz,…
 
Mister Knister schrieb:
was bedeutet das z-index?

Der Mister Knister
Zum Vergrößern anklicken....

z-index zeigt die stapelreihenfolge von ebenen an, und eben sind nix anderes als divs, die mittels position ausgerichetet werden.
 
Es funktioniert mit keinem eurer Vorschlaege. Ich weiss auch nich worans liegt.

Der Mister Knister
 
Das Buch von SelfHTML liegt vor mir auf dem Tisch. Ich habe alles ausprobiert was im Buch stand.

Der Mister Knister
 
Die standard-konforme und von CSS2 vorgesehene Methode ist, der Box, die zentriert dargestellt werden soll, den linken und den rechten Rand auf Automatik zu setzen, allerdings hilft hier eine absolute Positionierung nicht weiter, sondern stört die Ausrichtung, da ja nichts mehr fließen darf.
Code: 
div.layout { width: 800px; margin-left: auto; margin-right: auto }
Dies sorgt dafür, dass die Fläche mit der Klasse "Layout" zentriert wird. Damit dies auch mit dem MSIE klappt, der bekanntlich immer ein paar kleine Bugs parat hat, muss dem übergeordneten Objekt noch die Ausrichtung "zentriert" hinzugefügt werden. In diesem Fall ist das übergeordnete Objekt "body" (übrigens fehlt in Deinem HTML-Quelltext das öffnende Body-Tag):
Code: 
/* Damit's auch mit MSIE klappt: */
body { text-align: center }

Hoffe, es hilft.
 
versuchs mal so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Website von Sven Michelmichel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Sven Michelmichel">
<meta name="generator" content="Taco HTML Edit - Made on a Mac">
<meta name="robots" content="follow">
<link rel="stylesheet" type="text/css" href="formate.css">
</head>
<body>
<!--Anfang Layout Box-->
<div class="layout" id="inhalt">
<!--Anfang Banner Box-->
<div class="banner">
<img src="images/banner.jpg" alt="www.sven-mimi.de"></div>
<!--Ende Banner Box-->
<!--Anfang Valid-Grafiken-->
<div class="valid">
<img src="images/valid-html401.jpg" alt="Diese Website ist HTML 4.01 Valid"> <img src="images/valid-css.jpg" alt="Diese Website ist CSS Valid"></div>
<!--Ende Valid-Grafiken-->
</div>
<!--Ende Layout Box-->
</body>
</html>
Zum Vergrößern anklicken....

css:

body { background-image:url(images/background_apple.jpg); background-attachment:fixed; }

div.banner { background-image:url(images/background_alu.jpg); position:absolute; top:10px; left:10px; right:10px; width:auto; height:100px; }

div.valid { position:absolute; left:20px; bottom:20px; }

#inhalt {
position:absolute;
height:580px;
width:920px;
margin:-290px 0px 0px -460px;
top: 50%;
left: 50%;

text-align: left;
padding: 0px;
background-color: #FFDDDD;
border: 1px solid #666666;
overflow: auto;
}
Zum Vergrößern anklicken....

dir funzt ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten