[JavaScript] Layer Centreren
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
44 reacties op '[JavaScript] Layer Centreren'
0 
-0 
-0 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...
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...
0 -0
-0 http://www.eliteavengers.org/voorbeeld_404_error.niks
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).
Code (php)
1
2
3
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>
<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).
0 -0
-0 Alle credit gaat naar Kalle, maar zo centreer je met CSS alles horizontaal en verticaal, werkend op elke browser bij elke resolutie:
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
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 */
}
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)
1
2
3
4
2
3
4
<table class="middle"><tr><td>
<div shit hier>
</div>
</td></tr></table>
<div shit hier>
</div>
</td></tr></table>
0 -0
-0 @phperik
Dankje, daarna heb ik um wat beter geschreven:
edit:
CSS 3 valid, no warnings.
Dankje, daarna heb ik um wat beter geschreven:
Code (php)
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
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>
<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.
0 -0
-0 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.
0 -0
-0 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
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
0 -0
-0 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'.
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'.
0 -0
-0 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.
0 -0
-0 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!
0 -0
-0 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.
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.
0 -0
-0 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]
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]
0 -0
-0 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.
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.
0 -0
-0 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
http://intensivstation.ch/files/templates/temp11.html
0 -0
-0 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.
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.
0 -0
-0 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.
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.
0 -0
-0 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...
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...
0 -0
-0 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.
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.
0 -0
-0 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.
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.
Om te reageren heb je een account nodig en je moet ingelogd zijn.
- Details
Door:
Peter Somhorst- 7 jaar geleden
- 1.437 x bekeken
- PHP scripts opties
- PHP algemeen
- Nieuwste PHP scripts
- PHP script toevoegen
PHP hulp
0 seconden vanaf nu