Menu Full Css avec Ul et Li

Bonjour,

j'essaye de faire proprement un menu en full css. (jusqu'a maintenant je les faisais avec du javascript :s mais bon il est temps je passe a la nouveauté lol)

J'ai quelques problemes pour arriver au menu que je souhaite vraiment.

Lorsque je survole le li le background change bien mais le lien n'est pas actif :s je dois survoler le a pour que le lien change de couleur et fonctionne. J'ai essayé de me mettre en display block, ca fonctionne alors a peu pret sur le li (sauf kkes pixels en haut... je vois pas pkoi...) mais le probleme est que mon image devant se met au dessus de mon lien :s (je la met en css avec list-style-image :url('/images/flecheMenuGauche.jpg'); et list-style-position :inside;)

De plus j'aimerais que l'indentation ne soit pas active et que le menu soit sur la meme hauteur au niveau des traits, mais garde l'indentation au niveau des textes.

Enfin, j'aimerais que le niveau 1 soit en uppercase mais pas les autres niveaux.

Voici le lien de mon menu en live :

http://leaderagri.com/

(le menu vertical de gauche)

Voici mon code html :

<div class="listboxMenuGauche">
        <ul>
            <li class="inactive"><a href="http://leaderagri.com/category/1-materiels-agri-et-micro.aspx">Mat&#233;riels agri et micro</a></li><li class="inactive"><a href="http://leaderagri.com/category/2-pieces-et-accessoires.aspx">Pi&#232;ces et accessoires</a></li><li class="inactive"><a href="http://leaderagri.com/category/3-equipement-atelier.aspx">Equipement atelier</a></li><li class="inactive" style="margin-left: 15px"><a href="http://leaderagri.com/category/160-outillage-a-main.aspx">Outillage &#224; main</a></li><li class="active" style="margin-left: 15px"><a href="http://leaderagri.com/category/161-outillage-automobile.aspx">Outillage automobile</a></li><li class="inactive" style="margin-left: 15px"><a href="http://leaderagri.com/category/170-potence.aspx">Potence</a></li><li class="inactive" style="margin-left: 15px"><a href="http://leaderagri.com/category/171-moteurs-electriques.aspx">Moteurs &#233;lectriques</a></li><li class="inactive" style="margin-left: 15px"><a href="http://leaderagri.com/category/172-kit-poulie.aspx">Kit poulie</a></li><li class="inactive" style="margin-left: 15px"><a href="http://leaderagri.com/category/173-devidoir.aspx">D&#233;vidoir</a></li><li class="inactive" style="margin-left: 15px"><a href="http://leaderagri.com/category/203-chambre-a-airpneumatique.aspx">Chambre &#224; air/pneumatique</a></li><li class="inactive" style="margin-left: 15px"><a href="http://leaderagri.com/category/65-bobines-essuie-mains.aspx">Bobines essuie mains</a></li><li class="inactive" style="margin-left: 15px"><a href="http://leaderagri.com/category/66-savon.aspx">Savon</a></li><li class="inactive"><a href="http://leaderagri.com/category/4-equipement-delevage.aspx">Equipement d&#39;&#233;levage</a></li><li class="inactive"><a href="http://leaderagri.com/category/5-pieges-et-poison.aspx">Pi&#232;ges et poison</a></li><li class="inactive"><a href="http://leaderagri.com/category/6-vetementchaussant.aspx">V&#234;tement/Chaussant</a></li><li class="inactive"><a href="http://leaderagri.com/category/7-materiel-motoculture.aspx">Mat&#233;riel Motoculture</a></li><li class="inactive"><a href="http://leaderagri.com/category/128-electricite-et-batteries.aspx">Electricit&#233; et batteries</a></li><li class="inactive"><a href="http://leaderagri.com/category/226-promotions.aspx">Promotions</a></li><li class="inactive"><a href="http://leaderagri.com/category/116-equipement-cloture.aspx">Equipement cl&#244;ture</a></li><li class="inactive"><a href="http://leaderagri.com/category/79-lubrifiant.aspx">Lubrifiant</a></li>

        </ul>
    </div>

Voici la Css associé :

.block .listboxMenuGauche
{
	font-size: 11px;
	padding: 0px 0px 0px;
	line-height: 18px;
	/*border: solid #999;*/
	display:block;
	border-width: 0px;
	margin: 0px;
color:#656565;
}
.block .listboxMenuGauche ul
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
	color: #3664A5;
	background-color: inherit;
	border-top: #1978B8 dashed;
	border-width: 1px;
	list-style: none;
	
}
.block .listboxMenuGauche li
{
	border-bottom: #1978B8 dashed;
	border-left: #1978B8 dashed;
	border-right: #1978B8 dashed;
	border-width: 1px;
	height: 25px;
	padding: 5px 0 0 5px;
	list-style-image :url('/images/flecheMenuGauche.jpg');
	list-style-position :inside;
}

.block .listboxMenuGauche li:hover
{
	background-color: #ff9900;
	
	
}
.block .listboxMenuGauche li a
{
	display: inline;
	height: 25px;
}

.block .listboxMenuGauche li a:hover
{
	color: white;
}

J'ai mis en piece jointe un screenshot de ce que j'aimerais exactement.

