[JavaScript] Layer Centreren

Door Peter Somhorst, 16 jaar geleden, 4.867x bekeken

Ik heb verschillende constructies gezien om een layer (DIV, SPAN) te laten centreren, zowel horizontaal als verticaal, op een pagina. Aangezien vele van die constructies ingewikkeld dan wel ontoereikend zijn, heb ik een JavaScript gemaakt die in alle browsers een layer kan centreren, ongeacht de grootte.
Het werkt heel simpel: hij haalt de breedte van het scherm en van de layer, trekt die van elkaar af (zodat de ruimte buiten de layer overblijft) en deelt die door twee (zodat je de ruimte aan 1 kant overhoudt). Dit zowel voor verticaal als horizontaal...

Voorbeeld: http://peter.somhorst.net/test/center/index.php

Gesponsorde koppelingen

PHP script bestanden

  1. javascript-layer-centreren

 

Er zijn 44 reacties op 'Javascript layer centreren'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
- -
- -
16 jaar geleden
 
0 +1 -0 -1
Oja, ze waren te uitgebreid en te ingewikkeld, dus schrijf je maar een javascript van 74 regels...

En wat nou als ik JS uit heb staan?
Peter Somhorst
Peter Somhorst
16 jaar geleden
 
0 +1 -0 -1
74 regels vind ik best meevallen... bovendien is de helft witregel, zodat het wat overzichtelijk wordt! en je mag em gebruiken, graag of helemaal niet! (of: verzin zelf iets met minder regels, dat wel browseroverkoepelend is, en net zo goed werkt als deze, anders: geen commentaar aub)

en als je JS hebt uitstaan moet je dit soort dingen niet gaan proberen, maar ook niet naar een normale website gaan, omdat je dan gek wordt! bovendien zet slechts een percentage of wat z'n js uit, dus...
Harmen
Harmen
16 jaar geleden
 
0 +1 -0 -1
waarom niet gewoon CSS?
Peter Somhorst
Peter Somhorst
16 jaar geleden
 
0 +1 -0 -1
probeer het maar!
tip: zoiets als vertical-align werkt niet zomaar even... je kunt met tabellen werken, maar zoals bekend zijn die er niet voor de opmaak! dus: alleen div's, en css... veel plezier!
Katjan
katjan
16 jaar geleden
 
0 +1 -0 -1
als je een tabel aanmaakt, en daar zet je de css is, heb je in 2 regels een fix, die perfect werkt..!!

en, tables zijn niet voor opmaak, dat doe ik ook niet, maak er slechts een container van.. en js is ook niet voor opmaak;)

~huib
Harmen
Harmen
16 jaar geleden
 
0 +1 -0 -1
Peter Somhorst
Peter Somhorst
16 jaar geleden
 
0 +1 -0 -1
en als je het scherm kleiner maakt dan het plaatje?
bovendien is een div van 1px hoog een beetje een rare oplossing, doe nog wel eens voor problemen zou kunnen gaan zorgen als je een website maakt...
Katjan
katjan
16 jaar geleden
 
0 +1 -0 -1
scrollbar;)
Peter Somhorst
Peter Somhorst
16 jaar geleden
 
0 +1 -0 -1
nog eentje dan: deze content heeft een vast afmeting. maar wat als de inhoud langer/korter is? gaat et dan nog goed?
Zero Dead
Zero Dead
16 jaar geleden
 
0 +1 -0 -1
http://www.eliteavengers.org/voorbeeld_404_error.niks

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<table width="100%" height="100%">
<tr><td valign="middle" align="center"><img src="http://www.eliteavengers.org/images/404error.jpg"></td></tr>
</table>


Dat is toch niet zo moeilijk? Enige nadeel is (volgens sommige mensen) dat je een table nodig hebt, maar zelf vind ik dit juist een voordeel:).

Werkt in IE 6 en FF(nieuwste versie).
PHP erik
PHP erik
16 jaar geleden
 
0 +1 -0 -1
Alle credit gaat naar Kalle, maar zo centreer je met CSS alles horizontaal en verticaal, werkend op elke browser bij elke resolutie:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
html, body, table.middle {
    margin: 0px;
    padding: 0px;
    text-align: center;
    height: 100%;
}

table.middle {
    margin: 0 auto;
    vertical-align: middle;
    text-align: left;
    width: 960px; /* breedte van pagina */
}


HTML:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<table class="middle"><tr><td>
<div shit hier>
</div>
</td></tr></table>
Peter Somhorst
Peter Somhorst
16 jaar geleden
 
