28172 sujets

CSS et mise en forme, CSS3

[Résolu] Images float left à gauche de listes à puces

Bonjour,

je rencontre ce problème quand je mets des images en float left à gauche de mon texte, pas de problème avec les paragraphes, par contre, avec les listes à puce, les puces disparaissent sous l'image généralement (j'utilise un background pour la puce au lieu du disc ou autre list-style-type)
Modifié par luxe-campagne (16 Jan 2010 - 00:07)
Bonsoir,

Pourrais-tu nous montrer ton code html et css car là, ce n'est pas assez explicite.
Ajoute à tes éléments ul et p une marge à gauche au moins équivalente à la largeur de l'image.
ul, p {
  margin-left: 370px;
}

Modifié par Victor BRITO (13 Jan 2010 - 09:09)
moi je pense également que le problème est que tu utilises la propriété background pour tes puces

en effet le background va toujours s'aligner sur la gauche

donc le mieux c'est d'utiliser list-style-image Smiley decu url ....);

et tu rajoutes list-style-position:inside;

afin de "prendre" la puce dans l'élément li

je me suis permis de modifier un peu ton code html & css de la manière suivante:

le code html:
<body>
<div id="page">
<h2>Test avec des li</h2> 
<div class="paragraphe">
  <img src="http://luxe.campagne.free.fr/images/campagne.jpg" alt="campagne" class="photo" />
  <ul> 
<li>Lorem ipsum</li> 
<li>Lorem ipsum</li> 

[réduit ici pour le forum]

<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div> 

<div class="paragraphe">
<h2>Test avec des paragraphes</h2> 

<img src="http://luxe.campagne.free.fr/images/campagne.jpg" alt="campagne" class="photo" />
				<p>Lorem ipsum dolor sit amet, ... Cras id mi justo. Morbi accumsan ornare convallis.</p>
            
[réduit pour les besoins du forum]

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... Cras id mi justo. Morbi accumsan ornare convallis.</p>  
</div>
</div>
</body>


le code css:

* {
	margin: 0;
	padding: 0;
}
		
body {
	width: 100%;
	height: 100%;
	font-family: Arial;
	font-size: 12px;
	color: #333;
	background: #ccc;
}

#page {
	padding: 10px;
	width: 600px;
	margin: auto;
	background: white;
}

/* ajout perso */

.photo {
	float:left;
	width:370px;
	height:370px;
	margin-right:10px;
	margin-bottom:10px;
}

.paragraphe {
	clear:both;
	margin-bottom:20px;
}

.paragraphe ul li {
	list-style-image:url(http://luxe.campagne.free.fr/test_css/puce.gif);
	list-style-position:inside; /*considère la puce comme origine et non plus la 1ère lettre du li */
}

.paragraphe p {
	padding-bottom:15px;
	text-align:justify;
}


petite précision sur clear:both qui sert en réalité à remettre un élément dans le flux car avec la propriété float on l'enlève ...

voici un aperçu:

upload/26249-problemeli.gif

donc maintenant reste le problème d'aligner la puce

enfin c'est ce que j'ai trouvé après je suis preneur d'autres idées bien entendu
bon en réfléchissant un peu avec la solution que j'ai proposé

il faut modifier l'image de la puce,

1- supprimer les blancs de l'images

2- l'enregistrer en png

ceci à pour but de rendre la puce utilisable sur n'importe quel fond car toutes les zones anciennement blanches deviendront transparente

puis sinon pour la centrer il faut augmenter la taille du texte ou sinon réduire la taille de la puce

je vais creuser par là
Si tu ne souhaite pas que les éléments de liste "coulent" autour de ton image en float, je te proposerai bien d'ajouter à ton ul : "overflow:hidden;" (et "zoom:1;" pour IE6) . Et cela résoudra aussi ton problème par la même occasion...

Je ne sais pas si j'ai le droit d'envoyer vers un lien externe (sinon un modérateur se fera un plaisir d'éradiquer l'adresse Smiley langue ), mais voici un article sur le pourquoi du comment : Le contexte de formatage
Modifié par Nigel (13 Jan 2010 - 19:15)
Merci beaucoup Quikers pour cette solution très complète (j'ignorais qu'on pouvait mettre des images à la place des pupuces...)
Et en plus je sais maintenant qu'on ne peut pas lutter avec un simple background.

Merci aussi à Nigel pour ces infos très intéressantes sur le contexte de formatage.
Sujet clos
Aller à