div dans un div, question d'élégance
Bonjour,
voici un code qui résume mon problème:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>Zones</title>
</head>
<body>
<div style="position: absolute; top: 10px; left: 10px; border: 1px solid silver">
<label>Date demande</label>
<input type="text" size="2">/<input type="text" size="2">/<input type="text" size="4">
</div>
<div style="position: absolute; top: 40px; left: 10px; border: 1px solid silver">
<label>Date demande</label>
<div style="position: absolute; top: 0px; left: 92px">
<input type="text" size="2">/<input type="text" size="2">/<input type="text" size="4">
</div>
</div>
<div style="position: absolute; top: 150px; left: 10px; border: 1px solid silver">
<div style="position: relative; top: 0px; left: 92px">
<input type="text" size="2">/<input type="text" size="2">/<input type="text" size="4">
</div>
<label style="position: absolute; top: 0px; left: 0px">Date demande</label>
</div>
</body>
</html> |
dans une appli qui permet de positionner en javascript des éléments à l'écran, j'ai des zones date comprenant un libellé et trois zones de saisie.
La première version du code propose un DIV absolute qui permet de déplacer à la fois le libellé et les zones de saisie.
Les deux autres versions permettent en plus de déplacer les zones de saisie par rapport au libellé.
Sauf que l'ajout du second div provoque une rupture dans l'affichage :(
Dans la troisième version je bouscule un peu tout pour corriger le défaut, mais n'existe-il pas une solution plus élégante ? D'autant que le bord ne contient pas toutes les zones dans cette version là.
Merci
