Zentrierte div in Safari
Eurosystem
- css
Hallo,
ich habe ein relativ kleines Problem mit der Zentrierung einer div im Safari Browser. Der Code sieht wie folgt aus:
html, body {
height: 100%;
width: 100%;
}
.abstandhalter {
width:10px;
height:50%;
margin-bottom:-260px;
float:left;
position:relative;
}
.zentriertediv {
clear:left;
height:540px;
width:700px;
position:relative;
margin:0 auto;
font-family:verdana;
font-size:12px;
}
<div class="abstandhalter"></div>
<div class="zentriertediv">Zentrierter Inhalt</div>
Die obere div kriegt also die Hälfte des Bildschirms als Höhe und verschiebt sich dann um die Hälfte des unteren div nach oben so das diese mit ihrer Mitte in der Mitte des Bildschirms liegt.
Das Ganze klappt auch super in allen Browsern außer eben Safari und Google Chrome...
Hat jemand eine Idee was diese Browser falsch interpretieren (oder nicht so wie ich es will)?
Vielen Dank im Voraus
Eurosystem
ich habe ein relativ kleines Problem mit der Zentrierung einer div im Safari Browser. Der Code sieht wie folgt aus:
html, body {
height: 100%;
width: 100%;
}
Body hat per default ein 'margin' von wenigen Pixeln, in Opera ein 'padding' von einigen Pixeln. Wenn du BODY nun so ohne Weiteres 100% gibst, ist es genau um diese paar Pixel zu groß.
> ~~~css
> .abstandhalter {
> width:10px;
> height:50%;
> margin-bottom:-260px;
> float:left;
> position:relative;
> }
>
> .zentriertediv {
> clear:left;
> height:540px;
> width:700px;
> position:relative;
> margin:0 auto;
> font-family:verdana;
> font-size:12px;
> }
Rechne deine Abstände nochmal nach. ;-)
Grüße
gaby
BTW
Hier ist das Original:
http://d-graff.de/fricca/center.html
BTW
Hier ist das Original:http://d-graff.de/fricca/center.html
Und hier diese Technik entsprechend erklärt, damit man auch versteht warum das Ding funktioniert.
http://suit.rebell.at/artikel/horizontal-und-vertikal-zentrieren-mit-xhtml-und-css
Erstmal vielen Dank für eure Hilfe!
Ja, ich weiß das 540/2 eigentlich 270 ist, aber ich wollte die div halt ein bißchen nach unten verschieben :).
Das Problem habe ich inzwischen auch gelöst, es befanden sich ein paar "Preload"-Bilder vor der Abstand-div mit denen Safari irgendwie nicht zurechtkam.
Gruß
Eurosytem