div dans un div, question d'élégance

**Paul TOTH** · 01/02/2010, 11h14

Bonjour,

voici un code qui résume mon problème:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Paul TOTH** · 01/02/2010, 11h40

ok, suffisait d'y pense, j'ai ajouter un "white-space: nowrap" pour éviter le retour à la ligne

div dans un div, question d'élégance [CSS 2]

CSS

Vue hybride

Discussions similaires

Partager

Partager