0 +1 -0 -1
zoals ik al zei: tables zijn er niet om op te maken! dus daar zie ik zo veel mogelijk van af! ik zet alles zoveel mogelijk in divs! de table-manier werkt misschien, maar het is absoluut niet de beste manier!
Katjan
katjan
16 jaar geleden
 
0 +1 -0 -1
kijk.. je maakt niks op met tables..
en javascript is al HELEMAAL niet om op te maken..!
Peter Somhorst
Peter Somhorst
16 jaar geleden
 
0 +1 -0 -1
javascript is er om websites dynamisch te maken. Volgens mij is resizen (en uberhaupt laden in een pagina) al dynamisch, dus kun je JS gebruiken!

ik stop nu met reageren. zinloos om hier een discussie te voeren over tables/js/css! have fun scripting!
Kalle P
Kalle P
16 jaar geleden
 
0 +1 -0 -1
@phperik

Dankje, daarna heb ik um wat beter geschreven:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
html,body,table.middle {
    text-align:center;
    height:100%;
    width:960px;
    margin: 0 auto;
    vertical-align:middle;
    padding: 0;
    color: #000;
    background-color: #fff;    
    }
div.container {
    height:480px;
    background-color: #e4a;
    color: #000;
    text-align:left;
    }
-->
</style>
</head>
<body>

    <table class="middle"><tr><td>
        <div class="container">
        </div>
    </td></tr></table>
    
</body>
</html>


edit:
CSS 3 valid, no warnings.
Kalle P
Kalle P
16 jaar geleden
 
0 +1 -0 -1
Ik zie echt niet wat er mis is om een table wat in te gooien. Zit ik er een plaatje in ofzo? Het enige wat ik erin doe is er een height en width aangeven en het verticaal te centeren (principe). In principe kan je die beide op 100% zetten. Enja daarna staat alles in een table, so? De div daarna komt alles in.


16 jaar geleden
 
0 +1 -0 -1
Ik gebruik JavaScript ook voor de tweede resize van dit soort pagina's.
Omdat IE namelijk er niet altijd goed mee omspringt.

Of te wel eerst met CSS resizen en vervolgens met JavaScript overdoen.

Maar deze code is echt te lang; Deze is met 15 regels
Jelmer -
Jelmer -
16 jaar geleden
 
0 +1 -0 -1
Het nadeel van Javascript gebruiken hier is dat deze pas wordt toegepast nadat de pagina helemaal klaar is met laden. Heb je dus een enorme pagina, al is de data die geladen wordt niet eens zichtbaar, pas aan het einde zal de pagina naar het midden verspringen. In zo'n geval raad ik toch echt gewoon css met margin: 0 auto; aan, aangezien verticaal centreren waarschijnlijk niet van toepassing zal zijn.

Verticaal uitlijnen is eigenlijk alleen relevant waneer je weinig informatie op een scherm wilt weergeven, zo weinig dat je niet eens de hoogte van het scherm gebruikt. Kans dat dat een enorme laadtijd heeft is klein, dus dan zou het wel kunnen.... maar doe het dan wel onobstructive, oftewel met Javascript events zodat je gewoon een javascript-bestandje kan includen of weglaten zonder iets aan de pagina aan te passen. Ook wel bekend als window.addEventListener('load', centerLayer, false); en window.attachEvent('load', centerLayer); (voor IE die laatste) en nog eentje voor 'resize'.
Kalle P
Kalle P
16 jaar geleden
 
0 +1 -0 -1
Quote:
Het nadeel van Javascript gebruiken hier is dat deze pas wordt toegepast nadat de pagina helemaal klaar is met laden.


Dankje Jelmer. Geen JS, en is css met table bevestigd.

Daarnaast is het verschil in lengte ook wat: 50 à 60 (zonder witregel) tegenover 10. --> die div.container is al een vb namelijk.
Lasse
Lasse
16 jaar geleden
 
0 +1 -0 -1
En dit waar Jan Koehoorn me laatst attent op maakte is een manier van verticaal centreren zonder vaste afmetingen met css, met een stuk minder regels code!
Marien xD
Marien xD
16 jaar geleden
 
0 +1 -0 -1
Met andere oplossingen heb je tevens niet dat bij het laden de div verspringt omdat deze gepositioneerd word. Dit heb je wel met deze oplossing.

Dit is de meest onnuttige omweg die ik gezien heb. Voor zoiets gebruik je geen javascript. En voor het discussie verhaal: komt eerst maar eens met echte goede bewijzen dat het beter is.
Kalle P
Kalle P
16 jaar geleden
 
