Verticaal centreren DIV lukt niet

donderdag 2 februari 2006 21:11

Ik denk dat je eens een kijkje moet nemen in dit topic en wel naar deze post. Die post is van mij

.
In ieder geval: als je die code in een html-bestand plakt, zul je zien dat de container div zowel horizontaal als verticaal wordt gecentreerd. Het verticaal centreren komt door de volgende code:

code:

1
2
3

height: 469px;
top: 50%;
margin-top: -234px; /*helft van de hoogte van de div*/

Een post van crisp in dat topic vertelt dat het absoluut positioneren van divjes niet een heel goede manier is. Uiteindelijk heb ik vrijwel alle divjes relatief gepositioneerd waarbij ik wel alle margins en paddings moest aanpassen. Uiteindelijk heb ik dat gebruikt voor deze site. Ik hoop dat dit je helpen kan.

edit:
owja, de code in de body bevat twee keer de div van de klasse 'container' waarbij de tweede dus overbodig is

[ Voor 7% gewijzigd door DelTorro op 02-02-2006 20:57 ]

Acties:

donderdag 2 februari 2006 21:54

Hm heeel toevallig stuit ik net op dit probleem en wil ik zelf ook geen table's meer gebruiken.

Alleen de oplossing van DelTorro werkt hier niet. Ik weet niet hoe het bij ralpje zit?

They who buy the dip, deserves the rip.

Acties:

cyberstalker

Eersteklas beunhaas

Danjel schreef op donderdag 02 februari 2006 @ 21:11:
Hm heeel toevallig stuit ik net op dit probleem en wil ik zelf ook geen table's meer gebruiken.

Alleen de oplossing van DelTorro werkt hier niet. Ik weet niet hoe het bij ralpje zit?

Die oplossing zou gewoon moeten werken hoor. Heb je een code-voorbeeldje?

Ik ontken het bestaan van IE.

donderdag 2 februari 2006 22:31

Acties:

ralpje

Deugpopje

Topicstarter

@ Danjel: Ben vanavond weg geweest en ga nu m'n bed in, want morgen weer vroeg dag. Ga morgen m'n bevindingen even posten. Vergeet je niet de waardes aan te passen aan de formaten van je container div?

Freelance (Microsoft) Cloud Consultant & Microsoft Certified Trainer

vrijdag 3 februari 2006 00:41

Acties:

vrijdag 3 februari 2006 01:44

De code van de body moet dus zijn:

code:

<body>
    <div class="container">
        <div class="top"></div>
        <div class="kop"></div>
        <div class="contentleft"></div>
        <div class="content"></div>
        <div class="contact"></div>
        <div class="contentonder"></div>
    </div>
</body>

Acties:

vrijdag 3 februari 2006 01:51

ralpje schreef op donderdag 02 februari 2006 @ 22:31:
@ Danjel: Ben vanavond weg geweest en ga nu m'n bed in, want morgen weer vroeg dag. Ga morgen m'n bevindingen even posten. Vergeet je niet de waardes aan te passen aan de formaten van je container div?

M'n code is vrijwel hetzelfde (beetje anders maar technisch hetzelfde), En de rest heb ik goed aangepast... Ik zal morgen dan maar even mijn stukje code hier posten (iets met vroeg uit bed en teveel doen vandaag

).

edit:

@ DelTorro, hoe de fuck weet jij dat ik 6 div's in gebruik heb met vrijwel dezelfde classes?
Iets andere volgorde maar oke.... Helderziend ofzo?

[ Voor 18% gewijzigd door Danjel op 03-02-2006 01:47 ]

They who buy the dip, deserves the rip.

Acties:

disjfa

be

Danjel schreef op vrijdag 03 februari 2006 @ 01:44:

edit:

@ DelTorro, hoe de fuck weet jij dat ik 6 div's in gebruik heb met vrijwel dezelfde classes?
Iets andere volgorde maar oke.... Helderziend ofzo?

Nee dat heet nu beginner. Als je html hebt geleerd en je een keer hoorde dat tables niet meer in zijn ga je zo aan de gang.

