Discussion :

[razorlok]

J'ai une mise en forme de texte à réaliser sur une page html, le fichier word comporte des puces, en forme de triangle (cf. image).

J'aimerais savoir s'il existe un code équivalent, ou un bidouillage permettant de faire des "puces" de ce type.

Voici l'image :

[HiRoN]

Je ne pense pas qu'on puisse personnaliser directement des puces en html (mais je me trompe peut-être )

Perso, je ferais du style :

Html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<p class="puce">Texte</p>

Css :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<style type="text/css">
.puce 
{
background: transparent url('img/test.gif') no-repeat scroll top left;
padding: 0px 0px 0px 20px; 
}
</style>

Mais il doit sûrement y avoir d'autres possibilités...

[Erwan31]

Mais il doit sûrement y avoir d'autres possibilités...

Non les puces ne sont pas personnalisables via CSS donc il n'y a que cette possibilité

Mais tu as des valeurs en trop et des éléments à ajouter:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<style type="text/css" media="screen">
<!--
.puce {
background: url(img/test.gif) no-repeat 0 50%;
padding-left: 20px; 
}
-->
</style>

Pour que la puce se place toujours au centre quelque soit la taille du texte, il faudra ajouter un positionnement vertical de la puce en % ou em (entre 40 et 60% le plus souvent).