div, span, imbrication et positionnement css

**bambou** · 27/04/2007, 17h35

bonjour,

c'est surement un Nième post sur le positionnement css, mais malgrés mes recherches sur le net et avoir fais pas mal de tuto et de test, je reste encore assez perplex sur le positionnement des éléments sans passer par un tableau..

prenons un cas concret..
je souhaite créer le formulaire qui se trouve en pièce jointe..en ce qui concerne tout ce qui est en dehors des tab, pas de souci...pour ce qui est dans la tab, la, c'est pas la meme histoire...

ça fait quelques temps que j'entend dire qu'il ne faut plus utiliser de tableau pour faire la présentation dans un site web. D'autant plus que dans le cas de mon formulaire, les parties horizontales (plates1, plates2...Etc) sont toujours de la meme forme et peuvent être en quantité infinies. Donc ça me parait plus facile à gérer dans un div que je peux "dupliquer"..., alors c'est parti on test...

La tab (position3 par exemple) est un gros div

A ce stade une première question me vient à l'esprit : pour le tableau que je vais construire, est-ce que le plus simple est de mettre des largeures fixes en px ou relatives en %?
A priori, le plus joli serait en % pour que ça s'adapte à la taille de l'écran de l'utilisateur..mais le peu d'expérience css et positionement que j'ai me dis que les tailles fixes partent moins en sucette d'un navigateur à l'autre...c'est une question annexe qui n'est pas la plus fondamentale...passons au vif du sujet

Dans le div de ma tab, j'ai donc un Premier div qui va être le header du tableau (cellule haut-gauche + cellules left, middle et right).
Ce présente à moi le probleme suivant :

Je pars sur le principe que les div s'alignent verticalement entre eux, alors que les span s'alignent horizontalement...

De ce simple constat je me dis qu'avec le code suivant (les id sont la uniquement pour vous aider à reperer les éléments), je devrais a peu prés retrouver la structure de l'entete de mon tableau :

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
<div id="tab">
  <div id=header>
    <span id="caseHautGauche">
 
    </span>
    <span id="left">
 
    </span>
    <span id="middle">
 
    </span>
    <span id="right">
 
    </span>
  </div>
  <div id="plate1">
    ...
  </div>
  ...
  <div id="plateN">
    ...
  </div>
</div>

si j'utilise ce code tel quel avec du simple texte dans les span, pas de souci, j'ai bien mon header qui contient 4 cases alignées horizontalement, et en dessous, 2 cases pour les plates les unes en dessous des autres

Ensuite, j'ai rajouté montexte et mes champs dans les span, jusque la pas de souci...

exemple :

Code html :

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

1
2
3
    <span id="caseHautGauche">
       location : <input type="text">
    </span>

J'ai mis un br pour faire les retour à la ligne

Code html :

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

1
2
3
    <span id="caseHautGauche">
       location :<br> <input type="text">
    </span>