Alleen is dat even slecht als met alleen tables werken dus dan kan je makkelijker gewoon met tables blijven werken. Als je er iets aan wilt doen dan moet je op semantiek zoeken.

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 3 februari 2006 09:18

Acties:

BtM909

Watch out Guys...

ralpje schreef op donderdag 02 februari 2006 @ 20:25:
En aan welk topic uit die results denk je dan? De meeste topics die gaan over het verticaal centreren van die container div komen toch uit op het centreren doormiddel van een tabel óm die divjes heen.... En dat wil nou net niet.

Wordt hier gebruikt gemaakt van een table

[rml][ CSS/XHTML] Vertical-align[/rml]

http://annevankesteren.nl/test/templates/center-hv

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 3 februari 2006 09:43

Acties:

ralpje

Deugpopje

Topicstarter

Kijk, dat geeft me een zetje in de goede richting. Door de uitleg op http://zoefff.gotdns.com/divcenter.htm viel het kwartje.
Een stukje code met de bijbehorende gedachtegang zegt me altijd net iets meer dan alléén de code.

Freelance (Microsoft) Cloud Consultant & Microsoft Certified Trainer

vrijdag 3 februari 2006 11:28

Acties:

BtM909

Watch out Guys...

Maar nogmaals dat haal ik dus uit de search

Gelukkig is het opgelost

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 3 februari 2006 12:25

Acties:

vrijdag 3 februari 2006 12:43

Met de link van ralpje is het mij ook gelukt. Dont ask waarom hij eerst niet werkte

They who buy the dip, deserves the rip.

Acties:

Pendaco

Vogon Poetry FTW!

ralpje schreef op vrijdag 03 februari 2006 @ 09:43:
Kijk, dat geeft me een zetje in de goede richting. Door de uitleg op http://zoefff.gotdns.com/divcenter.htm viel het kwartje.
Een stukje code met de bijbehorende gedachtegang zegt me altijd net iets meer dan alléén de code.

Wat een vieze oplossing zeg.

Je kunt m gewoon relatief positioneren.
de left & right margins op auto zetten om m horizontaal te centreren

Dan idd voor de top margin de helft van de hoogte van bijv je container pakken; 600 wordt dan 300
en de negatieve waarde als top margin gebruiken; -300

code ter voorbeeldje;

code:

body,html {
    height:100%;
    padding:0;
    margin:0;
}

#container { 
height: 600px;
width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: -300px;
top:50%;
position: relative;
}

dit zou gewoon goed moeten werken

[ Voor 21% gewijzigd door Pendaco op 03-02-2006 12:55 ]

vrijdag 3 februari 2006 12:54

Acties:

vrijdag 3 februari 2006 14:53

Splitting the thaum.

Verticaal gecentreerd, horizontaal gecentreerd en absoluut horizontaal gecentreerd. Ze zijn wat oud, heb ze alleen maar vluchtig gecontroleerd.

[ Voor 58% gewijzigd door JHS op 03-02-2006 12:55 ]

DM!

Acties:

vrijdag 3 februari 2006 14:58

Pendaco schreef op vrijdag 03 februari 2006 @ 12:43:
[...]

Wat een vieze oplossing zeg.

Je kunt m gewoon relatief positioneren.
de left & right margins op auto zetten om m horizontaal te centreren

Dan idd voor de top margin de helft van de hoogte van bijv je container pakken; 600 wordt dan 300
en de negatieve waarde als top margin gebruiken; -300

Dit laatste (met die negatieve top-margin waarde) werkt helaas niet voor relatief gepositioneerde div's

Acties:

Pendaco

Vogon Poetry FTW!

DelTorro schreef op vrijdag 03 februari 2006 @ 14:53:
[...]
Dit laatste (met die negatieve top-margin waarde) werkt helaas niet voor relatief gepositioneerde div's

jawel dat moet werken, ik gebruik t zelf ook op deze manier

maar vergeet de body regel niet toe te voegen in je css

[ Voor 11% gewijzigd door Pendaco op 03-02-2006 14:59 ]

vrijdag 3 februari 2006 16:05

Acties:

Verwijderd