0 +1 -0 -1
@lasse
ja dan zeg je dat de div zich moet gedragen als een tabel, dat is het zelfde.
display: table-cell;
Nieko
Nieko
16 jaar geleden
 
0 +1 -0 -1
Je kunt het toch ook gewoon zo doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<center><div width="200px" hight="200px" (etc... :p)></div></center>
Kalle P
Kalle P
16 jaar geleden
 
0 +1 -0 -1
LOL

Voor een horizontale center kan dat idd ja, buiten dat het niet valid is, maar waar het hier omgaat is dat het zowel horizontaal als verticaal gecenterd staat/

Met <center> centreer je niet verticaal.
Jan Koehoorn
Jan Koehoorn
16 jaar geleden
 
0 +1 -0 -1
Puur CSS, zonder JavaScript en tabellen:

centering divs

getest en werkt in IE, FF en Opera.
Jelmer -
Jelmer -
16 jaar geleden
 
0 +1 -0 -1
Ligt het aan mij of ben je daar vergeten je img-tag af te sluiten ;)

Nadeel van die manier is dan weer dat je blijkbaar een vaste hoogte moet aanhouden (wat waarschijnlijk alleen maar zal voorkomen)
Jan Koehoorn
Jan Koehoorn
16 jaar geleden
 
0 +1 -0 -1
Het zal door het plaatje komen, Jelmer ;-)
Legolas
Legolas
16 jaar geleden
 
0 +1 -0 -1
En dan nog een alt attribuut en t is perfect =P
Kalle P
Kalle P
16 jaar geleden
 
0 +1 -0 -1
Het nadeel van negatieve margins is dat wanneer je een groot oppervlakte wilt centreren en mensen hebben een lage resolutie dat ze dan de buitenkanten wegvallen. Kortom bij grote breedtes en hoogtes is de manier van Jan af te raden, anderszijds gebruik ik um ook

En ff over dat wegvallen van dat plaatje, dat zou erg jammer zijn of is dat al gebeurd dat we het hoofd niet zien. Of het is een plork [betekenis: http://nl.wikipedia.org/wiki/Militair_jargon#P]
Jan Koehoorn
Jan Koehoorn
16 jaar geleden
 
0 +1 -0 -1
Zullen we ook maar een title doen, voor FF?
PHP erik
PHP erik
16 jaar geleden
 
0 +1 -0 -1
De oplossing van Jan is inderdaad in de meeste gevallen onbruikbaar, omdat je dan niet rekening houdt met geresizede windows en lage resoluties. Want het is wel een heel bekende oplossing inderdaad, maar dus niet erg gebruiksvriendelijk als je even doortest.
Jelle Posthuma
Jelle Posthuma
16 jaar geleden
 
0 +1 -0 -1
Ik vind die poster van het script wel wat sneu...
Hij kan niet tegen jullie gelijk, en wordt ie boos xD.
In elke reactie is een tegenantwoord te vinden met een uitroepteken erbij...
Jullie komen tenminste met alternatieve suggesties, dan moet ie maar niet zo'n nutteloos en lang script posten, dit had ie kunnen verwachten dat er kleinere alternatieve scripts gepost zouden kunnen worden.
Hipska BE
Hipska BE
16 jaar geleden
 
0 +1 -0 -1
ik zoek een stukje css om enkel horizontaal een div te centreren in elke browser

die ik nu hebt centreerd niet in internet explorer
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<div id="content"></div>
#content {
    margin: 0 auto;
    width: 75%;
    min-width: 600px;
    text-align: center;
}
Kalle P
Kalle P
16 jaar geleden
 
0 +1 -0 -1
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
html,body {
    text-align:center;
}
#content {
    margin: 0 auto;
    min-width: 600px;  /*min-width werkt niet in IE overigens*/
    background-color: #000;
    text-align: left;  /*terug zetten naar default*/
}
Pim Vernooij
Pim Vernooij
16 jaar geleden
 
0 +1 -0 -1
De volgende link is een pagina die zowel horizontaal als verticaal gecentreerd is, zonder tabellen, en zonder javascript! Ik snap niet waarom jullie zo moeilijk doen met javascript en tabellen :-P

http://intensivstation.ch/files/templates/temp11.html
Kalle P
Kalle P
16 jaar geleden
 
