28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Voici l'aperçu d'une (très petite) partie de l'image.

http://nsa27.casimages.com/img/2011/07/25/110725064859705583.png


Comme vous pouvez remarquer, j'ai un petit souci au niveau du niveau entre l'image de la liste et des liens de la liste.

Comment mettre au même niveau entre eux ?

Voici le code source "concerné" :

#col_G {
	float: left;
	width: 300px;
	background-color: #4e8b6f;
}


#col_G {
	color: #fff;
	font-size: 14px;
}

ul, a {
	color: #fff;
	text-decoration: none;
	list-style-image: url(images/list_2.png);
}


Je vous remercie beaucoup par avance de vos aides Smiley cligne

Bonne journée et bonne semaine.
Modifié par Alsa_noob (28 Jul 2011 - 06:12)
étant donné la difficulté de positionner une puce par rapport aux éléments d'une liste, je préfère, pour ma part passer par un background pour insérer une puce à une liste.
De plus, dans ton code, la propriété list-style-image n'est pas approprié pour un lien.
Merci à vous deux pour vos réponses.

@FloydinBremen, je vais essayer avec padding-bottom.

@spout, ce n'est pas possible car j'envisage d'utiliser d'autre image pour les survol.
Modifié par Alsa_noob (25 Jul 2011 - 16:30)
j'ai pas bien compris mais peut être avec un

display: block; 
background-position: left center; 



si c'est ce que je pense
Modifié par evdog69 (25 Jul 2011 - 16:34)
le code complet donnerait

#col_G {    float: left;     width: 300px;     background-color: #4e8b6f; 
}
#col_G ul {list-style: none;margin:0px;padding:0px;border: none;}

#col_G li { padding-left: 20px; margin: 0;}

#col_G li a {display: block; padding: 5px 5px 5px 25px; background-position: left center; text-decoration: none;color: #506E8A;}

#col_G li a:hover{ 
padding:5px 5px 5px 25px; 
background-position:left center; 
border-bottom-width:1px; 
color: #506E8A; 
background-image:url(images/list_2.png); background-repeat:no-repeat;
}

Modifié par evdog69 (13 Aug 2011 - 14:59)
Bonjour à vous deux.

Je vous remercie de vos réponses.

Après avoir modifié pleins fois le code et tout en essayant de le faire évoluer (intégré avec ajax pour avoir des mouvements lors de l'ouverture / fermeture des sous liens etc...) j'ai réussi à obtenir de ce que je voulais.

Merci encore, je vous souhaite une bonne fin de semaine.

Amicalement Smiley cligne