28173 sujets

CSS et mise en forme, CSS3

Puces sur liste de définitions?

Bonjour!

J'ai une liste de définitions et j'aimerais mettre une puce à tous les éléments <dt> de celle-ci. Ma puce est une petite image de quelques pixels par quelques pixels et mon <dt> possède déjà une autre background-image malheureusement. J'ai essayé 4-5 techniques différentes, mais elles ont plus ou moins fonctionnées...

Je cherche une solution compatible avec les principaux navigateurs.

Merci beaucoup en avance pour votre aide Smiley smile
xHTML


<dl>
<dt>Titre 1</dt>
<dd>Definition 1</dd>
<dt>Titre 2</dt>
<dd>Definition 2</dd>
</dl>


CSS


dt 
{
	background-image: url("...");
	font-size: 10pt;
	font-weight: bold;
	color: #ffffff;
	padding-top: 3px;
	padding-bottom: 3px;
}


J'ai l'adresse de mon image à la place de "...".

Voilà! Smiley smile
mathieumg a écrit :
mon <dt> possède déjà une autre background-image malheureusement

Pas trente-six solutions vu qu'IE ne gère pas la génération de contenu en CSS (ici la pseudo-classe :before avec une propriété content t'aurait été bien utile !).

Donc, si tu as absolument besoin de ton image de fond sur dt, et absolument besoin de cette puce en images, il te faut rajouter un élément html dans le code.
<dt><span>Bla bla…</span></dt>

Par exemple.
Si tu as des liens dans tes dt, c'est plus simple…
Bonjour.
Seul <li> à une puce par défaut pour l'appliquer à <dt> il faut :
dl dt{
  	display: list-item;
  	list-style-image: url("puce.jpg")
  }

Modifié par Aureance (02 May 2006 - 21:33)
J'avais essayé ces deux méthodes, avec le display: j'obtenais des résultats de positionnement différents dans chaque navigateur, j'ai réessayé avec le span, mais un peu différement et j'ai réussi Smiley smile

Vivement le CSS3 avec les multiples background-image et des navigateurs qui le supportent! Smiley smile

Merci beaucoup
Modifié par mathieumg (02 May 2006 - 21:34)
Re
Tu obtenais des résultats différents car l'indentation du texte n'est pas la même par défaut sur tous les navigateurs. Pour avoir le même résultat partout il faut définir par exemple : text-indent: 10px;
Sujet clos
Aller à