Body centreren op een scherm CSS

Status
Niet open voor verdere reacties.
J

jonajona25

Gebruiker
Lid geworden
15 okt 2009
Berichten
41
Hey
Ik wil de gehele (body van de) website centreren zodat het in ieder scherm in het midden terecht komt. Echter lukt dit niet met de verschillende manieren die uitgelegd worden.

CSS script is bijgesloten..

Wie heeft de oplossing?

Dank
Jonathan
 

Bijlagen

  • CSS Document.docx
    13,4 KB · Weergaven: 148
Helaas kan ik die bijlage niet lezen, omdat docx geen standaardformaat is.
css-bestanden kun je het best als gewone tekstbestanden opslaan en dan zippen.
Of gewoon je code hier neerzetten.
Heb je trouwens al geprobeerd aan #wrapper 'n position: relative; toe te voegen?

Edit: die oplossing van Center Web Page Content Using CSS is echt heel zwaar verouderd en werkt niet goed in alle browsers. Er staat geen doctype, wat garandeert dat het tot verschillen in browsers leidt.
Verder gebruiken ze text-align: center. Dat is niet bedoeld voor blok-elementen, maar voor inline-elementen als tekst en afbeeldingen. Het werkt niet goed in alle browsers en heeft allerlei vervelende bijwerkingen.
Tegenwoordig werkt in álle browsers
Code: 
margin: 0 auto;
rondom 'n div (of de body, net hoe het uitkomt) waarin alles staat. Alleen bij absoluut positioneren en zo moet je 't soms wat anders doen.
 
Laatst bewerkt:
Wat bedoel je met de body centreren.
De body is altijd gecentreerd, neemt het hele scherm in beslag dus altijd gecentreerd.
Je zet bij body ook position:relative, waarom?
Als je nu als eerste in je CSS zet:
body, html{witdh: 100%; height: 100%}
Is dat alvast altijd goed.
Om dan een div te centreren is heel makkelijk.
bv
#wrapper{
position: absolute;
left: 50%;
top: 50%;
witdh: 800px;
height: 800px;
margin-left: -400px;
margin-top:-400px;
}

zo staat de wrapper altijd in elke browser precies in het midden.
de hoogte en breedte moet je natuurlijk zelf instellen dit is maar een voorbeld.
En de margin-left is de helft van je breedte en dan negatief,
Voor margin-top geld dit ook maar dan voor de hoogte.
 
@che
Die oplossing werkt wel, maar is 99 van de 100 keer veel te ingewikkeld. Normaal genomen kun je volstaan met
Code: 
div#wrapper {widht: 800px; /* of welke breedte dan ook */, margin: 0 auto;}
Verticaal centreren met behulp van 'n absolute positie levert 'n groot risico op het verdwijnen van 'n deel van de pagina. Als de pagina hoger is dan het scherm, is het deel dat onder de onderkant van het scherm staat gewoon te zien vanwege de scrollbalk die onstaat.
Maar het deel dat bóven het venster uitsteekt is kwijt, niet te zien, geen scrollbar, niets. Dus onbereikbaar.

Ik heb in 'n andere topic de css van jonajona25 trouwens wel gezien, en het leek erop dat alleen 'n position: relative bij de wrapper miste.
Maar goed, daar zal nog wel antwoord op komen.
 
Goeroeboeroe zei:
@che
Die oplossing werkt wel, maar is 99 van de 100 keer veel te ingewikkeld. Normaal genomen kun je volstaan met
Code: 
div#wrapper {widht: 800px; /* of welke breedte dan ook */, margin: 0 auto;}
Verticaal centreren met behulp van 'n absolute positie levert 'n groot risico op het verdwijnen van 'n deel van de pagina. Als de pagina hoger is dan het scherm, is het deel dat onder de onderkant van het scherm staat gewoon te zien vanwege de scrollbalk die onstaat.
Maar het deel dat bóven het venster uitsteekt is kwijt, niet te zien, geen scrollbar, niets. Dus onbereikbaar.

