[JavaScript] Layer Centreren
Door Peter Somhorst, 22 jaar geleden, 7.653x 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
Er zijn 44 reacties op 'Javascript layer centreren'
0 
-0 
-0
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?
En wat nou als ik JS uit heb staan?
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
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!
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!
0 -0
-0
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
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
0 -0
-0
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...
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...
0 -0
-0
nog eentje dan: deze content heeft een vast afmeting. maar wat als de inhoud langer/korter is? gaat et dan nog goed?
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
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!
0 -0
-0
kijk.. je maakt niks op met tables..
en javascript is al HELEMAAL niet om op te maken..!
en javascript is al HELEMAAL niet om op te maken..!
0 -0
-0
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!
ik stop nu met reageren. zinloos om hier een discussie te voeren over tables/js/css! have fun scripting!
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
@lasse
ja dan zeg je dat de div zich moet gedragen als een tabel, dat is het zelfde.
display: table-cell;
ja dan zeg je dat de div zich moet gedragen als een tabel, dat is het zelfde.
display: table-cell;
0 -0
-0
Je kunt het toch ook gewoon zo doen:
Code (php)
1
<center><div width="200px" hight="200px" (etc... :p)></div></center>
0 -0
-0
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.
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.
0 -0
-0
0 -0
-0
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)
Nadeel van die manier is dan weer dat je blijkbaar een vaste hoogte moet aanhouden (wat waarschijnlijk alleen maar zal voorkomen)
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
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.
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
ik zoek een stukje css om enkel horizontaal een div te centreren in elke browser
die ik nu hebt centreerd niet in internet explorer
die ik nu hebt centreerd niet in internet explorer
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="content"></div>
#content {
margin: 0 auto;
width: 75%;
min-width: 600px;
text-align: center;
}
#content {
margin: 0 auto;
width: 75%;
min-width: 600px;
text-align: center;
}
0 -0
-0
Code (php)
1
2
3
4
5
6
7
8
9
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*/
}
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*/
}
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
0 -0
-0
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.
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.
PHP hulp
0 seconden vanaf nu