Déjà la, les span left midle et right étaient déjà en dessous de celui la au lieu d'être à coté...
j'ai bien essayé de remplacer ce br en entourant location et l'input de div, ce qui ne me parrait pas trés joli (si je dois entourer de div tous mes éléments à chaque fois que je veux sauter une ligne je vais pas m'en sortir!!) comme ceci :

Code html :

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

1
2
3
    <span id="caseHautGauche">
       <div>location :</div> <div><input type="text"></div>
    </span>

J'ai essayé également de passer par des div avec un attribut float:left dans ma css...ça marche plus ou moin. Voila le code :

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
<div id="tab">
  <div id="header">
    <div class="head2">
       <div>test1</div>
       <div>test1bis</div>
    </div>
    <div class="head2">
      test2
    </div>
    <div class="head2">
      test3
    </div>
    <div id="nofloat">
      test4
    </div>
  </div>
  <div id="plate1">
    ...Plate1
  </div>
 
  <div id="plate2">
    ...PlateN
  </div>
</div>

et la css:

Code css :

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

1
2
3
.head2{
	float:left
}

je concerve bien l'allignement horizontale des anciens span mais le texte "test1bis" est alligné horizontalement avec le texte "Plate1" qui devrait être au dessous

je ne suis pas un spécialiste css mais passer par un div et un attribut float:left ça ne me parait pas joli étant donné qu'on a une balise spéciale pour faire ça (span) et que ça oblige à faire un traitement spécial (enlever le float:left) pour le dernier bloc horizontale de façon à revenir dans le flux normal de la page

bref, je suis un peu perdu avec le positionnement des blocs...et aux propiétés qui sont hérités ou par l'imbrications de blocs

si il y a une bonne ame, qui à pris le temps de lire ce post jusqu'au bout et qui peut m'éclairer un peu plus sur le fonctionnement des blocs ce serait vraiment sympa, parce que la je suis vraiment perdu...

merci

**bambou** · 27/04/2007, 20h55

en faite, j'ai fait 2/3 test sur une page à coté...et, histoire de simplifier un peu le probleme, j'ai donc quelques questions sur le code suivant :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.conteneur, .float, .noFloat, .head{
        border:1px solid #000000;
        margin:10px;
}
 
.float{
        float:left;
}
</style>
</head>
 
<body>
	<div id="C1" class="conteneur">
		C 1
		<div id="C1.1" class="conteneur">
			C 1.1
			<div id="F1" class="float">
			   F1<br />
			   2eme ligne
			</div>
			<div id="F2" class="float">
			  F2
			</div>
			<div id="F3" class="float">
			  F3
			</div>
		</div>
 
		<div id="C1.2" class="conteneur">
			C 1.2
		</div>
 
		<div id="C1.3" class="conteneur">
			C 1.3
		</div>
	</div>
	<div id="C2" class="conteneur">
		 C 2
	</div>
</body>
</html>

Ce code à été testé dans ie7 et ff2 et donne le même résultat sur les 2 navigateurs

voici donc mes interrogation :
- Bien que les div F1, F2 et F3 soient imbriqués dans le div C1.1, à l'affichage ils apparaissent dans le div C1.2. Alors que les div C1.1, C1.2 et C1.3 sont correctement affichés dans le div C1. Pourquoi?
- Le saut de ligne du div F1 ne devrait-il pas modifier la taille du div C1.1 (ou C1.2, je sais plus trop la vu qu'ils sont affichés dans C1.2)?

Comment puis-je corriger ces erreurs de façon à avoir un affichage correspondant à l'imbrication des div dans le code?

merci

**francis m** · 27/04/2007, 23h01

les divs F1 F2 F3 paraissent être dans C1.2 mais ce n'est pas le cas : le F1 est simplement en dessous-du texte C1.1 et est bien dans C1.1
le F2 et le F3 sont positionnés ensuite le plus à gauche, car ces trois derniers sont en position float, et donc sorti du flux normal d'affichage de la page html.
après F3 s'affiche le texte C1.2 puisque le flux reprend son cours normal

non le saut de ligne de F1 ne doit pas modifier la taille de C1.1, puisque F1 est sorti du flux

jongler avec les fluxs (normal, float, absolute etc ) est souvent périlleux

mais il est possible de finasser en donner une hauteur au bloc C1.1

Code :

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

<div id="C1.1" class="conteneur" style="height:200px">

**bambou** · 28/04/2007, 13h05

mais dans le cas ou je ne peux pas fixer la taille de mon bloc, il y a-t-il un moyen pour que la hauteur soit ajustée automatiquement.

Si j'ai bien compris pour cela il faudrait ne pas passer par des div et l'attribut float pour ne pas changer le flux normal de la page...donc passer par un élément qui a un flux inline...mais lequel? dans mes test span ne fonctionne pas si je rajoute ensuite un nouveau div ou meme un simple br à l'interieur du span...

alors comment faire?

**francis m** · 28/04/2007, 13h54

tant que F1 est hors du flux, C1.1 ne s'ajustera pas en hauteur

un span est une balise inline à l'intérieur d'une balise p, h1 etc

si ton div contient différents éléments (image, p, h1 etc) cela ne fonctionnera pas

tu peux remplacer float:left; par display:inline; mais le résultat sera peut-être moyen en fonction du navigateur

la meilleure solution est quand-même d'essayer de dimensionner la hauteur de bloc c1.1