Ik heb in 'n andere topic de css van jonajona25 trouwens wel gezien, en het leek erop dat alleen 'n position: relative bij de wrapper miste.
Maar goed, daar zal nog wel antwoord op komen.
Klik om te vergroten...

Als je hoogte 800px is en je margin-top is de helft van je hoogte kom je nooit boven het scherm. ik gebruik dit altijd als iets echt gecentreerd moet worden, je kunt het trouwens ook gebruiken om een div waar dan ook precies te plaatsen.
Je plaats namelijk de linker bovenhoek van je div.
Alleen als je hoogte bv 800 is en je geeft een - van900 ja dan zit je niet goed. Daarom zeg ik ook de helft van je hoogte. en dan kom je nooit boven je scherm uit.
 
Jazeker wel :D
Je zet de hoogte van #wrapper halverwege de hoogte van het scherm. Laten we zeggen dat de hoogte van het scherm 768 px is (heel gangbaar op 'n desktop). Feitelijk is het dan minder, want toolbars en zo gaan eraf, maar we houden 't simpel: 768 px.
De bovenkant van #wrapper komt dus op 768 : 2 = 384 px te staan.
#wrapper is 800 px hoog, dus de helft daarvan omhoog verplaatsen. Dan komt de bovenkant van #wrapper dus 400 px boven het midden op 384 px te staan. Oftewel: er komen 16 px bóven het scherm te staan. Zonder scrollbar.
Op 'n scherm van 800x600 is 't helemaal desastreus. Of bij 'n hoogte van meer dan 800 px. Of bij wat toolbars.
Aan de onderkant gebeurt 't zelfde, maar daar is 't geen probleem omdat er daarbij wél 'n scrollbar verschijnt.
De enige veilige methode zou zijn om eerste met JavaScript de hoogte van het venster te meten en te voorkomen dat 't te hoog wordt neergezet.
Als je me niet gelooft: probeer 't even uit. Met je eigen code. Als je #wrapper 'n border geeft en 't venster kleiner maakt, kijk dan maar wat er aan de bovenkant gebeurt.

Edit: ik vergeet nog de helft. Aan de linkerkant van het scherm speelt precies hetzelfde probleem: wat daar staat is niet meer te bereiken, onzichtbaar, als het buiten het scherm staat. Rechts krijg je wel 'n scrollbar.
 
Laatst bewerkt:
Goeroeboeroe zei:
Jazeker wel :D
Je zet de hoogte van #wrapper halverwege de hoogte van het scherm. Laten we zeggen dat de hoogte van het scherm 768 px is (heel gangbaar op 'n desktop). Feitelijk is het dan minder, want toolbars en zo gaan eraf, maar we houden 't simpel: 768 px.
De bovenkant van #wrapper komt dus op 768 : 2 = 384 px te staan.
#wrapper is 800 px hoog, dus de helft daarvan omhoog verplaatsen. Dan komt de bovenkant van #wrapper dus 400 px boven het midden op 384 px te staan. Oftewel: er komen 16 px bóven het scherm te staan. Zonder scrollbar.
Op 'n scherm van 800x600 is 't helemaal desastreus. Of bij 'n hoogte van meer dan 800 px. Of bij wat toolbars.
Aan de onderkant gebeurt 't zelfde, maar daar is 't geen probleem omdat er daarbij wél 'n scrollbar verschijnt.
De enige veilige methode zou zijn om eerste met JavaScript de hoogte van het venster te meten en te voorkomen dat 't te hoog wordt neergezet.
Als je me niet gelooft: probeer 't even uit. Met je eigen code. Als je #wrapper 'n border geeft en 't venster kleiner maakt, kijk dan maar wat er aan de bovenkant gebeurt.

Edit: ik vergeet nog de helft. Aan de linkerkant van het scherm speelt precies hetzelfde probleem: wat daar staat is niet meer te bereiken, onzichtbaar, als het buiten het scherm staat. Rechts krijg je wel 'n scrollbar.
Klik om te vergroten...

