Website zentrieren mit CSS

felixstoessel

Hallo,
mein Problem ist, dass ich mit CSS versuche die Website zu zentrieren, doch daran scheitere ich im Moment. Sie wird nämlich nicht korrekt zentriert (linker Abstand zum Rand ist kleiner als der Abstand von Rechts).

So ist meine Seite grob aufgebaut:

Code

<body>
<main>
<menu></menu>
<content>
</content>
</main>
</body>

Soo, und ich habe versucht folgendes mit CSS zu machen:

Code

main {
margin-left: 10%;
margin-right: 10%;
width: 80%;
}

Dies hat auch funktioniert, doch wenn ich einen Rahmen (border) um "main" einfüge mit z.B. 8px Breite, dann ist es nicht mehr richtig zentriert.

Kann mir da jemand helfen?

synaptic

mach ne feste breite für main und gib dem ding nen margin: 0 auto;

sejuma

Zwei mal 10% links und rechts plus 80% Mitte ergibt 100%. Der Rahmen erhöht nach dem CSS-Boxmodell die Gesamtbreite. Also ist die dann mehr als 100%.

Versuchs mal so:

Code

#main {
margin: 0 auto;
width: 80%;
border: 8px solid red;
}

Siehe auch http://www.ohne-css.gehts-gar.net/0001.php

felixstoessel

danke! funktioniert jetzt so wie gewünscht!

könnte man statt

Code

margin: 0 auto

auch das schreiben:

Code

margin-left: auto
margin-right: auto

oder gibt es da kleine Unterschiede?

synaptic

müsste auch so gehen...

geht auch mit margin: 0 auto 0 auto;

LinuxMan

Zitat von felixstoessel

main {
margin-left: 10%;
margin-right: 10%;
width: 80%;
}

Ich würde margin-left und margin-right mal ganz raus nehmen, width:80%; so lassen und der <main> umschliessenden Box, was wohl <body> wäre, ein text-align:center; zuweisen.

synaptic

Zitat von LinuxMan

Ich würde margin-left und margin-right mal ganz raus nehmen, width:80%; so lassen und der <main> umschliessenden Box, was wohl <body> wäre, ein text-align:center; zuweisen.

das is ja prima, dann hat er den text zentriert aber der rest der page ist linksbündig
bravo..
operation misslungen, patient tot

sejuma

LinuxMan:
War wirklich kein guter, bzw. bereits schon längst veralteter Vorschlag. Synaptic hat erklärt weshalb.

felixstoessel:

So wie von dir vorgeschlagen geht's natürlich auch.
Aus Faulheit und zwecks Code-Erparnis verwendet man jedoch oft die Kurzschreibweise.
Sieh dir zur Schreibweise mal hier Ziffer 5 an (gilt entsprechend auch für margin).

LinuxMan

Zitat von synaptic

dann hat er den text zentriert aber der rest der page ist linksbündig
bravo..

Nun gut, ich muss zugeben, ich habe das so noch nicht gemacht. Es müsste, soweit ich CSS Verstanden habe aber auf jeden Fall so gehen, wenn alles was zentriert werden soll ein Inline-Element ist.

synaptic

dan kannst du ja den oben gezeigten code hernehmen und mal testen was so alles passieren kann.. poste hier dann bitte die ergebnise in form von code und bild

Tags