28172 sujets

CSS et mise en forme, CSS3

Puce - Alignement du texte lors du retour à la ligne

Bonjour

Ne trouvant pas les mots pour vous expliquez mon "problème", j'ai réalisé une petite image sur Photoshop afin d'illustrer le résultat que je souhaiterai obtenir.

Ma liste à puce avant :
upload/54527-avant.png

Et voici comment je souhaiterai la faire évoluer :
upload/54527-apres.png

Je souhaiterai que le texte soit aligné en dessous du texte et non en dessous de la puce lorsqu'il passe à la ligne.

Quelqu'un aurait-il une solution ?

Merci par avance,
Modifié par Webcreation (25 Apr 2014 - 15:31)
Bonjour,

Comment sont intégrées ces puces, background-image, liste-type-image ?
Les codes HTML/CSS ne seraient pas inutiles, une page en ligne serait top Smiley cligne
Voici pour le code HTML :
<ul>
<ul>
<ul>
	<li><i class="fa fa-globe"></i> Working in international and multilingual environments.</li>
	<li><i class="fa fa-check-square-o"></i> Accompanying companies in their evolution and helping them find new and coherent market approaches.</li>
	<li><i class="fa fa-link"></i> Motivating people to work together towards common causes and projects.</li>
	<li><i class="fa fa-thumbs-o-up"></i> Working with people of quality in atmospheres of trust and fun.</li>
</ul>
</ul>
</ul>

En revanche je ne sais pas où se situe le CSS concerné... J'ai créer ce site sur Wordpress. Cela doit donc se trouver dans le fichier "style.css" mais je n'ai pas trouvé la ligne.
Modifié par Webcreation (25 Apr 2014 - 17:42)
Bonjour.

Quelque chose du genre :

ul li {
	list-style: none;
	margin-left: 0;
	padding-left: 16px;
	text-indent: -16px;
}

ul li:before {
	content: "&#9679;";
	font-size: 16px;
	line-height: 16px;
	padding-right: 5px;
	vertical-align: text-bottom;
}

Bonne continuation.
salut,
tu pourrais directement passer par "list-style-image" ou bien faire un truc plus simple avec un ":before" en utilisant les flottants

<ul>
	<li><div>blablablablablabla <br />blablabalbalabla <br />blablabalbalabla <br />blablabalbalabla</div></li>
	<li><div>blablablablablabla <br />blablabalbalabla <br />blablabalbalabla <br />blablabalbalabla</div></li>
	<li><div>blablablablablabla <br />blablabalbalabla <br />blablabalbalabla <br />blablabalbalabla</div></li>
	<li><div>blablablablablabla <br />blablabalbalabla <br />blablabalbalabla <br />blablabalbalabla</div></li>
</ul>	



li {list-style:none;}
li:before {content:url(puce.png);float:left;}
li>div {overflow:hidden;}
Merci pour vos réponses !

Ne souhaitant pas remplacer mes puces par des images j'ai essayé la technique de thierry. En revanche cela modifie toutes les puces de mon site (y compris celle de ma barre de navigation !). Je dois donc modifier le code de manière à créer une "Extra class name". Une petite définition du terme est proposée sur mon panel Wordpress, je cite :

Déf. : If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

J'ai donc essayé mais je ne sais pas quels termes dois-je utiliser...
Voici ce que j'ai essayé et qui ne fonctionne pas :

.extraclassname ul li {
	list-style: none;
	margin-left: 0;
	padding-left: 16px;
	text-indent: -16px;
}

.extraclassname ul li:before {
	content: "&#9679;";
	font-size: 16px;
	line-height: 16px;
	padding-right: 5px;
	vertical-align: text-bottom;
}

Modifié par Webcreation (28 Apr 2014 - 20:45)
Sujet clos
Aller à