768px? heel gangbaar? dat was in de middeleeuwen van de computer.
800x600? als je daar nog op zit word het echt hoog tijd om een nieuw systeem aan te schaffen.
En dan nog, Als je een beetje experimenteert kom je altijd goed. je hoeft niet de helft te nemen, kan ook minder en dan kun je toch nog centreren.
Je hoeft ook niet de hoogte op negatief te zetten. als je alleen de breedte neemt staat je wrapper wel in het midden maar en de bovenkant komt dan gelijk met de bovenkant van je scherm.
Maar ja als je echt wil muggenziften kan ik nog wel vreemdere dingen bedenken.Feit is dat als je de hoogte niet gebruikt, je met de breedte toch altijd in het midden uitkomt en dan kun je nog altijd een margin-top instellen als je wil. En het is wel cross-browser. Geen hacks nodig altijd goed.
 
Tja, als je over muggenziften begint.. Ik vind het hartstikke goed als mensen reageren, ook als ze nieuw zijn. Fouten maken: geen probleem. Maar geef goede informatie of, als je 'n fout maakt, geef dat dan gewoon toe.

Terzijde: het standaard opgeven van 'n breedte en hoogte van 100% bij html en body is volstrekt overbodig. Dat is alleen nodig in bijzondere gevallen. Het kan bij Internet Explorer 6 tot vreemd gedrag leiden.

Ik vermoedde al dat je niet zo heel veel ervaring had, en dat wordt eigenlijk bevestigd. Het formaat 1024 x 768 is niet de middeleeuwen, dat is MOMENTEEL het meest gebruikte formaat op desktops. Over mobieltjes, ipods, noem maar op, hebben we het dan maar niet. Bij mijn weten is 'n ipod van na de middeleeuwen, maar goed, dat kan ik mis hebben.
Resoluties januari 2010 kun je vinden op o.a.
http://marketshare.hitslink.com/report.aspx?qprid=17
(1024x768 bovenaan met 26,78 %)
en
http://www.w3schools.com/browsers/browsers_display.asp
(1024x768 20%, ook bovenaan).
Bij beide komen hogere resoluties wel meer voor dan 1024x768 als je de hogere bij elkaar optelt.
w3schools wordt, zoals de naam al zegt, bezocht door mensen die sites maken en loopt dus iets voor. marketshare is betrouwbaarder.
Ruim 25% zit dus nog in de middeleeuwen en loopt met de code die je zelf hierboven opgaf een deel van de pagina mis: die is gewoon onzichtbaar.
Nog los dus, nogmaals, van iPod enz.

En dan nog, Als je een beetje experimenteert kom je altijd goed. je hoeft niet de helft te nemen, kan ook minder en dan kun je toch nog centreren.
Klik om te vergroten...
Onzin. Je weet gewoon niet hoe hoog of hoe breed 'n venster is. Dus kun je met ' 'n beetje experimenteren' nooit op elk denkbaar venster het midden bepalen.
Jij kunt dat muggenziften noemen, maar de kern van centreren is nou juist dat het in het midden staat, ongeacht de grootte van het venster.

En dan nog: waarom zou je in hemelsnaam jouw ingewikkelde methode gebruiken als, vrijwel altijd, het simpele margin: 0 auto; voldoende is? Waarbij je bovendien niet het risico loopt dat je 'n deel van de pagina onzichtbaar maakt? En wat werkt op élk formaat scherm in élke browser?

Je hoeft geen negatieve hoogte te geven. Mee eens. Sterker nog: ik raad mensen altijd af om verticaal te centreren. Waarom zou je dat doen? Mensen verwachten de pagina bovenin, en niet ergens halverwege.

Ik ga hier zo uitgebreid op in omdat, helaas, centreren op 'n verkeerde manier tot de meest gemaakte fouten hoort.

Kort samengevat: verticaal centreren: niet doen. Horizontaal centreren: margin 0; auto. Tenzij er redenen zijn waarom dat niet kan.

Edit: ik bedoel natuurliijk iPhone waar iPod staat. Da's de leeftijd, grinnik.
 