word @ div container ipv table.. tables zijn niet bedoeld voor het localiseren van content

vrijdag 3 februari 2006 17:16

Acties:

maandag 6 februari 2006 17:09

Pendaco schreef op vrijdag 03 februari 2006 @ 14:58:
[...]

jawel dat moet werken, ik gebruik t zelf ook op deze manier

maar vergeet de body regel niet toe te voegen in je css

Je hebt gelijk, het werkt inderdaad! Ik was de code uit de body vergeten

Acties:

maandag 6 februari 2006 17:35

disjfa schreef op vrijdag 03 februari 2006 @ 01:51:
[...]

Nee dat heet nu beginner. Als je html hebt geleerd en je een keer hoorde dat tables niet meer in zijn ga je zo aan de gang.

Alleen is dat even slecht als met alleen tables werken dus dan kan je makkelijker gewoon met tables blijven werken. Als je er iets aan wilt doen dan moet je op semantiek zoeken.

Semantiek heeft dus niks met het aantal div's te maken dat ik gebruik maar puur de benaming (class) ervan. Of bedoel je dit niet?

They who buy the dip, deserves the rip.

Acties:

maandag 6 februari 2006 17:38

Splitting the thaum.

Danjel schreef op maandag 06 februari 2006 @ 17:09:
[...] Semantiek heeft dus niks met het aantal div's te maken dat ik gebruik maar puur de benaming (class) ervan. Of bedoel je dit niet?

Een (over)grote hoeveelheid divjes duidt meestal op een gebrek aan semantiek. In HTML bestaan een hoop elementen, zoals hx, strong, em, p, ul, li, etc, die iets vertellen over de inhoud ervan. Computers kunnen die inhoud dan beter "begrijpen" / analyseren maar vooral beter in relatie tot elkaar plaatsen. De benamingen van divjes, classes en ids zo je wil, zijn daarvoor veel minder bruikbaar. De enige manier waarop die wat over de inhoud zeggen op een voor een computer te begrijpen manier is met gebruik van "microformats", maar die zijn maar beperkt gestandariseerd, vastgelegd en geïmplementeerd.

DM!

Acties:

maandag 6 februari 2006 18:22

Dus als ik een (over) grote hoevheelheid divjes gebruik dan is meteen de semantiek slecht? Ik zie het verband van die 2 niet echt met elkaar namelijk.

[ Voor 72% gewijzigd door Danjel op 06-02-2006 17:39 . Reden: Quote weggehaalt ]

They who buy the dip, deserves the rip.

Acties:

maandag 6 februari 2006 18:54

Splitting the thaum.

Danjel: "Een (over)grote hoeveelheid divjes duidt meestal op een gebrek aan semantiek." Ik zeg niet dat het "meteen zo is", maar dat erop duidt. En het verband zit 'em erin dat op de meeste sites met veel divjes er vaak zinnigere elementen zijn te bedenken voor in de plaats van die divjes.

DM!

Acties:

maandag 6 februari 2006 19:27

Ah oke, nu word het al wat duidelijker.
Danke

Ik ben dan alleen nog benieuwd wat die elementen dan zijn om het aantal divjes te reduceren.

[ Voor 50% gewijzigd door Danjel op 06-02-2006 18:54 ]

They who buy the dip, deserves the rip.

Acties:

zaterdag 18 februari 2006 16:00

Splitting the thaum.

Zoals ik al eerder zei: elementen als p, hx, (u/o)l, table (!).

[ Voor 3% gewijzigd door JHS op 18-02-2006 16:01 ]

DM!

Acties:

Even een trapje omhoog.

Ik ben ook nog steeds op zoek naar dé manier om verticaal te centreren, maar ben hem nog niet tegengekomen. Het grote probleem met de oplossing die in dit topic gegeven wordt (top: 50%;
margin-top: helft van de hoogte van de div), is dat wanneer het browservenster kleiner gemaakt wordt er stukken buiten beeld vallen waar niet naartoe gescrolled kan worden. Dit is dus een probleem bij 'grote' sites die ook onder lage resoluties bekeken moeten kunnen worden. Heeft iemand daar al een oplossing voor bedacht?

