Website centreren met css

Status
Niet open voor verdere reacties.
I

ijsboerke

Gebruiker
Lid geworden
20 aug 2004
Berichten
56
Hallo,
Ik ben bezig met een website te maken (die een staande vorm heeft) en dus zou ik het liefst hebben dat hij gecentreerd is !

Nu zat ik te denken dat niet iedereen dezelfde resolutie enzo heeft. Is er een manier om je website met css te centreren zodat hij in het midden staat voor alle resoluties ?

Ik maak normaal gezien m'n website met classes.

Voorbeeld hoe ik positioneer :

.class1 {position: absolute;
background-image: url(image_1.jpg);
background-attachment: fixed;
background-repeat: none;
margin-left: 200px;
margin-top: -15px;
}
 
Je kunt inderdaad:

Code: 
margin: auto;

gebruiken, maar wat ik ook nog wel eens wil doen is:

Code: 
position: absolute;
left: 50%;
margin-left: -400px; /* de helft van de breedte van je element vermenigvuldigd met -1 */

De laatste code verdient mijn voorkeur, aangezien je dan ook als je bijvoorbeeld nog een kolom ernaast hangt, het geheel gecentreerd kunt houden. Dat doe je dan door nog eens de helft van de breedte van de extra kolom van de margin-left af te halen.

Als je met margin: auto werkt, zou je het geheel weer in een container moeten stoppen.
 
Hé, werkt
Code: 
body {
     width: 900px; /* of: width: 80% bij liquid design */
     margin: 0 auto;
     }
dan niet meer? Extra container overbodig; en kolommetje erbij of eraf, alles auto. Hoef ik niet te rekenen, want ik ben aartslui. ;)

CSShunter
 
Tsja, daar zit ook wel wat in ;)

Maar wat als je body een achtergrondkleur heeft? Dan zou je dat weer aan de <html> moeten gaan toevoegen.
 
Correctemento! :)
De backgroundcolor van de "body" is in dit geval dus niet hetzelfde als de bg-kleur van alle lege ruimte op het beeldscherm, en voor opvulling daarvan kan uitstekend de html gebruikt worden: html { background: kleurtje; } of html { background: url(..../plaatje.png) } of een combinatie van die twee.
 
Tsja, dan is het inderdaad makkelijk om gewoon de breedte van de body te beperken en die te centreren ja. :thumb:
 
[LATE EDIT]
Mag ik er nog even op wijzen trouwens, dat de manier die ik aangaf ook werkt voor verticaal centreren. Dat lukt met margin: auto; niet. Puur even dat je het weet ;).
[/LATE EDIT]
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan