Zentrieren mit CSS

[johnyy]

Hi

Ich arbeite zur Zeit an einer Website für nen Kumpel von mir.
Die Website besteht aus mehreren DIV Boxen, welche sich alle in einer grossen DIV Box ("hintergrund") befinden.
Die "hintergrund" DIV Box habe ich nun mit folgendem CSS code zentriert:

#hintergrund {  
	position: absolute;  
	width: 990px;  
	height: 735px;  
	z-index: 1;  
	border: solid 8px #e98a3b;  
	margin: -367.5px 0px 0px -495px;  
	top: 50%;  
	left: 50%;  
	text-align: left;  
	-moz-border-radius:30px;  
	-khtml-border-radius:30px;  
	-webkit-border-radius:30px;  
	background-color: #FFF;  
}

Mein Problem ist nun, dass bei einem zu kleinen Browserfenster der obere Rand der Seite abgeschnitten wird und man dann auch nicht mehr hochscrollen kann!
An was könnte das liegen?
Hier noch ne kleiner Vorschau der Homepage
Ist hald noch immer im Anfangsstadium aber man sieht das Problem gut, wenn man das Browserfenster verkleinert;D

Schon mal vielen Dank für eure Antworten.
Johnyy

[Matthias Apsel]

Om nah hoo pez nyeetz, johnyy!

Mein Problem ist nun, dass bei einem zu kleinen Browserfenster der obere Rand der Seite abgeschnitten wird und man dann auch nicht mehr hochscrollen kann! An was könnte das liegen?

das ist eine Nebenwirkung von position: absolute;. Daher empfehle ich dir diesen Artikel.

Matthias

[johnyy]

Om nah hoo pez nyeetz, johnyy!

Mein Problem ist nun, dass bei einem zu kleinen Browserfenster der obere Rand der Seite abgeschnitten wird und man dann auch nicht mehr hochscrollen kann!
An was könnte das liegen?

das ist eine Nebenwirkung von position: absolute;. Daher empfehle ich dir diesen Artikel.

Matthias

vielen Dank für diesen Super Artikel... hat mir sehr geholfen:D

[Der-Dennis]

Hey Johnyy,

#hintergrund {

margin: -367.5px 0px 0px -495px;
}

>   
> Mein Problem ist nun, dass bei einem zu kleinen Browserfenster der obere Rand der Seite abgeschnitten wird und man dann auch nicht mehr hochscrollen kann!  
> An was könnte das liegen?  
> Hier noch ne kleiner Vorschau der [Homepage](http://johnyyy.jo.funpic.de)  
> Ist hald noch immer im Anfangsstadium aber man sieht das Problem gut, wenn man das Browserfenster verkleinert;D  
  
Ich würd sagen, dass der negative margin in Kombination mit dem zu kleinen Fenster das Problem darstellt. Warum ist der überhaupt negativ? Und noch etwas: Gibt es überhaupt halbe Pixel?  
  
Gruß, Dennis

[Der-Dennis]

Warum ist der überhaupt negativ?

Dämlich, natürlich wegen der Zentrierung. Sorry!

Gruß, Dennis

[suit]

Ich würd sagen, dass der negative margin in Kombination mit dem zu kleinen Fenster das Problem darstellt. Warum ist der überhaupt negativ?

Weil das für diese suboptimale Version des Zentrieren notwendig ist.

Und noch etwas: Gibt es überhaupt halbe Pixel?

Gewöhnliche TFTs haben Subpixel - bei RGB-Geräten idR. drei ;) Also gibt es auf jeden Fall drittel Pixel.

Und ja, natürlich lassen sich auf halbe Pixel im CSS angeben, wenngleich das verhalten in den Browsern dann unterschiedlich ist - manche Runden mathematisch korrekt, manche runden immer ab, mache immer auf, manche rechnen sogar schlau - da gabs irgendwo mal eine übersichtliche Aufstellung davon.

[suit]

-moz-border-radius:30px;
-khtml-border-radius:30px;
-webkit-border-radius:30px;

Nebst dem bereits von Matthias genannten Artikel ist hier noch einzuwenden, dass du border-radius nicht definiert hast sondern nur irgendwelche Herstellerspezifischen Varianten davon. Opera hat hier z.B. dann Ecken ohne Abrundung obwohl er problemlos mit border-radius umgehen könnte.

[johnyy]

-moz-border-radius:30px;  
-khtml-border-radius:30px;  
-webkit-border-radius:30px;  

Nebst dem bereits von Matthias genannten Artikel ist hier noch einzuwenden, dass du border-radius nicht definiert hast sondern nur irgendwelche Herstellerspezifischen Varianten davon. Opera hat hier z.B. dann Ecken ohne Abrundung obwohl er problemlos mit border-radius umgehen könnte.

Hi wie müsse ich denn den boarder radius definieren, dass es auch in Opera angezeigt werden könnte?:D

[johnyy]

-moz-border-radius:30px;  
-khtml-border-radius:30px;  
-webkit-border-radius:30px;  

Nebst dem bereits von Matthias genannten Artikel ist hier noch einzuwenden, dass du border-radius nicht definiert hast sondern nur irgendwelche Herstellerspezifischen Varianten davon. Opera hat hier z.B. dann Ecken ohne Abrundung obwohl er problemlos mit border-radius umgehen könnte.

Hi wie müsse ich denn den boarder radius definieren, dass es auch in Opera angezeigt werden könnte?:D

habs rausgefunden;D

[suit]

[...] obwohl er problemlos mit border-radius umgehen könnte.

Hi wie müsse ich denn den boarder radius definieren, dass es auch in Opera angezeigt werden könnte?:D

habs rausgefunden;D

Also "border-radius" :D

[Cyx23]

Hallo,

Mein Problem ist nun, dass bei einem zu kleinen Browserfenster der obere Rand der Seite abgeschnitten wird und man dann auch nicht mehr hochscrollen kann!

vielleicht hilft Dir dieser Artikel Zentrieren per CSS bei der Lösung.

Grüsse

Cyx23

[suit]

vielleicht hilft Dir dieser Artikel Zentrieren per CSS bei der Lösung.

Eine Lösung, die ohne JavaScript nicht funktioniert und sich aber trotzdem als CSS-Lösung darbietet? ;)

[Cyx23]

Hallo,

Eine Lösung, die ohne JavaScript nicht funktioniert und sich aber trotzdem als CSS-Lösung darbietet? ;)

Nein, sie funktioniert für moderne Browser (wie auch die aktuellen IEs) ohne JavaScript.
Für (bes. alte) IEs wird allerdings ein Workaround per Script vorgestellt, das mag z.B. beim derzeit immer noch öfters genutzten IE6 eine sinnvolle Ergänzung sein.

Grüsse

Cyx23