Archief - html: table centeren

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

*Rebellion*

Legacy Member
ok, we hebben een eindwerk... bedoeling is om een website te maken...

allemaal goed en wel...alles verloopt goed...maar...we zitten dus met een tabel op onze pagina. Die is centered (in IE) toch. Maar netscape positioneert deze tabel gewoon in de linkerbovenhoek. Volgens w3c zou de css property

text-align:center;
vertical-align:middle;

moeten werken...

maar da is dus nie zo...

weet iemand hoe dit komt? (het moet wel strict valid blijven natuurlijk!)

xeox

Legacy Member
je hebt volgens mij de sticky niet gelezen
Horizontaal en verticaal centeren van zaken
* width en height zijn de hoogte en breedte van het te centreren element
* margins > de helft van voorgaande waardes
CSS-file:
Code:
.gecentreerd
{
position:absolute;
left:50%;
top:50%;
width:498px;
height:164px;
margin-left:-249px;
margin-top:-82px;
background-color:none;
}
HTML:
Code:
...
<body>
<div class='gecentreerd'>
<img ... >
</div>
</body>
...
Groeten
xeox

*Rebellion*

Legacy Member
erm nee toch niet...

want op die manier ga je de linkerbovenhoek van de tabel op 50% zetten van de bovenkant en op 50% van de linkerkant...m.a.w. de linkerbovenhoek staat in het midden van je scherm...

position:absolute;
left:50%;
top:50%;

==> foute manier...

het middelpunt van de tabel zou in het midden moet staan...

LunchBox

Legacy Member
daarbij nog:

margin-left:-XXpx;
margin-top:-YYpx;

waarbij XX = helft van de breedte
waarbij YY = helft van de hoogte
*min-teken laten staan uiteraard

kortom letterlijk overnemen, geen dingen vergeten.

*Rebellion*

Legacy Member
mah als ge met andere resoluties gaat beginnen werken dan gaat da niemeer overeenkomen eh...

da is toch als ge vaste waardes gebruikt (.... px; )

Dece

Legacy Member
kdenk niet dat ge begrijpt wa het doet!
ge maakt een div welke je van de linkerhoek positioneerd. (left: 50%; ) deze procentuele waarden zorgen ervoor dat alles er hetzelfde uitzien op alle resoluties.

nadien trek je er de helft van de div aan af dus margin-left: -(width/2); --> hierdoor ga je dus de div x-aantal pixels opschuiven naar links. dit is een vaste waarde nl deze van u div. we hebben hier dus te maken met een vaste correctie factor -> in px.



BTW: text-align is bedoeld om de TEKST te positioneren, niet het element zelf(vandaar dat netscape dit niet doet)

tomdm

Legacy Member
Ok, merci da werk perfect. :applause:

Ik had daar nog nen table rondstaan en ik had naar die table verwezen ipv van de table met de inhoud.(gewoon buitenste table weg laten)

enorm bedankt:
:bow: xeox :bow: voor de code
:bow: Dece :bow: voor de toelichting

BertG

Legacy Member
ik gebruik altijd deze:

margin-left: auto;
margin-right: auto;

werkt perfect!

DarkBone

Legacy Member
Dat centreert je tabel enkel horizontaal... terwijl het hier zowel horizontaal als verticaal moet zijn... next time read the topic :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan