28172 sujets

CSS et mise en forme, CSS3

Décaler un titre d'une image dans un menu

Bonjour,
Je n'arrive pas avec un margin à décaler le titre d'un menu de la puce devant, voici mon code css :

#leftcolumn ul#mainlevel li#current a, #leftcolumn ul#mainlevel li#current a:link, 
#rightcolumn ul#mainlevel li#current a, #rightcolumn ul#mainlevel li#current a:link {
	line-height: 18px;
	padding: 0 0 0 8px;
	text-decoration: none;
	color: #333;
	font-weight: normal;
	font-size: 11px;
	background: url(../images/menu_row.jpg) center left no-repeat;
	margin: 0;
	height: 18px;
}


Adresse du site : http://thefolder.org/ , c'est une plateforme basée sur Joomla et le fichier que j'édite est celui du template, template.css

Merci Smiley smile
Hello, lorsque tu veux décaler le texte d'une puce/background, c'est "padding" qu'il faut utiliser et non "margin" :
Bizarre, dans ton code tu as bien écrit : 
padding: 0 0 0 8px;

Il suffit de l'augmenter pour : 
padding: 0 0 0 35px;

Modifié par Mathieu33 (24 Mar 2010 - 14:08)
Salut!
En placent l'image en background sur les "li" à la place des "a", puis en ajoutant un margin à tes "a" ça devrait le faire. Entouka en testant avec firebug ça fonctionne.

EDIT: Smiley biggol Grill! L'autre méthode cité fonctionne tout aussi bien!
Modifié par juliesunset (24 Mar 2010 - 14:15)
Ce qu'a écrit Mathieu33 est juste mais, il existe une manière plus simple de mettre une image devant les éléments de liste :
ul li { list-style-image: url('roule-ma-puce.jpg') }

Il est aussi possible de mettre une image différente suivant la classe (ou l'ID) de l'item :
ul li.email { list-style-image: url('arobase.jpg') }
ul li.telephone { list-style-image: url('telephone.jpg') }
@Juliesunset à propos de tester list-style-type…

Ça existe en CSS-2 depuis mai 1998, et n'a pas changé en CSS-2.1 (septembre 2009). Selon ton raisonnement, devrait-on aussi tester si les voitures sans permis ne sont pas trop handicapées sur l'autoroute ? Smiley cligne
Salut tout le monde, merci pour votre aide !
A vrai dire le code de ce menu est plus que complet et j'ai beau changer les padding, ou essayer de mettre des list-style-image partout, rien à faire ^^. Je chercherais demain quand j'aurais plus de temps. Je vous tiens au courant !

Code du menu gauche :
/* menu links */
#leftcolumn ul#mainlevel, #rightcolumn ul#mainlevel {
	margin: 15 auto;
	padding: 0;
	list-style: none;
	width: 164px;
}

#leftcolumn ul#mainlevel li, #rightcolumn ul#mainlevel li {
	margin: 0 15px 0 6px;
	padding: 0;
}

#leftcolumn ul#mainlevel li:hover, #rightcolumn ul#mainlevel li:hover {

}

#leftcolumn ul#mainlevel li a, #leftcolumn ul#mainlevel li a:link,
#rightcolumn ul#mainlevel li a, #rightcolumn ul#mainlevel li a:link {
	line-height: 18px;
	padding: 0 0 0 8px;
	text-decoration:none;
	color: #666666;
	font-weight: normal;
	font-size: 11px;
	background: url(../images/menu_row.jpg) center left no-repeat;
	margin: 0;
	height: 18px;
}

#leftcolumn ul#mainlevel li a:hover, #rightcolumn ul#mainlevel li a:hover {
	color: #000000;
}

#leftcolumn ul#mainlevel li#current a, #leftcolumn ul#mainlevel li#current a:link, 
#rightcolumn ul#mainlevel li#current a, #rightcolumn ul#mainlevel li#current a:link {
	line-height: 18px;
	padding: 0 0 0 8px;
	text-decoration: none;
	color: #333;
	font-weight: normal;
	font-size: 11px;
	background: url(../images/menu_row.jpg) center left no-repeat;
	margin: 0;
	height: 18px;
}

#leftcolumn ul#mainlevel li#current ul li a, #leftcolumn ul#mainlevel li#current ul li a:link {
	color: #666666;
	margin: 0 0 0 6px;
	font-size: 11px;
	background: url(../images/submenu_row.jpg) center left no-repeat;
	font-weight: normal;
	display: block;
	line-height: 18px;
	padding: 0 0 0 18px;
	border: none;
	height: 18px;
}

#leftcolumn ul#mainlevel li ul li#current a, #leftcolumn ul#mainlevel li ul li#current a:link, #leftcolumn ul#mainlevel li ul li#current a:visited, #leftcolumn ul#mainlevel li ul li#current a:hover {
	font-size: 11px;
	margin: 0 0 0 4px;
	padding: 0 0 0 18px;
	border: none;
	color: #333;
	background: url(../images/submenu_row.jpg) center left no-repeat;
	height: 18px;
	line-height: 18px;
}
#leftcolumn ul#mainlevel li#current ul {
	margin: 0;
	padding: 0;
}

#leftcolumn ul#mainlevel li#current ul li {
	margin: 0;
	padding: 0;
}

#leftcolumn ul#mainlevel li ul {
	margin: 0;
	padding: 0;
}

#leftcolumn ul#mainlevel li#current ul li a:hover {
	color: #FF1010;
}

#leftcolumn ul#mainlevel li ul, #rightcolumn ul#mainlevel li ul {
	list-style: none;
}
D'après le validateur il y a une erreur ici :
/* menu links */ 
#leftcolumn ul#mainlevel, #rightcolumn ul#mainlevel { 
    margin: 15 auto; 
    padding: 0; 
    list-style: none; 
    width: 164px; 
}
margin: 15 (15 quoi ?). Cette erreur existe aussi sur le template que tu as montré. C'est le genre de tout petit truc, difficile à voir (même en lisant 10 fois le code) qui fout tout par terre…
Hmm, je ne vois pas en quoi cette erreur me concerne ^^. Si je l'enlève ça ne change strictement rien, je laisse comme ça ?

Sinon, plus haut dans le template.css j'ai trouvé ça :

#leftcolumn, #rightcolumnn {
margin:: 0;
width: 195px;
float: left;
padding: 0 4px 10px 0;
text-align: left;
}


Ca concerne le menu en entier et n'affecte pas les items de celui-ci.

D'autres idées ?
Aureance a écrit :
@Juliesunset à propos de tester list-style-type…

Ça existe en CSS-2 depuis mai 1998, et n'a pas changé en CSS-2.1 (septembre 2009). Selon ton raisonnement, devrait-on aussi tester si les voitures sans permis ne sont pas trop handicapées sur l'autoroute ? Smiley cligne

Désolé je me suis mal exprimé.
c'est jusque je crois me souvenir qu'il y avait déjà eu des personnes qui avaient déjà eux des problèmes avec cette méthode. C'est donc à cela que je faisait référence.
soyuka a écrit :
Hmm, je ne vois pas en quoi cette erreur me concerne ^^. Si je l'enlève ça ne change strictement rien, je laisse comme ça ?

Cette erreur te concerne d'abord parce que c'est une erreur située dans ton code. Enlever cette déclaration ne doit certainement pas changer grand chose mais indiquer 15px à la place peut changer la donne. Parfois, une indication mal renseignée bug le reste et il n'y a que toi qui puisse modifier la css pour tester de ton coté…

Sinon, les 8px de padding-left demandés sont bien présents dans le menu mais l'image menu_row.jpg mesure 30px par 30px alors je pense que ceci devrait aller mieux :
#leftcolumn ul#mainlevel li#current a,  
#rightcolumn ul#mainlevel li#current a {
   background: url(../images/menu_row.jpg) center left no-repeat;
   padding: 0 0 0 35px;
   /* 35px au lieu de 8px      */ 
   /* le reste des indications */
}
Je n'ai pas indiqué la pseudo class :link car je trouve ça inutile.
J'ai beau remplacer les paddings ça ne marche pas...
Je continue à chercher. Merci de votre aide !
En fait, c'est parce qu'on ne regarde pas au bon endroit !
Les liens avec les dossiers roses ne sont pas dans #leftcolumn ul#mainlevel li#current a etc… ils sont dans #leftcolumn div.module_menu ul.menu li a Smiley biggrin
C'est bien ce que je me disais ! Merci beaucoup pour ton aide, ça a marché !

J'ai modifié ce code : 
/*LEFT COL CURRENT LINK*/
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, 
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
	line-height: 18px;
	padding: 0 0 0 35px;
	text-decoration: none;
	color: #333;
	font-weight: normal;
	font-size: 11px;
	background: url(../images/menu_row.jpg) center left no-repeat;
	margin: 0;
	height: 18px;
}


Et maintenant c'est tout beau Smiley lol

Bonne continuation et merci encore !
Sujet clos
Aller à