Discussion :

[PoZZyX]

Hello,

j'ai un pitit problème d'alignement vertical avec mon site. J'ai fait des recherche et je vois sur certains sites qu'on ne peut pas employer le vertical-align et sur d'autres qu'on peut le faire si on utilise un display inline.

Mais malheureusement cela ne fonctionne pas.

Voici la partie de code concernée pour aligner mon menu au bas du div:

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
 
#menu_user
{
	float:right;
	border:1px solid #000000;
	height:70px;
	padding-bottom:0px;
}
 
 
#menu_user ul
{
	margin-right:25px;
	vertical-align:bottom;
	height:20px;
}
 
#menu_user li
{
	display:inline;
	height:20px;
	border:1px solid #000000;
}
 
<div id="menu_user">
	<ul>
		<li>S'identifier</li>
		<li>S'enregistrer</li>
	</ul>
</div>

Merci d'avance pour votre aide et bonne soirée !!!

[Erwan31]

La propriété vertical-align ne s'applique qu'aux TD (ou alors aux éléments dotés d'un display:table-cell;) et aux éléments inline (pour centrer un élément inline par rapport à un autre).

Voila qui devait faire l'affaire:

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
#menu_user
{
	display: table-cell;
	vertical-align:bottom;
	border:1px solid #000;
	height:70px;
}
 
 
#menu_user ul
{
	display: inline;
	height:20px;
	margin-right:25px;
}

Mais tu devra trouver une alternative au comportement flottant puisque le
float:right fait passer la valeur de display à block et cette valeur devient prioritaire sur table-cell.

Attention la valeur table-cell n'est pas implémenté sous IE, tu dois donc passer par une propriété Microsoft, voir un récent post sur le centrage
et la méthode proposée par CandyGirl.

[PoZZyX]

merci mais ça ne m'arrange pas vraiment cette méthode, je vais pitetre expliquer le problème en entier ça sera mieux.

alors je me suis dit le #logo je le mets en float left, le id_menu en float right, après je fait un clear et je mets le container.

et j'avais donc besoin du vertical align en bas pour coller mon menu utilisateur au container.

Est-ce qu'il y a une façon plus logique de faire ?

Merci d'avance

[Candygirl]

@Erwan31:

Il me semble que le display:table est souvent nécessaire pour un bon fonctionnement du display:table-cell. En ce sens dans ce cas j'attribuerais un display:table au #menu_user et le table-cell au #menu_user, ce qui n'empêche pas le float sur le #menu_user:

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
#menu_user
{
	border:1px solid #000000;
	height:70px;
	padding-bottom:0px;
	float:right;
	display:table;
}
 
 
#menu_user ul
{
	padding-right:25px;
	vertical-align:bottom;
	height:20px;
	display:table-cell;
}
 
#menu_user li
{
	display:inline;
	height:20px;
	border:1px solid #000000;
}

@PoZZyX:

Au vu de ton shéma, tu peux aussi étudier l'éventualité d'un positionnement absolu, de jouer avec un margin-négatif,... Mais c'est difficile de choisir une option ou l'autre sans voir le design, comment cleui-ci réagirait à l'garandissement de la police ou la réduction de la fenêtre (design de taille fixe ?), si des informations importantes se trouvent au-dessus de ton login,...

[PoZZyX]

dans l'idée de base, je voulais une structure (des éléments comme sur mon schéma) similaire au site http://www.good-tutorials.com/

[Erwan31]

Salut,
ok CandyGirl je savais pas pour le display:table merci pour l'info mais es tu
certaine que le display:block dû au float ne prend pas le dessus sur le dsiplay:table? ça m'étonne un peu.

Ceci dit je comprends pas ton montage: il me semble que PoZZyX cherchait à aligner en bas l'UL et non les LI.


@PoZZyX. J'aurai dû y penser avant puisque que ta div menu_user à une hauteur fixe:
attribuer à celle-ci en un position relative (sert de référent pour le positionnement de ses enfant positionnées) et ton UL en position: asbolute avec right:0 et bottom:0
en plaçant ton menu aprés le logo dans le code.

[PoZZyX]

je sais pas quelle est la différence entre mettre en bas l'ul ou le li, moi j'aimerais juste que chaque <li> de mon <ul> soit "posé" sur le haut du container.

selon le dernier message, j'ai essayé :

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
 
#menu_user
{
	float:right;
	position:relative;
	border:1px solid #000000;
	height:70px;
	margin-right:25px;
}
 
 
#menu_user ul
{
	height:20px;
}
 
#menu_user li
{
	display:inline;
	border:1px solid #000000;
	position:absolute;
	bottom:0px;
}

mais c'est toujours pas ça

[Candygirl]

Salut,
ok CandyGirl je savais pas pour le display:table merci pour l'info mais es tu
certaine que le display:block dû au float ne prend pas le dessus sur le dsiplay:table?

Certaine à 100% non, mais ce que je lis dans la spécification ne le contredis pas en tous cas et les tests sur navigateurs semblent le confirmer:

'float'
[...]

left
L'élément génère une boîte de bloc qui flotte à gauche.

17.2 Le modèle de table de CSS

[...]

table (TABLE en HTML)
Spécifie un comportement de table de type bloc pour un élément : c'est un bloc rectangulaire qui participe à un contexte de mise en forme de bloc ;
inline-table (TABLE en HTML)
Spécifie un comportement de table de type en-ligne pour un élément : c'est un bloc rectangulaire qui participe à un contexte de mise en forme en-ligne ;
table-row (TR en HTML)
Spécifie que l'élément est une rangée de cellules ;

Donc le table étant bien de type bloc, il n'y a rien de contradictoire avec le float, juste un plus disant que c'est un table.

Ceci dit je comprends pas ton montage: il me semble que PoZZyX cherchait à aligner en bas l'UL et non les LI.

Dans son exemple, qu'on aligne le ul ou les li en bas le résultat est le même d'où ma proposition. Après c'est clair qu'il faut voir le contexte, le display:table puis table-cell impliquant une imbrication. Mais perso je ne me prendrais pas la tête avec du display:table pour cette mise en page.