5568 sujets

Sémantique web et HTML

[Résolu]Positionner des mots par rapport à une cellule ou un div

Bonjour,

Je ne comprends pas le positionnement d'un DIV

<html>
	<head>
		<title>Positionner du texte en absolu</title>
	</head>
	<body>
			<table border="1" style="width:300px;height:200px;margin-left:auto;margin-right:auto;" cellpadding="0" cellspacing="0">
				<tr>
					<td>
						<div style="position:relative;top:5px;left:30px;">Dummy</div>
						<div style="position:relative;top:10px;left:30px;">Creation</div>
						<div style="position:relative;top:55px;left:100px;">Bruce</div>
						<div style="position:relative;top:80px;left:40px;">Willis</div>
					</td>
				</tr>
			</table>
	</body>
<html>

Que ce soit "absolute" ou "relative", mes 4 mots s'affichent bizarres et certains en dehors de ce div de 300x200

Mon but c'est de positionner ces mots à ces coordonnées et dans le tableau uniquement sans déborder
Modifié par dummycreation (01 Apr 2010 - 14:54)
Bonjour,

Lorsqu'un élément est positionné en absolu ou relatif, il se positionne par rapport au précédent élément positionné (en absolu ou relatif). Si aucune élément n'est positionné, il se positionnera par rapport au viewport (la zone d'affichage du navigateur). Pour que tes div se positionnent par rapport à la cellule, il faut donc lui attribuer un postion:relative; également (sans les valeurs top/bottom ni right/left).

Par contre, je ne suis pas sûre qu'un tableau soit approprié pour ton code, ne serait-ce pas mieux de faire un site sans tableau de présentation ?
Je note donc: il faut que le conteneur contient l'attribut position
Maintenant ça marche et j'ai compris

	<body>
			<div style="position:relative;width:300px;height:200px;border:2px solid #000000;margin-left:auto;margin-right:auto;">
				<div style="position:relative;top:5px;left:30px;">Dummy</div>
				<div style="position:relative;top:10px;left:30px;">Creation</div>
				<div style="position:relative;top:55px;left:100px;">Bruce</div>
				<div style="position:relative;top:80px;left:40px;">Willis</div>
			</table>
	</body>

Il vaut mieux aussi aujourd'hui ne plus se baser sur les tableaux que pour des tableaux!!!
Modifié par dummycreation (01 Apr 2010 - 14:57)
Sujet clos
Aller à