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).

[tim974]

Salut,

C'est possible de personnaliser ses puces.

Code :

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

list-style-image: url("images/puce.png");

[romfauch63]

oui, mais apparemment cette solution pose des soucis de positionnement de l'image entre les différents navigateurs.

à tester/vérifier.

[Erwan31]

Salut,
C'est possible de personnaliser ses puces.

En gros ça revient au même que le background mais en moins intéressant.
Ce que je voulais dire c'est que les puce prédéfinies (square...) ne sont pas personnalisables

[razorlok]

Donc je suis obligé de passer par un fichier image ?

[Bovino]

Ah oui, il existe une série de puces prédéfinies, mais si tu en veux d'autres, il faut passer obligatoirement par un fichier externe

[Erwan31]

Donc je suis obligé de passer par un fichier image ?

Oui il n'existe pas de puce arrow.

[razorlok]

Hum, je vais devoir me traficoter une image alors.