Merci pour votre aide qui me permettra de mieux comprendre comment travailler en full css pour ce genre de choses.

Alex
Modifié par korsonsky (07 Jul 2011 - 16:28)

Bonjour,

Plusieurs choses:

- Tu donnes bordure et padding à tes LI, et tes liens se retrouvent à former une petite zone à l'intérieur de chaque item. L'utilisateur va penser que toute la case est cliquable, et une fois sur deux cliquer à côté (il ne clique pas forcément précisément sur le texte). La solution: ne pas donner de padding aux LI, passer les liens en display:block, et donner le padding aux liens. De même, tous les effets de survol sont à faire sur les liens plutôt que sur les LI: si ça réagit au survol, pour l'utilisateur c'est cliquable.

- Tu as des styles appliqués directement sur les éléments avec l'attribut style, par exemple <li class="inactive" style="margin-left: 15px">. Mieux vaut appliquer ces styles depuis ta feuille de styles (en utilisant correctement les sélecteurs CSS, c'est trivial).

- Pour l'écart à gauche, il faut jouer sur le padding-left plutôt que sur le margin-left pour l'effet que tu souhaites.

- Pour l'image de puce (triangle), il vaut mieux passer les LI en list-style:none et appliquer cette image comme image de fond. Penser à faire une image avec fond transparent (actuellement il est blanc), en PNG par exemple, l'effet sera plus propre au survol!

Salut et bienvenue,

korsonsky a écrit :
Bjr

korsonsky a écrit :
kkes

Pourrais-tu faire un effort sur l'orthographe et la lisibilité de tes messages car comme tu le sais, la vocation de ce forum est d'être accessible à tous... même aux personnes qui suivent ton sujet à l'aide d'une synthèse vocale.

Merci d'avance.

@fvsch : Merci pour tes conseils. Je m'en vais de ce pas faire des tests avec ce que tu me dis et je vous tient au courant.

@Mikachu : Pas de soucis, désolé c'est sortit tout seul ^^. J'ai édité mon message original en effectuant les corrections.

Alex

Bon j'ai réussi a bien dégrossir Merci pour les conseils. Dernière étape, je n'arrive pas a avoir la possibilité de ne pas avoir les traits qui s'indentent avec mes enfants.

Exemple ici http://leaderagri.com/category/43-pieces-dusure.aspx

Le probleme d'apres ce que j'ai remarqué, je ne sais pas si tu es d'accord avec moi, c'est que d'apres le developpement du noyau que j'utilise, tout est sur le niveau ul / li. Les enfants ne sont pas dans un ul / li / ul / li. L'indentation se fait coté serveur par un style qui ajoute 15pixels par niveaux d'enfants avec une expression régulière. On est donc d'accord que je ne pourrais pas m'en sortir avec cela pour avoir le trait qui reste autour de tout le menu et uniquement le texte qui s'indente ? Si tu as une solution je suis preneur car je ne me vois pas recoder tout le systeme de menu pour generer des ul li ul li etc en fonction du niveau

Merci de ton retour sur ton avis.

Après tout ça normalement j'ai finit

Encore merci pour ton aide

Alex
Modifié par korsonsky (07 Jul 2011 - 18:26)

korsonsky a écrit :
Le probleme d'apres ce que j'ai remarqué, je ne sais pas si tu es d'accord avec moi, c'est que d'apres le developpement du noyau que j'utilise, tout est sur le niveau ul / li. Les enfants ne sont pas dans un ul / li / ul / li.

C'est effectivement un souci. Cette structure HTML ne reflète pas ton contenu et ne te permet pas d'appliquer des styles CSS spécifiques suivant les niveaux de profondeur (vu que tout est au niveau 1).

korsonsky a écrit :
On est donc d'accord que je ne pourrais pas m'en sortir avec cela pour avoir le trait qui reste autour de tout le menu et uniquement le texte qui s'indente ?

Plutôt, oui.
Il y aurait éventuellement une solution avec un sélecteur d'attribut, mais c'est une solution tellement moche que j'hésite à l'évoquer.

Bon allez...

Les enfants, ne faites surtout pas ça chez vous!

.block .listboxMenuGauche li[style="margin-left: 15px"] {
  margin-left: 0 !important;
}
.block .listboxMenuGauche li[style="margin-left: 15px"] a {
  padding-left: 30px;
}
.block .listboxMenuGauche li[style="margin-left: 30px"] {
  margin-left: 0 !important;
}
.block .listboxMenuGauche li[style="margin-left: 30px"] a {
  padding-left: 45px;
}

Dieu que c'est moche...

En passant, tu devrais supprimer les height sur tes liens et tes LI. Les hauteurs fixes, c'est le mal. La hauteur du texte (qui peut varier) et un peu de padding suffit largement à obtenir le rendu visuel que tu souhaites.
Modifié par fvsch (07 Jul 2011 - 18:47)

merci pour l'info effectivement je te comprend ce n'est pas très beau... Je vais voir si j'utilise ça ou si je peux pas tout de même recoder les ul li avec des niveaux propres. En tout cas merci pour l'info j’aurai appris que cela était possible Ca peut toujours servir

Alex