Alignement vertical en Transitionnel [Résolu]

kéraunos · 11/07/2011, 21h25

Bonjour.

Actuellement je dois reprendre le développement du site d'une société qui m'impose d'utiliser la norme XHTML 1.0 Transitional.

Pour la plupart des fonctionnalités de CSS, le fonctionnement est satisfaisant, mais je viens de tomber sur un écueil avec l'alignement vertical.

Voyez plutôt : avec le doctype XHTML 1.0 Strict, le code ci-dessous fonctionne, ie. la div #content est alignée verticalement dans la div #box. Ce n'est plus le cas avec le doctype XHTML 1.0 Transitional.

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
 
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test vertical align</title>
	<style type="text/css">
		#box {
			height: 300px;
			width: 300px;
			background: yellow;
			line-height: 300px;
		}
		#content {
			display: inline-block;
			line-height: normal;
			vertical-align: middle;
			border: 1px solid #000;
		}
	</style>
</head>
 
<body>
	<div id="box">
		<div id="content">
			texte
		</div>
	</div>
 
</body>
</html>

Ma question est donc : avez-vous une solution pour aligner #content verticalement à l'intérieur de #box en Transitionnel ?

Merci.

Elwyn · 13/07/2011, 09h46

Tu as le même problème pour tous les navigateurs ?

kéraunos · 19/09/2011, 14h35

Oui.

Tests du code précédent :

Mac OS X : Safari 5 / Firefox 6 / Chrome
Ubuntu 10 : Firefox 6 / Chrome
Windows XP : IE8 / Firefox 5 / Chrome

Aquellito · 19/09/2011, 17h01

Bonjour,

Pour info, sous IE8, même en XHTML 1.0 Strict, l'alignement ne marche pas non plus.

J'ai une solution qui pourrait te convenir mais cela oblige à mettre une hauteur fixe à #content :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test vertical align</title>
	<style type="text/css">
		#box {
			height: 300px;
			width: 300px;
			background: yellow;
			position:relative;
		}
		#temp {
			position:absolute;
			height:1px;
			overflow:visible;
			top:50%;
		}
		#content {
 
			display: inline-block;
			line-height: normal;
			position:absolute;
			height:20px;
			top:-10px;
			border: 1px solid #000;
		}
	</style>
</head>
 
<body>
<div id="box">
    	<div id="temp">
			<div id="content">
				texte
			</div>
        </div>
	</div>
</body>
</html>

Macmillenium · 19/09/2011, 18h10

En effet, ça n'a pas l'air de fonctionner avec un doctype transitional.
Pour info, ce doctype déclenche le mode de rendu almost standard (presque standard), alors qu'un doctype strict déclenche le mode de rendu standard.

Pour résoudre ton problème, tu peux aligner #content par rapport à un élément tampon :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test vertical align</title>
	<style type="text/css">
		#box {
			height: 300px;
			width: 300px;
			background: yellow;
			/*line-height: 300px;*/
		}     
		.tampon {
		  display:inline-block;
		  height:100%;
		  vertical-align:middle
		}
		#content {
			display: inline-block;
			/*line-height:normal;*/
			vertical-align: middle;
			border: 1px solid #000;
		}
	</style>
</head>
 
<body>
	<div id="box">
    <span class="tampon"></span>
		<div id="content">
      texte <br />dsds
		</div>
	</div>
 
</body>
</html>

Citation:

Envoyé par Aquellito

Pour info, sous IE8, même en XHTML 1.0 Strict, l'alignement ne marche pas non plus.

Tu as retiré le commentaire avant le doctype strict? Car ce commentaire bascule IE8 en mode de rendu Quirks

jreaux62 · 19/09/2011, 18h29

Bonjour,

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test vertical align</title>
	<style type="text/css">
		#boxtable {
			display:table;
			height: 300px;
			width: 300px;
			background: yellow;
			xxline-height: 300px;
		}
		#contenttr {
			display:table-row;
		}
		#contenttd {
			display:table-cell;
			vertical-align: middle;
			xxline-height: normal;
			xxborder: 1px solid #000;
		}
	</style>
</head>
 
<body>
	<div id="boxtable">
		<div id="contenttr">
		<div id="contenttd">
			texte
		</div>
		</div>
	</div>
 
</body>
</html>

Voir -> CSS display Property

Aquellito · 19/09/2011, 19h49

Citation:

Tu as retiré le commentaire avant le doctype strict? Car ce commentaire bascule IE8 en mode de rendu Quirks

héhé oui t'as raison et c'est pas la première fois que je fais cette erreur à la c...

kéraunos · 20/09/2011, 15h13

Merci pour vos réponses !

jreaux62 : je ne savais pas (ou avais oublié) que la propriété display pouvait prendre les valeurs table-cell et table-row. C'est en effet ce qui semble le plus correct puisque je me souviens avoir lu un jour que l'alignement vertical au milieu a été fait à la base pour les cellules de tableaux (ou du moins les éléments se comportant comme telles).

Merci encore.

13/07/2011, 09h46	#2
Elwyn Membre chevronné Ingénieur systèmes et réseaux Inscription : juillet 2006 Messages : 836 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Ingénieur systèmes et réseaux Informations forums : Inscription : juillet 2006 Messages : 836 Points : 712 Points : 712	Tu as le même problème pour tous les navigateurs ? __________________ Dire Straits, Bob Dylan, Led Zeppelin, the Who, Pink Floyd, AC/DC, Guns & Roses, the Doors, ...
	00

19/09/2011, 14h35	#3
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Oui. Tests du code précédent : Mac OS X : Safari 5 / Firefox 6 / Chrome Ubuntu 10 : Firefox 6 / Chrome Windows XP : IE8 / Firefox 5 / Chrome
	00

20/09/2011, 15h13	#8
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Merci pour vos réponses ! jreaux62 : je ne savais pas (ou avais oublié) que la propriété display pouvait prendre les valeurs table-cell et table-row. C'est en effet ce qui semble le plus correct puisque je me souviens avoir lu un jour que l'alignement vertical au milieu a été fait à la base pour les cellules de tableaux (ou du moins les éléments se comportant comme telles). Merci encore.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email