28172 sujets

CSS et mise en forme, CSS3

Décaler un texte sous une liste à puce

Bonjour,

J'ai souhaité remplacer un lot de puces par des images précises. Jusqu'ici rien de compliqué.
Voici le code utilisé :

.listeadresse {
background-image: url("adresse.png");
font-size: 18px;
list-style-type: none;
background-repeat: no-repeat;
background-position: 0;
padding-left: 36px;
margin: -2px;
}


En revanche, sous chaque puce il y a un petit texte et j'aimerais que ce texte soit décalé au même niveau que le nom de la puce, une image vaut mieux qu'un long texte. Dois-je utiliser des balises DIV englobant le texte et mettre une règle spécifique sur ces DIV en CSS où il y a une meilleure balise à utiliser / meilleur moyen ? Désolé pour cette question de débutant.

J'aimerais donc que l'adresse et le "20 minutes à pied..." soit décalés au même niveau que le "A" de Adresse.

1. Voilà l'image en question pour y voir plus clair :

http://www.planetemaneki.com/decale.png

2. Voilà le code également :

<ul class="listeadresse">
	<li><strong>Adresse</strong></li>
</ul>
2482 Chugushi, Nikko
20 minutes à pied depuis l'arrêt de bus Tachiki Kannon
<ul class="listehoraire">
	<li><strong>Horaires</strong></li>
</ul>
Avril-Juin et Septembre-Novembre : 9h00 à 16h00
Juillet-Août : 9h00 à 17h00


Merci par avance !
Modifié par planetemaneki (31 Jul 2015 - 18:17)
Modérateur
Salut,

Lis ce sujet, ça va t'aider. Tu peux aussi travailler avec le background et ajouter du padding.
Modifié par niuxe (01 Aug 2015 - 02:08)
Merci.

J'ai essayé de mettre des balises <ul> sur chacun des textes mais ce n'est pas propre du tout et à chaque fois que j'enregistre le brouillon de mon article, Wordpress décale tout Smiley ohwell

(en mettant des <ul> cela me décale bien les textes sous le nom principal de la puce mais Wordpress les décale dès que je change quelque chose dans l'article)

La technique du blockquote dans la réponse de Raphael doit bien fonctionner pour un bloc de citation mais en ce qui me concerne j'ai en gros

[PUCE] [image de la PUCE] [Texte de la PUCE en 18px]
[Texte]
[Texte]

Je ne sais pas quel champ mettre sur les deux [Texte] pour que ce soit propre avec un css...
Modifié par planetemaneki (01 Aug 2015 - 11:48)
Sujet clos
Aller à