[Résolu] Liste : vertical-align bottom

Bonjour tout le monde,

J'ai quelques soucis avec le vertical-align. Je n'ai pas réussi à adapter les solutions proposées par ici à mon cas.

Voilà ce que j'aimerais faire :




mais j'ai des problèmes au niveau de l'alignement vertical :




Pour l'instant, j'ai ça au niveau css :

div#menu ul{
list-style: none;
padding :0;
}

div#menu ul{
list-style: none;
}

div#menu ul li{
margin-top : 0;
margin-bottom: 0;
padding : 0; 
height : 35px;
}

li#item1{
margin-left : 10px;
} 

li#item2{
margin-left: 20px;
}

li#item3{
margin-left : 10px;
}

li#item4{
margin-left : 34px;
}

div#menu ul li a{
font: 22px Arial, Helvetica, sans-serif;
font-weight: 700;
color: white;
text-decoration: none;
}

et ceci au niveau html :

<div id="menu">
	<ul>
	<li id="item1"><a href="#">ACCUEIL</a></li>
	<li id="item2"><a href="#">SERVICE</a></li>
	<li id="item3"><a href="#">INSCRIPTION</a></li>
	<li id="item4"><a href="#">CONTACT</a></li>
</ul>
</div>

Merci d'avance pour vos propositions.
Modifié par p_tite_jo (14 Jul 2009 - 11:27)

Bonsoir ^^

Je ne suis sûre de rien vu que je ne suis pas une spécialiste, mais dans tes li#item, essaie de remplacer "margin-left" par float : left; si tu veux qu'il soit à gauche et par float : right; si tu veux qu'il soit à droite.
Modifié par sovena (13 Jul 2009 - 21:57)

Salut,

Merci pour ta réponse. Mais mon problème n'est pas là. Je reformule parce que je n'ai peut être pas été claire.

L'alignement horizontal me convient comme ça. En revanche, je souhaiterais que verticalement, mes items se touchent les uns les autres.

p_tite_jo a écrit :
Salut,

Merci pour ta réponse. Mais mon problème n'est pas là. Je reformule parce que je n'ai peut être pas été claire.

L'alignement horizontal me convient comme ça. En revanche, je souhaiterais que verticalement, mes items se touchent les uns les autres.

Salut,

Tu peux alors leur spécifier chacun leur tour un margin-bottom négatif.
Ca devrait modifier ta mise en page.

Salut.

Malheureusement ça ne marche pas.
Est-ce qu'il y aurait quelque chose à faire avec la propriété height ?

Regarde du côté de la propriété line-height.

A tester dans tous les navigateurs, je sais que ça fonctionne sous FF mais pour le reste je n'ai jamais regardé.

bonjour,

sans imposer de height a tes <li> ou <a> , tu peux jouer sur le line-height , En le reduisant , tu vas compresser l'interlignage jusqu'a faire touché les lignes , voir les chevauchées.

GC

Merci pour vos réponses.

J'ai supprimé la propriété height sur les <li> et rajouté un line-height sur les <a>. Effectivement, les items se rapprochent les uns des autres, mais je n'arrive pas encore à les faire se toucher.

Une autre idée ? Positionnement en relatif ?

Bonjour,

Tu peux essayer des marging-top négatives.

Par contre, je me permet de porter à ton attention le fait que ton menu risque de ne plus être lisible en cas d'agrandissement des caractères.

Ouais j'ai vu
Il n'y a pas un moyen qui permettrait que les items restent collés les uns aux autres, y compris quand la taille des polices changent ?

Non, aucun moyen fiable (à part en utilisant des images). Les utilisateurs pouvant modifier la présentation de chaque élément via l'utilisation de CSS utilisateur (assez facile à faire avec FF, plus dur avec IE), il n'y a aucun moyen d'assurer qu'un site sera toujours vu comme il a été conçu.

... ma dernière question est donc la suivante.. qu'est-ce qui est le "moins pire" au niveau de l'accessibilité/lisibilité ? un menu en css qui risque d'être illisible lorsque la taille de la police n'est pas la même que celle qui a été pensée ou un "menu-image", rendu fiable mais inaccessible aux utilisateurs ne prenant pas en compte les feuilles de style ? on sait quel pourcentage représente ces utilisateurs ?

Un menu image peut être rendu tout à fait accessible au personne qui ne bénéficieront pas des images. Pour cela il faut que les images (qui seront porteuse de contenu) soit présente dans le code HTML et que leur attribut alt="" soit bien renseigné (ici, l'intitulé du lien sera parfait).

Pour en revenir à la question, ça dépends. Du choix que tu fera essentiellement. Car d'un point de vu pratique (hors cas du zoom complet de la page), un texte qui se chevauche au grossissement ou un image que ne s'aggrandit pas, c'est équivalent.

Ok. Merci beaucoup pour ces précisions. Je vais réfléchir à tout ça.

A bientôt