Laatst bewerkt:
Body centreren opgelost!!!

Mensen
Ik heb het simpelweg opgelost door het volgende:

In de body:
<body>
<div id="wrapper">

je hele website ----------------

</div>
</body>

In het CSS bestand:
body{
background-image:url(../images/agd.gif);
background-repeat:repeat-x;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size:10pt;
color:#009900;
align:center;
text-align:center;
position:absolute;
}

#wrapper{
background-image:url(../images/agd-wrapper.gif);
position:relative;
width:1007px;
margin:0 auto;
background-color:white;
height:2008px;
width:1007px;
}

ZO simpel kan het zijn toch???

Groeten
Jonathan
 
Ja, dat is de juiste oplossing. En die kan dus (meestal) net zo simpel zijn als jij hebt gedaan: margin: 0 auto;

Nee, wacht even. Ik zie in je body bij nader inzien nog: text-align: center; en align: center;
Die kunnen er allebei uit, is overbodig. Die margin: 0 auto in div#wrapper doet het 'm.
align: center werkt helemaal niet, want dat is (verouderd) html en geen css.
text-align: center zorgt ervoor dat de TEKST, niet de pagina, in het midden komt te staan. Als dat wilt wat je is (alle tekst horizontaal gecentreerd) kun je het laten staan, anders kan het weg.
position: absolute zou ik ook niet in de body zetten. Dat is vrijwel altijd overbodig en kan voor problemen zorgen.
 
Laatst bewerkt:
jonajona25 zei:
Mensen
In het CSS bestand:
body{
background-image:url(../images/agd.gif);
background-repeat:repeat-x;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size:10pt;
color:#009900;
}

#wrapper{
background-image:url(../images/agd-wrapper.gif);
position:relative;
width:1007px;
margin:0 auto;
background-color:white;
height:2008px;
width:1007px;
}
Klik om te vergroten...

Goedemiddag Heren/Dames,


Ik loop tegen dezelfde vraag aan. Heb hierboven even de post van Jonathan geciteerd en aangepast a.d.h.v. Goeroeboeroe zijn laatste tips. Heb ik dit zo juist samengevat?

Die breedte van 1007 pixels, gaat dat om de breedte van de afbeelding of website content binnen de wrapper? En wat is het doel van de hoogte van 2008px?


Groet,

M4.
 
Hallo en welkom op het forum,

Je kunt eigenlijk beter even 'n nieuwe vraag maken, want deze staat op opgelost, dus veel mensen zullen hier niet meer kijken.
Maar misschien is dit afdoende:
Waarom er 'n hoogte staat, weet ik niet. Dat kan 'n nut hebben, maar heel erg vaak is 't volkomen overbodig. Vooral omdat standaard toch alles wordt getoond, ongeacht de hoogte die je opgeeft.

Om horizontaal te centreren zet je álles (header, footer, je tante en de kat, kortom: álles) binnen 'n div#wrapper (of hoe je 'm ook wilt noemen).
Die moet breed genoeg zijn om de inhoud te kunnen bevatten. En dan bij div#wrapper margin: 0 auto; toevoegen in de css, da's alles. Meestal is dit voldoende.

div#wrapper moet breed genoeg zijn. Als ik div#wrapper 800 px breed maak en centreer, komt die netjes in het midden. Als ik er dan 'n afbeelding van 1000 px breed in zet, komt de linkerkant van de afbeelding 400 px links van het midden te staan, precies waar de linkerkant van div#wrapper staat. Maar rechts van het midden komen dan nog 600 px van de afbeelding te staan, omdat 'n computer eigenlijk vrij stom is en niet begrijpt dat ook die afbeelding gecentreerd moet worden.
Jij hebt opdracht gegeven div#wrapper te centreren, en dat doet het domme ding trouwhartig. Dat je de inhoud van div#wrapper natuurlijk ook gecentreerd wilt hebben, begrijpt hij niet. En omdat standaard iets wat niet past toch wordt weergegeven, wordt de afbeelding keurig te veel naar rechts weergegeven.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan