[HTML] midden van de pagina.

[Verwijderd]

Ik probeer een object midden in de pagina te plaatsen. Ik dacht dat met tabellen te doen want zo deed ik dat vroeger ook volgens mij?

code:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle"><div align="center">
      midden
    </div></td>
  </tr>
</table>

Maar IE 6 blijft vrolijk bovenaan beginnen (dat woordje staat dus bovenaan in het midden ipv mid-mid).

Waar om is dit?

[Hahn]

Volgens mij kan je 'middle' niet gebruiken daarvoor.

[Denker]

valign="center"

Of werk met CSS, net zo handig.

[Verwijderd]

December schreef op 28 mei 2004 @ 11:52:
Volgens mij kan je 'middle' niet gebruiken daarvoor.

Dat heb ik linearecta uit dreamweaver?

Edit: Werk trouwens ook niet.

[ Voor 11% gewijzigd door Verwijderd op 28-05-2004 11:55 ]

[Verwijderd]

Eugh, wat is dat voor lelijke html? Hoe kun je nu een TD midden in een tabel alignen? Per definitie is dat ding net zo breed als je tabel (100% dus) aangezien je maar 1 kolom hebt.

De beste manier is om het via CSS te centeren, niet via tabelen.

[sig69]

En als je het dan per se met tabellen wilt doen, maak dan een tabel in een tabel en lijn dat in het midden uit.

[Rowanov]

Verwijderd schreef op 28 mei 2004 @ 11:54:
Eugh, wat is dat voor lelijke html? ....

Typisch Dreamweaver

edit:
je kan met Dreamweaver gewoon via de CSS-editor de opmaak doen, in het geval je geen CSS kennis hebt.

[ Voor 27% gewijzigd door Rowanov op 28-05-2004 11:56 ]

[Verwijderd]

Verwijderd schreef op 28 mei 2004 @ 11:54:
Eugh, wat is dat voor lelijke html? Hoe kun je nu een TD midden in een tabel alignen? Per definitie is dat ding net zo breed als je tabel (100% dus) aangezien je maar 1 kolom hebt.

De beste manier is om het via CSS te centeren, niet via tabelen.

Als er echt geen andere manier is, gebruik toch liever ouderwetse HTML.

[BalusC]

Als er echt geen andere manier is, gebruik toch liever ouderwetse HTML.

Volg dan de tip van sig69

[Verwijderd]

Rowanov schreef op 28 mei 2004 @ 11:55:
[...]


Typisch Dreamweaver

edit:
je kan met Dreamweaver gewoon via de CSS-editor de opmaak doen, in het geval je geen CSS kennis hebt.

Naja, DW maakt vaak lelijke html, maar meestal echt niet zo compleet fout hoor, zo slecht is het proggel ook weer niet. Met een tabel kan het ook wel trouwens, maar dan moet je toch een cel of 9 aanmaken, niet 1tje.

Maareh, waarom ouderwetse html? Ouderwetse html is niet hip

[ Voor 7% gewijzigd door Verwijderd op 28-05-2004 12:05 ]

[André]

code:

<div style="position:relative; top:50%; text-align: center;">
  Bla
</div>

[Bosmonster]

Heb je niet een DOCTYPE ingesteld? Want als ik het los in een document zet werkt het namelijk prima (zoals ik zou verwachten).

Mogelijk moet je de body even op height:100% zetten.

André schreef op 28 mei 2004 @ 12:06:

code:

<div style="position:relative; top:50%; text-align: center;">
  Bla
</div>

Dit lijnt je content niet in het midden uit helaas, maar laat hem halverwege beginnen (top:50%).

[ Voor 45% gewijzigd door Bosmonster op 28-05-2004 12:08 ]

[edwinistrator]

height="100%" werkt niet als je een doctype 4.01 hebt of xhtml, volgens mij. Sloop je doctype er eens uit en kijk of het dan wel werkt.

[Rowanov]

Verwijderd schreef op 28 mei 2004 @ 12:05:
[...]


Naja, DW maakt vaak lelijke html, maar meestal echt niet zo compleet fout hoor, zo slecht is het proggel ook weer niet.

Qua HTML en JavaScript is het een TAG-soep. Als je de CSS in een aparte file buiten je code houd is de opmaak van je CSS iig wel aardig.

[RobIII]

Zet op je TR gewoon een VAlign...

HTML:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr valign="middle">
    <td align="center">midden</td>
  </tr>
</table>

Tabellen roeleren

* RobIII rent hard weg

[ Voor 78% gewijzigd door RobIII op 28-05-2004 12:09 ]

[Bosmonster]

RobIII schreef op 28 mei 2004 @ 12:08:
Zet op je TR gewoon een VAlign...

*kuch*

Dat is in elke HTML versie fout

Bovendien doet het exact hetzelde als het in de TD zetten waar het wel goed staat.

[ Voor 20% gewijzigd door Bosmonster op 28-05-2004 12:11 ]

[Rowanov]

Dat is dan misschien in dit geval de beste manier als CSS geen optie is.

[sig69]

Als je valign="middle" wilt gebruiken, zet 'm dan in ieder geval in td...

height="100%" werkt trouwens prima hier met doctype 4.01

[ Voor 37% gewijzigd door sig69 op 28-05-2004 12:16 ]

