jonajona25
Gebruiker
- Lid geworden
- 15 okt 2009
- Berichten
- 41
Bekijk de onderstaande video om te zien hoe je onze site als een web app op je startscherm installeert.
Opmerking: Deze functie is mogelijk niet beschikbaar in sommige browsers.
Hi,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
margin: 0 auto;
div#wrapper {widht: 800px; /* of welke breedte dan ook */, margin: 0 auto;}
@che
Die oplossing werkt wel, maar is 99 van de 100 keer veel te ingewikkeld. Normaal genomen kun je volstaan met
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.Code:div#wrapper {widht: 800px; /* of welke breedte dan ook */, margin: 0 auto;}
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.
Jazeker wel
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.
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.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.
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;
}
We gebruiken essentiële cookies om deze site te laten werken, en optionele cookies om de ervaring te verbeteren.