28219 sujets

CSS et mise en forme, CSS3

Bonjour à tous!

Merci tout d'abord à ceux qui prennent le temps de lire mon 1er post Smiley cligne
Voilà mon problème en image :
http://www.dg-online.net/liste-css-valignement.jpg

Comme vous le voyez, les images servant de puces ne sont pas alignées avec le texte (ou inversement, comme vous voulez).
J'ai essayé les vertical-align, regarder le tutorial sur le centrage et tester les display:table-cell etc. mais rien n'y fait.

Merci beaucoup à celui qui saura m'aider! (avec le code, un lien ou n'importe quoi d'autre lol)

voilà le code :
-html
<div id="menu2">
	<li id="visu_appli"><a href="#">Changer d'application</a></li>
	<li id="aide"><a href="#">Aide</a></li>
	<li id="quitter"><a href="#">Quitter</a></li>
</div>


-css
/*MENU2*/
#menu2 {
	position: absolute;
	margin-top: 317px;
	margin-left: 50px;
}
#menu2 li {
font-family: "Goudy Old Style";
font-size: 16px;
color: #374DAC;
font-style: italic;
font-weight: bold;
}

#menu2 li a {
color: #374DAC;
}

#menu2 li a:hover {
color: Yellow;
}

#visu_appli {
	list-style-image: url(images/fleche_jaune.gif);
}
#aide {
	list-style-image: url(images/pt_interro_vert.gif);
}
#quitter {
	list-style-image: url(images/fleche_rouge.gif);
}

Modifié par kik (22 Mar 2005 - 16:29)
Administrateur
Salut,

En fait, pour beaucoup de raisons (dont celle-ci), il n'est pas toujours pratique d'utiliser les list-style-image.
Je pense que dans ton cas, il s'agit d'un problème de hauteur de ligne (line-height) différente.

Mais je te conseille d'utiliser les arrière-plan (background-image), que tu pourras plus facilement positionner à ta guise.
Et en mettant des pixels vides (transparents) en haut de l'image ca ne marche pas? j'ai deja utilisé cette solution pour moi ca marchait correctement, et l'alignement obtenu supporte bien le redimensionnement des polices
Modifié par sebastien billard (22 Mar 2005 - 15:51)
merci de vos réponses. J'ai opté pour la première. Ca marche très bien.
Voilà un bout de code de la solution, ca peut servir :

#visu_appli {
	background-image: url(images/fleche_jaune.gif);
	background-repeat: no-repeat;
	text-indent: 25px;
}


++