[RESOLU]Menu horizontal en css avec un contenu different

Bonjour ou plutot bonsoir,

Me revoila avec une petite question qui cette fois est bien reflechi (cf mon dernier poste )

Alors je vous explique le probleme que j'ai depuis trois soirs.
J'ai un "beau" menu (encore en construction quoi que... ) de quatre cases. J'avais au debut parametre les hauteurs et largeur des balises li en em mais j'avais un petit decalage avec un menu en particulier que je peut resoudre mais ca se joue au px pres et au 0.01em pres.

Ce menu, c'est "3615 My Life", sauf que pour faire mieux, je le voulais sur deux lignes... tandis que les autres sont sur une seul...
C'est la qu'intervient mon probleme car quelque soit la hauteur et l'unite du padding que j'applique a ma "li a" et bein lorsque je change la taille du texte dans le navigateur, la case a deux lignes n'obtient plus la meme hauteur que ses soeurs.
Ce qui est logique puisque pendant que le texte d'une ligne prend 2px (c'est un exemple) mon menu 3615 en prend 4... puisque 2x2=4 (j'ai revu mes tables de 2 ).

Vous connaissez une methode pour remedier a cela? A part mettre mon 3615 sur une ligne bien sur...
J'espere que vous m'avez suivi... Sinon la page en question estici si ca peut vous aider.

Merci d'avance.

PS: Heyoan, j'ai un challenge a te proposer. Si tu arrive a resoudre mon probleme en 1 ligne (bonjour et by non compris) comme sur mon dernier sujet, je t'envoie une belle carte de Londres...
Modifié par Dim (03 Jun 2009 - 21:44)

Plop !

Dim a écrit :
PS: Heyoan, j'ai un challenge a te proposer. Si tu arrive a resoudre mon probleme en 1 ligne (bonjour et by non compris) comme sur mon dernier sujet, je t'envoie une belle carte de Londres...

Arf ! En une ligne je ne vois pas !

Sinon je te propose de :
1) rajouter un SPAN dans tes liens et virer la class life :

<li><a href="#"><span>Accueil</span></a></li>
<li><a href="#"><span>3615<br/>My Life</span></a></li>
<li class="actif"><a href="#"><span>Articles</span></a></li>
<li><a href="#"><span>Contact</span></a></li>

2) le CSS :

ul.menu li a{
	display: block;
	padding: 0;
	height: 4.95em;
	width: 6em;
	color: white;
	position: relative;
}
ul.menu li.actif a, ul.menu li a:hover {
	background: #B5FF00;
	color: #202020;
	padding-top: 30px;
}

ul.menu li a span {
	position: absolute;
	left: 0;
	bottom: 3px;
	width: 6em;
}

Au passage :
* c'est Accueil et pas Acceuil.
* tu as une ligne vide avant le DOCTYPE qui va faire passer IE6 en mode quirks.
Modifié par Heyoan (03 Jun 2009 - 20:08)

Heuuu, plus vite que flash... css ou Heyoan? (Désolé j'ai pas réussi à l'éviter)

Heyoan a écrit :
* c'est Accueil et pas Acceuil. langue

A oui j'ai quelques problème de dysgraphie avec ce mot... Merci.

a écrit :
* tu as une ligne vide avant le DOCTYPE qui va faire passer IE6 en mode quirks.

Ca tombe bien je suis pas sur IE6 Non je plaisante... C'est corrigé.

Sinon concrètement je suis déçu de ne pas pouvoir t'envoyer une belle carte postale de London Eye....
Mais pour le code effectivement ça résout le problème malgré qu'il me décale mon menu sur la gauche... Bon je vais d'abord comprendre cette apparition du span que je pige pas trop et ensuite résoudre mon décalage.

Merci beaucoup MAITRES


[EDIT] Bon ok pour le span avec sa position absolute qui me permet de mettre mon texte en bas de mon block balise a. C'est quand même un peu se tirer les cheuveux (Il manque un smiley pour cette expression ) non? Car j'encastre les balises div ul li a span pour faire une simple boite cliquable pour un menu...
A force de vouloir séparer le design du html on revient toujours à y ajouter des balises html pour intégrer son design... Sans HTML pas de css, sans css pas du beau HTML c'est une boucle sans fin...

D'ailleurs une petite question au passage... dans la version css3 (elle existe? je dit pas une bêtise?), la balise "a" acceptera t-elle un Vertical-align?? Car ici j'aurai résolu mon problème en moins de deux secondes avec cette propriété, non?

Reste à résoudre mon problème de positionnement à droite sans pour autant avoir menu qui commence par contact et fini par Accueil...
Merci encore Maître Heyoan

[EDIT 2]Pour ceux qui veulent savoir le fin mot de l'histoire, pour régler mon problème de positionnement, j'ai appliqué un float: right a mon ul.menu et voila magie magie... Bon là aussi c'est se prendre la tête car j'ai un float right qui contient un float left qui contient un block qui contient un position absolu, si avec ca je deviens pas ... (Bon ok, c'est simple pour vous )
Modifié par Dim (03 Jun 2009 - 21:51)

Dim a écrit :
A force de vouloir séparer le design du html on revient toujours à y ajouter des balises html pour intégrer son design...

Eh bien c'est vrai que c'est une petite entorse à la séparation contenu / présentation mais :
* ce n'est pas bien méchant puisque l'élément SPAN est neutre d'un point de vue sémantique.
* parfois il n'y a pas d'autre solution (c'est également vrai pour un DIV qu'on rajoute parfois pour faire un cadre).

Dim a écrit :
D'ailleurs une petite question au passage... dans la version css3 (elle existe? je dit pas une bêtise?), la balise "a" acceptera t-elle un Vertical-align?? Car ici j'aurai résolu mon problème en moins de deux secondes avec cette propriété, non?

vertical-align existe déjà mais il n'est pas fait pour ça.

Concernant CSS3 : oui cela existe et certaines propriétés sont d'ailleurs déjà implémentées dans les navigateurs récents. Par contre il n'est pas encore finalisé. Au passage si display:table-cell était mieux implémenté on pourrait déjà utiliser vertical-align pour positionner du texte...

Dim a écrit :
Pour ceux qui veulent savoir le fin mot de l'histoire, pour régler mon problème de positionnement, j'ai appliqué un float: right a mon ul.menu

Tu avais sûrement fait une fausse manip parce qu'il était déjà spécifié quand j'ai fait le test.

Merci pour toutes ces réponses à mes questions...
Jusqu'à présent j'avais lu beaucoup de mauvais truc sur vertical-align alors.... Le web n'est pas rempli que de bonne informations. Heureusement qu'il y as Alsa

Bein pour la fausse manip, peut être, dans tous les cas, finalement j'ai un peu changé la forme du menu , car c'était vraiment pas possible de trouver quelques chose qui me plaisait, du coup heuuu, j'ai plus le problème de vouloir positionner mon texte en bas mais au milieu .
Mais je crois que je devrais m'en sortir.

Sinon, il y as un truc qui m'impressionne et j'aimerais bien savoir comment vous (les modos) faites. A chaque fois vous avez un (ou plusieurs) petit liens super intéressant à donner. Des fois ils sont pas compliqués à trouver mais des fois, (celui du vertical-align) il fallait l'avoir en mémoire.
Donc ma question est : Vous avez une très bonne mémoire ou une très bonne hiérarchie de vos liens???
Merci encore maître Heyoan!

Dim a écrit :
Donc ma question est : Vous avez une très bonne mémoire ou une très bonne hiérarchie de vos liens???

Je dirais un mélange des 2 !

Personnellement je connais Alsa depuis début 2006 et j'ai lu (et relu, et relu...) tous les articles disponibles jusqu'à ce que ça finisse par rentrer. Du coup j'ai une assez bonne vue d'ensemble de ce qui existe... et comme je lisais également tous les sujets ou presque je "bookmarquais" à tour de bras (l'avantage avec Firefox c'est qu'il n'y a pas forcément besoin de bien hiérarchiser puisqu'on peut faire une recherche dans les favoris).

Maintenant c'est beaucoup plus simple puisque depuis la V3 la recherche de la section Apprendre est globale donc il est très facile de retrouver le bon article. Pour ce qui est de la partie Forum la recherche suffit généralement et sinon il existe les mots-clés de Google.

PS : il faut vraiment que tu arrêtes de dire maître parce que :
1) il y a des vrais experts (modos ou non) sur ce forum.
2) je ne le deviendrai jamais puisque le web n'est pas mon métier.
3) j'apprends de nouvelles choses (presque) tous les jours... et donc ça m'arrive encore de répondre des conn... euh... des bêtises.
4) ça me fait gonfler inutilement les chevilles !