zaterdag 18 februari 2006 16:54

Acties:

Verwijderd

JHS schreef op maandag 06 februari 2006 @ 18:22:
Danjel: "Een (over)grote hoeveelheid divjes duidt meestal op een gebrek aan semantiek." Ik zeg niet dat het "meteen zo is", maar dat erop duidt. En het verband zit 'em erin dat op de meeste sites met veel divjes er vaak zinnigere elementen zijn te bedenken voor in de plaats van die divjes.

Yep.. ben ik inderdaad mee eens.. ik gebruik bijna nooit een div.. soms dus echt nooit.. mijn mening is dat je veel beter een table kunt gebruiken, kun je makkelijker indelen (rows/cells) wat bij een div alweer moeilijker is.. en als je last van een randje hebt, gewoon ff css gebruiken: border-collapse: collapse en de borderwidth op 0.

En de oplossing in een table is denk ik simpeler als een opstapeling van divjes dus.. Door gebruik te maken van rows en vertical-align.. Kweet alleen niet hoe je site eruitziet

[ Voor 15% gewijzigd door Verwijderd op 18-02-2006 16:55 ]

zaterdag 18 februari 2006 17:12

Acties:

zondag 19 februari 2006 13:27

Splitting the thaum.

Bluetje: Houd ik een heel pleidooi voor het gebruik van semantisch verantwoorde elementen, keer je dat om naar een pro-table verhaal

. Zie hier voor het hoe en waarom van semantiek

.

En met betrekking tot het gemak van indelen: dat is met blocklevel non-table elementen met wat ervaring véél makkelijker dan met ((zeer diep) geneste) tables

.

DM!

Acties:

Hmmm, nu heb ik de discussie weer aangezwengeld (ik behoor overigens tot het pro-semantisch-design-kamp), maar ik weet nog steeds niet hoe ik op een goede manier verticaal kan centreren. Als het al kan.

maandag 20 februari 2006 14:59

Acties:

Trapje omhoog...

maandag 20 februari 2006 15:11

Acties:

De Parasitaire Capaciteit!

Er is met de huidige CSS implementatie helaas geen nette en eenduidige manier om verticaal te centreren. Er zijn wel wat workarounds voor, zoals het gebruik van negatieve margins icm position: absolute, het gebruik van display: table-cell of het gebruik van een tabel.

Deze verschillende workarounds kom je overigens op internet veelvuldig tegen: http://www.google.nl/sear...&btnG=Google+zoeken&meta=

[ Voor 24% gewijzigd door Sappie op 20-02-2006 15:13 ]

maandag 20 februari 2006 15:15

Acties:

Sappie schreef op maandag 20 februari 2006 @ 15:11:
Er is met de huidige CSS implementatie helaas geen nette en eenduidige manier om verticaal te centreren. Er zijn wel wat workarounds voor, zoals het gebruik van negatieve margins icm position: absolute, het gebruik van display: table-cell of het gebruik van een tabel.

Deze verschillende workarounds kom je overigens op internet veelvuldig tegen: http://www.google.nl/sear...&btnG=Google+zoeken&meta=

Ik ken de bestaande oplossingen, maar ik vind het zo vreemd dat de negatieve-margin-oplossing in dit topic als dé oplossing beschreven wordt, terwijl er een groot nadeel aan kleeft. Wanneer je namelijk je browservenster kleiner maakt valt het gecentreerde deel buiten beeld en kan er ook niet naartoe gescrolled worden.

maandag 20 februari 2006 15:27

Acties:

De Parasitaire Capaciteit!

posttoast schreef op maandag 20 februari 2006 @ 15:15:
Ik ken de bestaande oplossingen, maar ik vind het zo vreemd dat de negatieve-margin-oplossing in dit topic als dé oplossing beschreven wordt, terwijl er een groot nadeel aan kleeft. Wanneer je namelijk je browservenster kleiner maakt valt het gecentreerde deel buiten beeld en kan er ook niet naartoe gescrolled worden.

