Plaatje exact in het midden van website

[TiMMiEJ]

Ik wil dus een plaatje exact in de midden van mijn website zetten, dat wil ik doen met het de volgende code:

<center>
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td align="center">
<img border="0" src="bnchost_logo.gif" width="619" height="364"></td>
</tr>
</table>
</center>

In dreamweaver krijg ik dan netjes mijn plaatje in het midden, maar als ik dan kijk op www.bnchost.nl dan staat ie bovenaan :P. Kan iemand mij vertellen wat ik fout doe?

[RayManZ]

Dit moet werken:

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

[TiMMiEJ]

lol ik zou niet weten wat ik fout doe, maar hij gaat nog steeds bovenaan staan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>* B o u n c e r - h o s t * Coming soon! *</title>
<style type="text/css">
<!--
body {
	background-image: url(background.jpg);
}
-->
</style></head>

<body>
<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="middle"><div align="center"><img src="bnchost_logo.gif"></div></td>
  </tr>
</table>


</body>
</html>

[Zenda]

Zo werkt het wel:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>* B o u n c e r - h o s t * Coming soon! *</title>
<style type="text/css">
<!--
body {
background-image: url(background.jpg);
}
-->
</style>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%" id="table1">
<tr>
<td align="center" width="100%" height="100%"><img src="bnchost_logo.gif"></td>
</tr>
</table>
</body>
</html>

[TiMMiEJ]

w00t t00t :P super bedankt

[ELTino]

Een leuk geprobeerde oplossing met tabellen, maar totaal niet zoals de standaarden van HTML. Zo bestaat valign niet in 4.01 en hetzelfde geldt voor de height-attribuut voor tabellen.

Sowieso is het niet aan te raden om tabellen te gebruiken voor de opmaak van documenten, maar daarover ga ik niet weer een betoog afsteken (tik maar op google 'layout html tables css' in)

Een correcte manier (XHTML 1.1) om dat plaatje te centreren is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Centreren plaatje</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style title="Default" media="screen" type="text/css">
#center {width:200px; height:100px; position:absolute; top:50%; left:50%; margin:-50px auto auto -100px; border:1px solid black; text-align:center;}
</style>
</head>
<body>

<div id="center">
Je plaatje hier met de breedte 200px en een hoogte van 100px.
</div>

</body>
</html>

Als je het wilt editten is dat niet zo lastig, gewoon simpele CSS.

[Jee-Pee]

Verwijder de W3C regel (in de bron) bovenaan!

Dan werkt het gewoon