Margin et alignement vertical

**Mic75** · 04/09/2009, 13h56

Bonjour à tous,

Voici la difficulté que je rencontre actuellement :

J'utilise 3 div : un père (id pere) qui contient 2 autres div (d'id respectif fils1 et fils2). Le div fils1 est positionné à gauche dans le père grâce à la propriété float. Le fils2 se place donc à la droite du fils1.

Je souhaiterais maintenant centrer verticalement le fils1 dans le div père, pour ce faire j'utilise la propriété margin-top sur le fils1 avec une valeur de 50%.

Malheureusement le résultat n'est pas celui que je souhaiterais, j'ai l'impression que le div fils1 a une marge de 50% plutôt par rapport à la page que par rapport à son conteneur direct (le pere).

Voici mon code pour éclairer mes propos :

Code :

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
49
50
51
52
53
54
55
56
 
<html>
	<head>
		<style type="text/css">	
			#pere
			{
				border : solid 3px;
				border-color : red;
				width : 60%;
			}
 
			#fils1
			{
				border : solid 2px;
				border-color : blue;
				float : left ;
				margin-top : 50%;
			}
 
			#fils1 p
			{
				margin : 0;
			}
 
			#fils2
			{
				border : solid 2px;
				border-color : green;
				margin-left : 5em;
			}
 
			#spacer
			{
				clear : both;
			}
		</style>
	<head>
	<body>
		<div id="pere">
			<div id="fils1">
				<p><strong>3 mois</strong></p>
				<p>juin-aout</p>
				<p>2007</p>
			</div>
			<div id="fils2">
				<p>
					Stage chez Acadis (Wiesbaden ? Allemagne) : développement d'une interface graphique 
					permettant de paramétrer les shaders au sein de l'application de visualisation temps réelle Tucan.
					L'interface a été développée avec la librairie QT et un prototype de viewer utilisant OpenGL et 
					GLSL a été élaborée pour tester l'interface.
				</p>
			</div>
			<div id="spacer"></div>
		</div>
	</body>
</html>

Merci d'avance pour vos remarques.

**hakurou** · 05/09/2009, 13h22

Salut,

Pour utiliser le pourcentage dans le margin-top du fils1, il faudrait que la hauteur du pere soit fixe, fais le test en mettant par exemple height:400px; au pere.

faudra également rajouter margin-bottom:50%; au fils1.
Comme ca, il sera fixé a 50% du bas de ton pere et idem en hauteur (vu que tu as deja margin-top:50%; )

Enfin je pense que pour éviter de te prendre la tête, en vue des données que tu veux insérer, rien ne t'empêche d'utiliser un tableau, c'est fait pour ca.

**Mic75** · 05/09/2009, 16h55

Salut hakurou. D'abord merci pour ta réponse.

Donc après avoir effectué les modifications dont tu m'as parlé, le problème persiste toujours. Je me retrouve avec le fils1 à 50% par rapport au "top" du document et non du pere.
Je te conseille de copier/coller le code de ton coté pour te rendre compte visuellement du problème.

Enfin, concernant ta remarque vis à vis de l'utilisation d'un tableau, il me semble que les recommandation du W3C concernant ces derniers, sont de les utiliser qu'en vu d'afficher des données tabulaires. De plus en utilisant un tableau dans ce cas, j'ai l'impression de court-circuiter la mise en page CSS en retombant dans l'un des travers fréquents : le positionnement via les tableaux.

**hakurou** · 05/09/2009, 19h39

Il me semblait pourtant que tes données étaient de type tabulaire mais bon, c'est n'est pas bien grave.

Sinon j'avais deja recopié ton code pour voir ce qui n'allait pas, je te colle les modifs apportées, chez moi ca passe, c'est centré :

Code :

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
49
50
51
52
53
54
55
56
57
58
 
<html>
	<head>
		<style type="text/css">	
			#pere
			{
				border : solid 3px;
				border-color : red;
				width : 400px; /*hauteur fixée*/
			}
 
			#fils1
			{
				border : solid 2px;
				border-color : blue;
				float : left ;
				margin-top : 50%;
				margin-bottom : 50%; /*fixé par rapport au bas du cadre parent*/
			}
 
			#fils1 p
			{
				margin : 0;
			}
 
			#fils2
			{
				border : solid 2px;
				border-color : green;
				margin-left : 5em;
			}
 
			#spacer
			{
				clear : both;
			}
		</style>
	<head>
	<body>
		<div id="pere">
			<div id="fils1">
				<p><strong>3 mois</strong></p>
				<p>juin-aout</p>
				<p>2007</p>
			</div>
			<div id="fils2">
				<p>
					Stage chez Acadis (Wiesbaden ? Allemagne) : développement d'une interface graphique 
					permettant de paramétrer les shaders au sein de l'application de visualisation temps réelle Tucan.
					L'interface a été développée avec la librairie QT et un prototype de viewer utilisant OpenGL et 
					GLSL a été élaborée pour tester l'interface.
				</p>
			</div>
			<div id="spacer"></div>
		</div>
 
	</body>
</html>

Margin et alignement vertical

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager