Website verticaal centreren

  • Onderwerp starter Onderwerp starter roben
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

roben

Gebruiker
Lid geworden
4 dec 2008
Berichten
65
Hallo, ik ben op zoek naar een manier om mijn website verticaal te centreren voor grotere schermen.

De witruimte moet aan de bovenkant net zoveel zijn als aan de onderkant.

Als het een klein beeldscherm betreft, dan moet er geen witruimte zichbaar zijn.

iemand een oplossing?

Alvast Bedankt!
 
align is voor horizontaal bedoeld en wordt al jaren afgeraden, dus dat zou ik niet gebruiken. Werkt ook niet goed in alle browsers.
valign is ook verouderd en wordt ook al jaren afgeraden.

Het kan wel, maar ik weet niet op je je daar populair mee maakt. Mensen met 'n groter scherm zullen vaak de voorkeur geven aan tekst enz. aan de bovenkant, omdat ze dat nou eenmaal gewend zijn.
Als je het toch wilt: het is ingewikkelder dan horizontaal centreren.

Als de hoogte van de pagina bekend is, is het nog relatief simpel:
Code:
div#content {position: absolute; top: 50%; height: 600px; margin-top: -300px;}
Werkt in alle browsers.
div#content is 'n div waarbinnen de hele pagina staat. Die zet je halverwege de hoogte van het scherm. Als de div dan 600 px hoog is, plaats je hem weer de helft daarvan terug naar boven. Dan staat hij altijd verticaal gecentreerd.
600 px en 300 px natuurlijk aanpassen aan de grootte van jouw pagina.

Als de hoogte niet bekend is, dan wordt het lastiger. Je kunt dan div#content als cel in 'n tabel weergeven. Omdat het hier maar om 1 cel in 1 tabel gaat levert dat geen problemen op voor toegankelijkheid en zoekmachines.
Alleen kunnen Internet Explorer 6 en 7 hier niet mee uit de voeten. Dat maakt de oplossing nogal gecompliceerd. Ik heb hier 'n handleiding staan:
http://css-voorbeelden.nl/positioneren/verticaal/positioneren-007.html
Als je de hele handleiding niet wilt lezen kun je de hele handel downloaden en de code bekijken. Maar in dit geval is het denk ik handig om even de relevante delen van de handleiding te lezen.

Succes!
 
Ehm het ligt eraan hoe je je site hebt gebouwd maar waarom niet gewoon makkelijk doen (vind ik) en zeggen in css op je div's/tabellen:

HTML:
left:10%; right:10%; bottom:10%; top:10%; height:80%; width:80%;

Positioneert je div/tabel helemaal in het midden natuurlijk kan je left en right weghalen omdat dat niet is wat je vroeg.
 
Laatst bewerkt:
Dat is wel 'n leuk idee, en strikt in theorie is de site dan inderdaad verticaal gecentreerd. Alleen: de div of wat dan ook is gecentreerd, maar als de inhoud minder hoog is dan de div, dan staat de inhoud nog steeds niet in het midden. En dat is wat je ziet...
 
begin van css
html, body{height:100%; width:100%;}
en dan wat goeroeboeroe zegt dan moet het in elke browser goed zijn
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan