Menu en css

Je pense que je ferais pour ma part ce menu en images, car il est très difficile de prévoir d'une part la taille des caractères sur les différents systèmes, et d'autre part de rester lisible lors de l'agrandissement des polices depuis le butineur.

À la rigueur avec un tableau (ou du display: table-cell) on peut peut-être arriver à faire quelque chose de correct.

Je vois pas bien ce que tu veux dire Florent V, un tableau ?? dans le sens <table> ??

Salut,

Un petit tour

Par ici?

Bab a écrit :
un tableau ?? dans le sens <table> ??

Ben oui, pas dans le sens <picture>, hein.

J'aurai besoin d'un peu d'aide, j'essaie de mettre en place la méthode des portes coulissantes... c pas bien difficile, c pour ca que j'y arrive pas ^^ en fait je suis embetté, je n'arrive pas à définir une class/id pour chaque li...

Qq 1 se sent capable ??

Merci. Ciao...

Ben ça a l'air de marcher (mettre une classe à chaque li), non ?
Fais juste attention à la priorité des sélecteurs. Tu devras peut-être écrire :

ul#menu li.maclasse {...}

si tu veux prendre le pas sur un sélecteur de type :

ul#menu li {...}

Juste pour être tout à fait pointilleux (et lourd ), attribuer un identifiant à tes éléments de liste me paraît bien plus approprié que des classes qui n'ont lieu d'être que lorsque qu'elles sont attribuées à plusieurs éléments html dans la même page, et ce n'est évidemment pas le cas ici.

Pour changer, merci bcp pour vos excellents conseils, vous êtes trop trop forts !!!! merci merci merci... ^^

Voila tout ce que j'avais à dire.

Ciao...

------------------------------------------------------

Me suis précipité, lol, sous IE 6 ca passe pas :s
Modifié par Bab (18 Jun 2007 - 14:51)

Salut,
Bug classique d'ie6 surement, rajoute

#menu a:hover {background: none;}

Merci Ghost,
en fait, euhh, sous firefox, ca change rien, tout est ok, et sur IE6, comment dire, c'est IE6...^^ ca fait chier quoi !?! Nop mais c'est vraiment embettant ces probs de compatibilité !!!
Modifié par Bab (19 Jun 2007 - 09:28)

J'ai passé 1h hier la dessus, IE est vraiment à ##### !!!

IE ne doit pas prendre du tout overflow... c le seul truc que je vois

Bab a écrit :
IE ne doit pas prendre du tout overflow... c le seul truc que je vois

Je dirais plutôt que c'est le :hover qui ne prend pas.
Teste avec le float:right sur les liens directement pour l'état non survolé, pour voir si ça passe dans IE ou pas. Si oui, alors c'est le :hover qui est limité.

Plus globalement, je pense qu'on aura meilleur compte à utiliser Javascript pour cet effet de rollover.

Tu peux ouvrir un sujet dans le salon JS pour savoir comment :
1 - faire le rollover en JS ;
2 - avoir l'effet au survol actif également au focus (navigation au clavier).

Slt Florent,
J'ai testé le float: right dans chaque lien, ca ne marche pas, je m'oriente donc vers la section JS comme tu me l'as conseillé...

Merci. Ciao...

Bonjour, pourquoi ne te réfères-tu pas à ce menu qui fonctionne parfaitement ? A condition d'utiliser du vrai texte, bien sur !
Modifié par chmel (21 Jun 2007 - 00:52)

Salut,

Sauf erreur les portes coulissantes ça ne fonctionne qu'avec des img en background non?

#menu {
list-style-type: none; 
margin: 0; 
padding: 0; 
}

#menu li{
float: left;
width: 75px;

}

#menu li a{
display: block;
height: 20px; 
background: url(news.gif);
background-position: 0% 50%;
border: 1px solid black;
}

#menu li a:hover {
background-position: 100% 0%;
}

	<ul id="menu"> 
	<li id="news"><a href=""></a></li>
	....
	</ul>

Tu as complétement raison, j'ai adapté le truc, pour que ca fonctionne avec des images...