Seite zentrieren

Computer: Software & Programmierung HTML & CSS
#1

Liebe/-r Experte/-in,
ich möchte eine website so einrichten, dass sie auf allen Monitoren zentriert sitz. Früher mit Tabellen war es ja ganz einfach aber mit css hab ich es nicht richtig hingekriegt. Bei meinem code sitzt die Seite zwar zentriert, wenn ich aber den Monitor klein stelle, ist die linke Seite nicht mehr drauf.
hier meins:
#zentrieren {
position: absolute;
top: 0px;
left: 50%; /*wichtig*/
margin: 0 -500px; /*wichtig*/
width: 1000px;
height:auto;
z-index:1;
}
wenn ich absolute rausnehme, ist es nicht mehr zentriert.

Könnt ihr mir helfen, dass wäre toll.

Lieben Gruß Monika

#2

Hey, mal ehrlich, dass ist so ein basic…es ist nicht
schlimm, dass du was nicht weißt, aber dass du zu faul
bist mal etwas im Netz zu stöbern…so lernt man am
schnellsten…außerdem sind ja unzählige Seiten so
formatiert und den Quellcode mal kurz aufzumachen und
dann zu schauen sollte auch drin sein denke ich…

Trotzdem hier die Lösung :wink: kannst du dir entsprechend
umbasteln ggf. in ne css packen…dein Ansatz sieht
irgendwie unnötig kompliziert aus…würde ich nicht
weiter verfolgen.

Alles Gute

Seiteninhalt…

#3

Na danke für das meckern. Natürlich hab ich vorher schon eine Stunde im Netz gesucht und auch die gleichen Lösungen gefunden wie ich sie eingebaut habe.
Dann sieht man die linke seite nicht, wenn man das Fenster verkleinert. Bei deiner Lösung ist es nicht zentriert. Es geht hier nicht um den Text, sondern um den ganzen Hintergrund.

so long moni

#4

Mahlzeit!

um ein Seitenelement zu zentrieren, nennen wir es mal #element, würde ich mich nicht auf die von dir gewählte Methode verlassen, da negative Margins gerade in älteren Browsern immer problematisch sind.
Bei deiner Methode ist auch problematisch, dass das zentrierte Element immer 1000px breit sein muss, was natürlich ein Nachteil ist.

Versuche mal folgendes:

#element {
display: block;
margin: 0 auto;
width: XXpx;
}
Das müsste es eigentlich schon gewesen sein. „auto“ als Margin-Wert bewirkt die automatische, horizontale Anpassung der Margins, also genau die gewünschte Zentrierung. Da natürlich nur Block-Elemente Margins haben können (z.b. div) müssen Nicht-Block-Elemente per „display: block;“ erstmal zu solchen gemacht werden. Die Angabe der Breite ist deshalb wichtig, weil sonst jedes Blockelement 100% des Raumes einnimmt (horizontal) und somit gar nicht mehr zentriert werden kann.

Ich hoffe das Hilft dir ein wenig weiter!

Herzliche Grüße,

Martin

#5

Klappt so leider nicht.Aber trotzdem vielen Dank Moni

#6

woran scheitert es? Kuck dir mal ein Beispiel an…

http://lizzardsweb.de/stuff/beispiel.html

Grüße,

Martin

#7

vesrstehe dein problem nicht…das text-align vom body-tag
richtet den div aus, gib dem den Hintergrund über
background-image und fertig…

#8

Ja, sieht gut aus bei dir. Habs genaus eingesetzt, zentriert sich aber nicht:
#zentrieren {
background-image: url(grafiken/website.jpg); background-repeat: no-repeat; background-position: center top;
position: absolute; /*wichtig*/
/* wichtig zum Zentrieren */
margin: 0 auto;
width: 400px;
/* wichtig bei inline-Elementen */
display: block;
width: 1000px;
height: 600px;
background-color:#95827E;
}

Ich verzweifel, vielleicht liegts ja an der Breite.
Es ist die seite:
http://arlom.net/moni_test/

Es zentriert sich ja, aber zieh mal den browser kleiner, dann verschwindet die linke seite. Hier ist aber wieder mein code drin.

LG Moni

#9

Hi Moni,

ich sehe jetzt wo das Problem bei deiner Seite liegt. Die mittige zentrierung klappt nicht richtig, da du sämtliche Elemente absolut positioniert hast.
Dein Workaround zur Zentrierung lässt den linken Seitenbereich bei zu kleinen Auflösungen verschwinden, durch den negativen Margin.
Versuche die Verwendung absoluter Positionierung auf das nötigste zu Beschränken, da es hier oft zu „Problemen“ kommen kann.
Versuche deine Divs durch margin und padding zu positionieren, anstatt über position: absolute;. Dann ist auch die Zentrierung wie in meinem Beispiel kein Problem. Nutze die Absolute Positionierung nur _innerhalb_ der normal positionierten Divs, um beispielsweise Grafiken anzuordnen. Dann sollte auch die Zentrierung kein Problem sein.

Ich möchte dir das noch kurz erläutern: Durch die absolute Positionierung wird das Element absolut positioniert ausgehend von der linken, oberen Ecke des Elternelements, also in deinem Fall dem Body. Somit kannst du die Seite auch nicht zentrieren! Erst durch den Workaround, alles 50% nach rechts zu verschieben und über einen Margin wieder zurück kriegst du eine scheinbare Zentrierung realisiert.
Ich hoffe das hilft dir schon bei deiner Umsetzung.

Grüße,
Martin

#10

Hallo Martin, danke dir. Das ist für mich jetzt endlich eine Erklärung, die ich begreifen kann. Werde es heute abend gleich mal versuchen umzusetzen.

Vielen Dank nochmal für deine Hilfe