0 +1 -0 -1
Als je alle reacties had gelezen, had je gezien dat jan precies het zelfde had gepost. Negatieve margins....
Kijk als ze zo klein als op die site zijn, maakt dat niet uit, maar wanneer je een site x, y wilt centreren en je zet height bijvoorbeeld op 700, dan zullen mensen met schermbreedte 800x600 niet goed zicht hebben. Een groot deel valt weg wanneer er scrollbalken zijn.

kalle.
Pim Vernooij
Pim Vernooij
16 jaar geleden
 
0 +1 -0 -1
Ow, daar had ik inderdaad overheen gelezen.
Je hebt gelijk wat betreft mensen met kleinere schermen. Daarom moet je ook goed nadenken voordat je een site verticaal gaat centreren. Gewoon niet hoger maken dan 5-600 pixels.

Ik vind verticaal gecentreerde sites sowieso niet vaak mooi. Bij actiesites kan het, maar bij normale sites vind ik een vaste marge van de bovenkant veel mooier.
Koos-Bert
Koos-Bert
16 jaar geleden
 
0 +1 -0 -1
Even een gek vraagje, maar waarom zou je moeilijk doen als het ook makkelijk kan met een tabel. Je moet je niet aan de regels houden, maar je moet aan de makkelijkheid houden.

Ik denk als je in een gewoon bedrijf werkte en je zou hier een uur mee bezig zijn dat je werkgever zou flippen omdat het met tabellen in 1 minuut kan.

Een groot tijdsverschil. De meeste internet bureau's werken echt niet met dit soort achelijke regels. Je moet gebruiken wat je makkelijk vind en wat ook nog is door alle browsers word weergegeven en niet aan zo'n achtelijk regeltje houden...
Jelmer -
Jelmer -
16 jaar geleden
 
0 +1 -0 -1
Dat komt omdat jullie nu nog tabellen gewend zijn en de andere methode nooit gebruiken. Ik kijk er niet eens meer naar om. Ik doe het margin-truucje en het werkt gewoon. Klaar.

Voordeel (maar dit deel is al bekend) is dat ik alleen mijn CSS hoef aan te passen voor een complete layout-verandering, en jij al je html-pagina's om al die tabellen er weer uit te slopen.

... maar ik ben dan ook maar een eenmansbedrijfje dat het doet voor de fun, niet voor de naam of het geld.
Andreas Warnaar
Andreas Warnaar
16 jaar geleden
 
0 +1 -0 -1
How op over dat java tables enz

www.cssplay.co.uk is het antwoord!!!!!!

Ik hou van CSS..;)
Majid Ahddin
Majid Ahddin
16 jaar geleden
 
0 +1 -0 -1
Quote:
En wat nou als ik JS uit heb staan?

en wat nou als ik css uit heb staan? :)
het is idd niet slim in JS, zonde, want hier is css zo leuk voor, maar je kan niet uitgaan van absoluut 0 meewerking.
de gebruiker moet er wel IETS voor doen om iets te kunnen doen he.
Kaydie
kaydie
16 jaar geleden
 
0 +1 -0 -1
De truc is om de css een handje te helpen waar het te kort schiet, maar het niet helemaal afhankelijk van het script te laten worden:

methode 1
methode 2
Tom Gerritse
Tom Gerritse
15 jaar geleden
 
0 +1 -0 -1
Ik zie dat het javascriptje al een flinke tijd geleden is gepost door Peter maar ik wilde toch nog even een vraagje betreffende dit onderwerp stellen.

Ik heb na de
<div style=" width:800px;
border:0px solid black;
position:absolute;
height:590px;"
id="div1">

het volgende staan:

<body link="#0000ff" vlink="#ff0000" alink="#0000ff" text="#000000" style="background: #ffffff; height:590px;">
<center><div style="position:relative;width:800px;">

Gevolgt door de complete inhoud van de pagina (<div style=" etc. etc.)

Ik eindig vervolgens met:

</div></center>
</body>
</html>

Dus mocht iemand JS uit hebben staan dan wordt de pagina in elk geval nog verticaal gecentreerd... lijkt mij. Heb ik echter niet uitgetest.... m.n. omdat ik even niet zo snel kan ontdekken hoe ik JS tijdelijk uit moet zetten.

Ik heb het uitgeprobeerd met IE en Firefox en het werkt perfect allemaal.
Mijn vraag is dan ook of ik iets over het hoofd heb gezien? Moet haast wel want zo simpel kan het niet zijn lijkt mij :)

Bij deze een bedankje aan Peter! Ik was al een tijdje op zoek naar een Javascriptje betreffende deze functie.
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Matshofman
matshofman
14 jaar geleden
 

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. javascript-layer-centreren

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.