[Rowanov]

Als het je niet gaat om de correctheid van je code, het werkt allebei

Maar wtf, wat is het probleem, want de eerste code werkt bij mij (IE6) gewoon. Ligt het dan toch niet aan de browser?

[ Voor 4% gewijzigd door Rowanov op 28-05-2004 12:17 ]

[RobIII]

Bosmonster schreef op 28 mei 2004 @ 12:10:
[...]


*kuch*

Dat is in elke HTML versie fout

Bovendien doet het exact hetzelde als het in de TD zetten waar het wel goed staat.

Hoezo?
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.5

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <title>Untitled</title>
</head>

<body>
    <table border="0" cellpadding="0" cellspacing="0">
      <tr  valign="middle">
        <td align="center">midden</td>
      </tr>
    </table>
</body>
</html>

Dit valideert gewoon hoor

[Bosmonster]

Ok.. youre right.. dat was in XHTML.

Blijft een feit dat het geen ruk uitmaakt of je het hier in de TR of TD zet.. Het voorbeeld van TS werkt namelijk ook prima.

[Verwijderd]

Thnxs thnxs, als ik DOCTYPE eruit sloopt werkt het.

Was er totaal niet van op de hoogte dat dat zoveel invloed hadm zal vroeger dus met oude versies van dreamweaver daar idd geen last van gehad hebben, bedankt.

[ Voor 3% gewijzigd door Verwijderd op 28-05-2004 13:29 ]

[ajvdvegt]

Het werkt absolut niet hier in Mozilla, 'midden' staat links boven (met en zonder DOCTYPE).

[Verwijderd]

ajvdvegt schreef op 28 mei 2004 @ 12:39:
Het werkt absolut niet hier in Mozilla, 'midden' staat links boven (met en zonder DOCTYPE).

http://home.planet.nl/~jpabst/test/index.htm

Daar is de pagina, heb ff geen mozilla bij de hand maar dat staat toch gewoon in het midden of niet?

BTW gaat niet om het filmpje dat is nog niet eens semi-af.

[ Voor 11% gewijzigd door Verwijderd op 28-05-2004 13:27 ]

[JayVee]

Oud topic, ik weet het.

Ik kwam dit topic tegen omdat IE mijn pagina ook niet wou centreren. Ik kwam erachter dat het zonder DOCTYPE wel lukt. De grap is: ik had deze DOCTYPE:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

En daarmee werkt het niet. Met deze echter wel:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Iemand een idee waarom?

offtopic:
En dit is sinds anderhalf jaar het eerste table layout dat ik maak. Damn wat zuigt dat als je CSS gewend bent! navigatie wat smaller, content wat breder? ff over gaan rekenen en width aanpassen.

[ Voor 30% gewijzigd door JayVee op 04-09-2004 21:15 ]

[crisp]

IE heeft een standards-mode, een semi-standards mode en een quirksmode, en dat is idd afhankelijk van wel/geen doctype en/of geen link in de DTD of content (bv een HTML-comment) voor de DTD

[AkaXakA]

code:

<center><div style="width:600px;">midden</div></center>

Als we dan toch voor een Quick&Easy manier gaan, maak het dan ook simpel qua code. Zou ook moeten werken met HTML4 Doctype erboven.

Betere manieren om het te doen: http://www.wpdfd.com/editorial/thebox/deadcentre4.html
http://intensivstation.ch/css/template.php

Let op: Als je én een liquid layout én negatieve margins wil gebruiken, dan zorg je gewoon dat zowel je width als je margin in percentages gegeven is.

[JayVee]

crisp: Ik weet dat IE afhankelijk van de DOCTYPE wisselt van rendermodi, maar wat is het verschil nou tussen HTML 4.01 en HTML 4.0?

AkaAakA: Horizontaal centreren was het probleem niet. De container table wou niet over de hele hoogte stretchen. Dit is de code:

HTML:

<table width="100%" style="height: 100%" border="1" cellspacing="0" cellpadding="0">
<tr><td width="100%" height="100%" valign="middle" align="center">
  
  <table width="425" border="0" cellspacing="0" cellpadding="0">
    <!-- MAIN TABLE HERE -->
  </table>

</td></tr></table>

[ Voor 67% gewijzigd door JayVee op 05-09-2004 01:10 ]

[Verwijderd]

HTML 4.01 bevat enkele kleine wijzigingen: A.1 Changes between 24 April 1998 HTML 4.0 and 24 December 1999 HTML 4.01 versions.

[JayVee]

Ik heb er even naar gekeken, maar er staat niets over table cell height of zo. En FireFox deed het wel "goed".
Misschien gewoon een bugje in IE?

[JayVee]

A ha!
http://www.wellstyled.com/html-doctype-and-browser-mode.html

Any transitional HTML 4.x without URL, e. g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
==> IE goes quirk

Transitional HTML 4.0 with URL, e. g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
==> IE goes STD mode

[ Voor 21% gewijzigd door JayVee op 08-09-2004 23:14 ]

[angl2k]

als je een gebied wilt centreren op de pagina met een vaste hoogte en/of breedte kan je het volgende doen:

code:

<div style="width:300px;height:300px;position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-150px">
blaat
</div>

uit mn hoofd dan