Dat kan je inderdaad als nadeel beschouwen. Ik vind het ook niet 'mooi' dat dit gebeurt. Verder ben ik geen voorstander van liquid layouts die over de gehele breedte van het venster uitrekken. Ik zou er dan ook voor kiezen (mocht ik gebruik maken van verticale centrering) een site een bepaalde breedte te geven waarmee elke gebruiker uit de voeten zou kunnen. Dat het er dan minder mooi uitziet bij kleiner maken van het browservenster zou ik voor lief nemen; wat heb je immers aan een erg klein browservenster wanneer je een site bekijkt.

Het is met de huidige CSS implementaties mijns inziens dus helaas een persoonlijke afweging voor welke oplossing je moet kiezen en er bestaat niet zoiets als dé oplossing. Wellicht kun jij eens overwegen gewoon een table te gebruiken ook al is het semantisch niet correct.

bijv: http://www.quirksmode.org/css/centering.html

maandag 20 februari 2006 15:32

Acties:

Ik geloof dat we elkaar niet helemaal begrijpen

Ik maak sites met een vaste breedte, het gaat erom dat er verticaal gecentreerd moet worden. Bijvoorbeeld een blok van 400x400 pixels die in het midden (zowel horizontaal, dat is geen probleem, als verticaal) moet hangen.

maandag 20 februari 2006 15:36

Acties:

De Parasitaire Capaciteit!

Ik denk dat ik je toch wel begrijp

Mij zou het namelijk weinig boeien dat een site van 400x400 er niet goed uitziet in een browservenster van 200x200. Elke (serieuze) computergebruiker die gebruik maakt van internet heeft namelijk toch zeker wel de beschikking over een scherm wat de resolutie van 400x400 aan kan

Verder kwam ik met het voorbeeld van de liquid layouts op de proppen naar aanleiding van wat je in een van je vorige posts zei:

Dit is dus een probleem bij 'grote' sites die ook onder lage resoluties bekeken moeten kunnen worden.

een site van 400x400 is nu niet echt groot

[ Voor 8% gewijzigd door Sappie op 20-02-2006 15:38 ]

maandag 20 februari 2006 15:53

Acties:

400x400 was natuurlijk maar een voorbeeld

Maarre: het lijkt er dus op dat een table als container gebruiken de enige echt werkende oplossing is? Dat is toch eigenlijk wel raar...

maandag 20 februari 2006 15:54

Acties:

henkleerssen

Your life is as you narrate it

enigszins off topic.. en als je er ff niet uitkomt met divjes en positionering ervan probeer de volgende code te pasten in een nieuwe bookmark die je aanmaakt en klik ze aan als je een bepaalde site moet checken:
Show and label divs with ids

code:

javascript:var t=document.getElementsByTagName('div');for(i=0;i<t.length;i++){void(t[i].style.padding='5px;');b=t[i].id;h=t[i].innerHTML;void(t[i].innerHTML='<p style=\'color:red;font-weight:bold;\'>'+b+'</p>'+h);void(t[i].style.border='2px solid red');}

Show and label divs with classes

code:

javascript:var t=document.getElementsByTagName('div');for(i=0;i<t.length;i++){void(t[i].style.padding='5px;');b=t[i].className;h=t[i].innerHTML;void(t[i].innerHTML='<p style=\'color:red;font-weight:bold;\'>'+b+'</p>'+h);void(t[i].style.border='2px solid red');}"]

bron: http://www.accessify.com/...ssibility-tools/favelets/
edit:oops!

[ Voor 25% gewijzigd door henkleerssen op 20-02-2006 15:57 ]

maandag 20 februari 2006 16:02

Acties:

De Parasitaire Capaciteit!

posttoast schreef op maandag 20 februari 2006 @ 15:53:
400x400 was natuurlijk maar een voorbeeld

Maarre: het lijkt er dus op dat een table als container gebruiken de enige echt werkende oplossing is? Dat is toch eigenlijk wel raar...

Verticaal centreren is, zoals ik al zei, niet (eenduidig) geïmplementeerd in de huidige CSS2.1 standaard. Wellicht komt daar in de toekomst verandering in, maar op dit moment is het helaas niet anders. CSS is (nog) niet perfect.