Décaler le background-color pour liberer la list-style-image [Résolu]

Bonjour,

Je ne sais pas comment m'y prendre !

J'ai un menu vertical et j'aimerais afficher un background-color en over, sans que celui-ci ne soit sur ma puce list-style-image ?
Menu actuel :

Menu souhaité :


Menu dynamique sous Wordpress

<ul class="menu" id="menu-principal"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-41" id="menu-item-41"><a href="http://localhost/test2/" class="active">Accueil</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47" id="menu-item-47"><a href="http://localhost/test2/?page_id=2" class="active">Société</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45 dcjq-parent-li" id="menu-item-45"><a href="http://localhost/test2/?page_id=20" class="dcjq-parent">Notre activité<span class="dcjq-icon"></span></a>
<ul class="sub-menu" style="display: none;">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44" id="menu-item-44"><a href="http://localhost/test2/?page_id=26" class="">Mécanique de précision</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43" id="menu-item-43"><a href="http://localhost/test2/?page_id=29">Moule d’injection plastique</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42" id="menu-item-42"><a href="http://localhost/test2/?page_id=31">Outillage spécifique</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46" id="menu-item-46"><a href="http://localhost/test2/?page_id=18">Moyens</a></li>
</ul>

CSS Menu

#sidebar .widget ul  { clear:both; padding: 10px 5px 20px 5px; list-style-position:inside; }/* modif */
#sidebar .widget li  {
	list-style-image: URL(images/carre.gif);
	margin-left: 0px;
	padding-left: 15px;
}
.widget ul  { clear:both; padding-left:10px; list-style-position:inside; list-style-type:disc;}
.widget ul li  {
	font-size: 14px;
}/* modif */
.widget li:hover  {
	text-decoration:none;
	background-color: #3a3a3a;
	color: #FFF !important;
	margin-left: 15px!important;
	padding-left: 0px!important;
	
}/* modif */
.widget ul:hover  {
	text-decoration:none;
	background-color: none;
}/* modif */

.widget ul li a  {
	padding: 0 0 0 5px;
	line-height: 22px;
	text-decoration: none;	
}
.widget ul li a:hover  {
	text-decoration:none;
	background-color: none;
    color: #FFF !important;
}/* modif */

Je tourne en rond en essayant de décaler le background avec des "margin" et "padding", mais ça ne fonctionne pas !

Vous auriez une idée ?
Modifié par vertig (01 Dec 2011 - 13:01)

Tu peux définir le fond sur le <a> et non sur <li>, éventuellement en changeant le display pour que le fond s'applique exactement comme tu le souhaites.

Merci pour cette piste kenor, cet option pourrait en effet correspondre à mes attentes, mais lorsque je mets un "display: block", ça me renvoi à la ligne illico !

J'utilise le menu dynamique "jQuery Accordion Menu" de WordPress et avec ce "display: block" au survole c'est horrible, ça saute visuellement !

.widget ul li a:hover  {
	text-decoration:none;
	background-color: #3a3a3a;
	color: #FFF !important;
	display: block;
}

C'est dommage, car c'est bien ça que j'attends, une ligne uniforme sur chaque lien !

On peut corriger ça ?

Et j'ai vu que IE ne gérait pas bien le display (ici) et je viens de m’apercevoir que Chrome ne gérait pas du tout !
Modifié par vertig (28 Nov 2011 - 10:22)

vertig a écrit :
lorsque je mets un "display: block", ça me renvoi à la ligne illico !

C'est étonnant, je ne vois pas trop pourquoi.
On peut voir une page en ligne? C'est quand même prise de tête d'analyser des extraits de code HTML et CSS quand on pourrait utiliser des outils efficaces comme Firebug ou Web Inspector... (d'ailleurs si tu n'utilises pas couramment ces outils il faut s'y mettre de toute urgence).

vertig a écrit :
Et j'ai vu que IE ne gérait pas bien le display (...) et je viens de m’apercevoir que Chrome ne gérait pas du tout !

IE8+ gère très bien les différentes valeurs de display, de même que Chrome (toutes versions). IE 6-7 gère bien display:block, mais il peut y avoir des bugs de rendu spécifiques (liés à des histoires de hasLayout).

Bonjour Florent,

Je travaille en local et j’utilise avec bonheur Firebug, tu as raison, c'est un excellent outil !

Je vais mettre une démo en ligne pour te montrer.

Voilà un lien vers la démo : lien supprimé, obsolète !

Merci !
Modifié par vertig (09 Dec 2011 - 10:54)

Sur tes LI, la propriété list-style-position a pour valeur "inside". Ça explique le retour à la ligne de tes liens en display:block. Il faudrait utiliser "outside" (la valeur par défaut).

Remarque en passant: 15 scripts JS déclarés dans les HEAD. Déjà ça fait vraiment beaucoup, il y en a peut-être certains qui sont appelés inutilement. Ensuite il y a moyen de concaténer des scripts pour diminuer le nombre de requêtes HTTP. Enfin déplacer ces scripts en fin de BODY plutôt que dans le HEAD (où ils bloquent l'affichage de la page). (Se renseigner sur les bases des questions de performance front-end pour aller plus loin.)
Modifié par fvsch (29 Nov 2011 - 14:32)

Je ne vois pas de valeur "outside" ?

Tu as un numéro de ligne ? Quel objet ?

Merci pour tes conseils, le projet est brute, j'optimiserais une fois le site fonctionnel.

vertig a écrit :
Je ne vois pas de valeur "outside" ?

Hmm mon clavier à fourché, ce sont des "inside" que tu as partout et il faut utiliser "outside".

vertig a écrit :
Merci pour tes conseils, le projet est brute, j'optimiserais une fois le site fonctionnel.

C'est la meilleure méthodo pour ne jamais optimiser (soit parce que le site est présentable et que le client/chef de projet/patron dit «hop go live», soit parce qu'on ne sait pas trop par quel bout le prendre et que l'optimisation après coup c'est juste pas évident).

C'est vrai que je comprends mieux et que ça marche mieux comme ça ! Merci !

Reste un décalage sur la puce sous Firefox ?

a écrit :
fvsch a écrit :
C'est la meilleure méthodo pour ne jamais optimiser...

ça arrive !
Bonne journée et merci de ton aide !

Et comme dirait Baltasar Gracian Y Morales :
Aie la connaissance ou écoute ceux qui l’ont.

Sinon, je confirme, le display ça ne fonctionne pas sous chrome ! OK sous IE 9 !
Modifié par vertig (29 Nov 2011 - 16:18)

vertig a écrit :
Sinon, je confirme, le display ça ne fonctionne pas sous chrome !

Testé sous Chrome, le display:block sur les liens fonctionne (ce serait une première tiens, que ça marche pas dans Webkit...).

Il y aurait un conflit d’opinion ou de version ?

Ne sachant pas très précisément ce que tu veux faire ou ce que tu entends par «ah ben display marche par sur Chrome» (scoop: dans l'absolu, display marche sur Chrome!), aucune idée du problème que tu soulèves et de ses causes.

Là comme ça je dirais que tu as du code CSS un peu bricolé par endroits et que du coup dans Webkit tu n'obtiens pas exactement ce que tu veux même si ça passe dans d'autres navigateurs. Ou bien il peut s'agir d'un bug très spécifique de Webkit ou de Chrome, faut voir.

Mais sans précisions autres que «le display ça ne fonctionne pas sous chrome» (juste lol), impossible de dire quoi que ce soit.

OK Florent, pas problème pour moi !

C'est juste que le rollover de mon menu avec background ne fonctionne pas sous Chrome.

Il est vrai, et je fais confiance à ton expérience, qu'il n'est pas logique que la balise display ne fonctionne pas sous Chrome. Je dois avoir un conflit quelque part ! Comme pour Firefox d’ailleurs, qui me déplace la puce au survole, alors que sur IE9 il n'y a pas de problème.

fvsch a écrit :

Ne sachant pas très précisément ce que tu veux faire...

Ma demande n'a pas changé, je souhaite afficher un background-color en over, sans que celui-ci ne soit sur ma puce !

http://forum.alsacreations.com/upload/39790-menu-souha.png

J'y suis presque !

Et si tu vires ça de ta css ça fonctionne ?

.widget ul:hover  {
	text-decoration:none;
	background-color: none;
}

p0ulpe a écrit :
Et si tu vires ça de ta css ça fonctionne ?

.widget ul:hover  {
	text-decoration:none;
	background-color: none;
}

Non, ce code est mis à l'écart en commentaire (/* test */) ! Je viens de le supprimer, mais ça ne change rien. Je nettoie un peu mes codes test, tu as raison, ça ne va pas faire de mal.

Et ça me permet d'y voir plus clair, j'ai résolu le bug de la puce sur Firefox (le line-height manquait).

Pas d'effet sur Chrome, le mystère reste entier !

En rajoutant un display:block; sur les liens de ton menu (et non pas que sur l'état over) ça fonctionne sous chrome.

p0ulpe a écrit :
En rajoutant un display:block; sur les liens de ton menu (et non pas que sur l'état over) ça fonctionne sous chrome.

C'est vrai que ça fonctionne ! Merci p0ulpe, c'est impec !



Je pense que là, on a fait le tour pour ça ! Merci encore à vous pour le gros coup de pouce.

Bonne journée !