18041 sujets

Questions générales et questions de débutants

Pb image et liste à puce

Bonjour,

j'arrive pas à résoudre un pb qui parait pourtant simple, mais qui ne fonctionne pas sous IE (à la surprise général)

J'aimerai afficher une image à gauche et une liste à puce(stylisés avec une image) à droite telles que : je sais pas si mon dessin va etre top
mon image
----------- * ma puce qui fait bien
| | * ma puce qui fait bien
| | avec un retour à la ligne qui fait bien
| | avec un retour à la ligne qui fait bien
| | * ma puce qui fait bien
| | * et avec une deuxieme liste à puce qui fait bien
| |
-----------

et sous IE, mes puces se retrouvent derriere l'image
tout ca pour avoir une image flottante type éditorial avec un texte qui l'entoure et la possibilité de mettre une liste à puce qui s'aligne correctement etc etc...
Je ne comprends pas trop ton problème, y aurait-il un moyen quelconque de visualiser tout ça ? =)
vi vi Smiley sweatdrop
Voila, ca c'est ce que je voudrais avoir sur IE et sur FF :

upload/14340-Sans-titre.gif

tin désolé de faire nimp sur le forum, faut que jm'habitue et ya pas moyen d'effacer son message Smiley confused
Modifié par DenZ (09 Oct 2007 - 12:31)
bjr,

il faut faire un css pour mettre une image à la place de la puce d'origine

voir message ci dessous

désolé pour le double post
Modifié par flattazor (09 Oct 2007 - 15:50)
bjr, il te faut un css

ex:

.puce{ background-image:url(../images/puces1.gif);
background-repeat:no-repeat;
background-position:0% 6.5%;
padding-left:30px;
}

puis en html
<li class="puce">blabla</li>
c'est bien ce que j'avais fait. Sous FF ca marche impec, mais sous IE, les puces passent sous l'image (voir image les puces sont symbolisées en blanc pour plus de visibilité)

upload/14340-Sans-titre.gif

je voudrais le meme rendu sous FF que sous IE

voici le code :
CSS :

ul {
	margin :0px;
	padding:0px;
	list-style-type: none;
}

li{
	background-image:url(puce-noire.gif);
	background-repeat:no-repeat;
	background-position:0% 6.5%;
	padding-left:16px;
}



et pour le HTML :

<img src="toto.jpg" align="left" />
Du texte, du texte, du texte, du texte, du texte
<ul>
  <li>mon texte</li>
  <li>mon texte<br />mon autre texte</li>
  <li>
       mon texte
       <ul>
         <li>ma 2ieme ligne</li>
         <li>ma 2ieme ligne</li>
       </ul>
  </li>
</ul>
Du texte, du texte, du texte, du texte, du texte.Du texte, du texte, du texte, du texte, du texte
un piti up, quelqu'un aurait une solution ?

il me semble que cela fait la meme chose si au lieu d'avoir image entourée de texte, j'avais un block div entouré de texte... les puces débordent sous IE
Hello!
IE6 ou 7?
J'ai testé avec les fragments de code que tu fournis.
Je ne vois aucun problème, ca passe sans problème sous FF2, IE6 et Opera Smiley ohwell
Le problème vien-t-il d'ailleurs?
Essaye de le faire sur une simple page de test avec les codes que tu nous as fournis...

CSS:

@charset "utf-8";
/* CSS Document */
ul {
	margin :0px;
	padding:0px;
	list-style-type: none;
}



li{

	background-image:url(puce-noire.gif);
	background-repeat:no-repeat;
	background-position:0% 6.5%;
	padding-left:16px;
}


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<img src="toto.jpg" align="left" />
Du texte, du texte, du texte, du texte, du texte
<ul>
  <li>mon texte</li>
  <li>mon texte<br />mon autre texte</li>
  <li>mon texte
      <ul>
         <li>ma 2ieme ligne</li>
         <li>ma 2ieme ligne</li>
       </ul>
  </li>
</ul>
Du texte, du texte, du texte, du texte, du texte.Du texte, du texte, du texte, du texte, du texte
</body>
</html>






Salut!



-- Aiwe --
Sujet clos
Aller à