Discussion :

[Spiritueux]

Bonjour,

J'ai un petit problème qui est entrain de me donner quelques cheveux gris en plus.

Dans un DIV je place une liste (UL / LI) que je souhaite aligner avec le bas de mon div.

Voici mon code :

<div id=menu>
<ul class="nav" >
<li class="current"></li>
</ul
</div>

mon css :

#menu{
background-image:url(../image/menu.JPG);
background-repeat:no-repeat;
height:85px;
}
.nav {
line-height:7px;

}

Je vous épargne une partie du code.

J'ai tenté de metre un vertical-align:bottom plus ou moins partout, j'ai aussi créer un deuxième div pour tenter de lui appliquer le bottom.. mais rien.

Est-ce vous auriez une piste à me suggérer ?

Merci d'avance.

[Spiritueux]

Pour aider à la compréhension de mon problème voici la page qui me pose un souci : www.antoinemartinelli.com/union

Le problème réside dans le menu horizontal que j'aimerais aligner avec le bas de l'image (qui est un background dans un div) du ciel.

[Er3van]

Si j'ai bien compris ton menu est compris dans un div dont le fond est l'image du ciel, c'est ça ?


Si oui, tu peux simplement créer un div dans lequel tu mets ta liste. Tu mets ce div de la sorte :

Code :

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

1
2
3
4
5
6
#id_de_ton_div {
       position : absolute ;
       bottom : 0 px ; /* ou la hauteur de ton menu, je sais jamais... */
       left : 0 px;
       z-index : 100 ; /* si tu n'en utilises pas, mets simplement 1 */
}

et ton div conteneur avec le fond du ciel doit être en positionnement relatif.
Je n'ai pas testé mais ça devrait marcher.

[Erwan31]

J'ai tenté de metre un vertical-align:bottom plus ou moins partout, j'ai aussi créer un deuxième div pour tenter de lui appliquer le bottom.. mais rien.

Pout info, la propriété vertical-align ne s'applique qu'aux éléments dont le display est table-cell (les cellules de tableaux) et aux éléments inline
donc les div/ul... en sont exclu.

Ceci dit pour conserver le UL en dans le flux normal, tu peux passer par une marge haute si le conteneur a une hauteur fixe.
Tu dois aussi supprimer le margin-bottom de .nav

@Er3van Le z-index n'est en principe pas nécessaire.

[Spiritueux]

Hello Erwan,

Merci sincérement pour tes réponses et tes explications.

J'ai fait un petit exemple en dehors de ma page pour tester ta solution et ça focontionne très bien, donc merci beaucoup...

Pour ceux qui sont intéressé voici le code de test :

<div style="position:relative; background-color:#CC0000; height:100px; width:300px">
<div style="position:absolute; bottom:0px; left:0px; background-color:#00CCFF; height:50px; width:200px">
<ul>
<li>test1</li>
<li>test 22</li>
</ul>
</div>
</div>

Malheureusement je n'ai pas réussi à appliquer cette méthode à mon code pour le moment, mais ça ne serait tardé.

Bonne journée à tous.

[Erwan31]

Ok tu dois aussi supprimer le margin-bottom de .nav

[Er3van]

@Erwan, le z-index n'est en principe pas nécessaire, sauf qu'avec son menu déroulant, il y a des chance que ça génère des problèmes de disposition dans le flux s'il ne le met pas.

[Erwan31]

@Erwan, le z-index n'est en principe pas nécessaire, sauf qu'avec son menu déroulant, il y a des chance que ça génère des problèmes de disposition dans le flux s'il ne le met pas.

Je vois ce que tu veux dire mais dans la majorité des cas le z-index sera inutile:
> il n'aura aucun effet sur les liste déroulantes (select) qui passent au-dessus sous IE6.
> Aucun effet non plus sur une animation Flash ou plus généralement sur un élément object, un contrôle active X ou un scriptlet.
> Ni sur un bloc passant au premier plan sous IE dans certains cas de figures.

Ceci dit il peut être mis par précaution