Discussion :

[SpaceFrog]

Juste un petit post rapide pour partager une bizarrerie que j'ai rencontré récemment

le code html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div>
    <img src="xxx" />
    <div>
          <ul>
              <li>un</li>
              <li>deux</li>
              <li>trois</li>
              <li>quatre</li>
           </ul>
    </div>
</div>

l'image est en float left...

On serait en droit de s'attendre donc à avoir de gauche à droite l'image, puis les puces, puis les textes des li ...

Hé bien sous IE non on a d'abord les puces, puis l'image et enfin le texte les li !!!

J'ai trouvé deux solutions pour remédier à cela:

- mettre un display table sur le ul
- mettre un list-style-position : inside sur les li

Si vous avez d'autres retours d'expérience sur ce bug ...

[Invité]

Bonjour,

L'image étant flottante, elle se "pose SUR" le bloc (en "écartant" les éléments : sur I.E. entre les puces et les textes).

Si tu inspectes (F12) la liste, on voit bien que l'image est "dessus".

En fait, ce n'est pas une bizarrerie, car c'est ce qui permet à du texte de "s'enrouler autour" des images.
(par contre, s'est mal adapté aux listes à puces... !)

Code css :

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

1
2
3
 
img { float:left; }
ul { display:inline-block; }

Avec display:inline-block;, le bloc... "fait bloc" (!), et se place à droite de l'image.
l'image est bien à gauche du bloc, et plus "dessus".


N.B. la <div> entourant le <ul> n'est pas utile.

Sinon :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div>
  <img src="http://www.developpez.net/forums/avatars/547-spacefrog.gif?dateline=1422517814" />
  <div>
    <p>sqdfqfsdfqsdf qsdfqsdf</p>
    <ul>
      <li>un</li>
      <li>deux</li>
      <li>trois</li>
      <li>quatre</li>
    </ul>
  </div>
</div>

Code css :

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

1
2
img { float:left; }
div > div { display:inline-block; }

[SpaceFrog]

Oui le principe du float et du texte qui se wrap autour de l'image je vois bien.

Mais pourquoi donc les puces de li se désolidarisent comme ça ...

[Invité]

Je suppose qu'elle ont un positionnement de type "absolute" par rapport au li.
Et par rapport au coté "left".

du genre :

Code css :

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

li:before { position:absolute; left:xxx;... }

list-style-position (outside/inside) doit juste modifier le comportement left:xxx;.

(on visualise mieux en grisant un li)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="div1">
  <img src="http://www.developpez.net/forums/avatars/547-spacefrog.gif?dateline=1422517814" />
    <ul>
      <li style="background-color:#ccc;">un</li>
      <li>deux</li>
      <li>trois</li>
      <li>quatre</li>
    </ul>
</div>
<br />
<div id="div2">
  <img src="http://www.developpez.net/forums/avatars/547-spacefrog.gif?dateline=1422517814" />
    <ul>
      <li style="background-color:#ccc;">un</li>
      <li>deux</li>
      <li>trois</li>
      <li>quatre</li>
    </ul>
</div>

Code css :

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

1
2
3
img { float:left; padding-left:50px; /* (pour mieux voir les puces) */ }
 
#div2 > ul { display:inline-block; } /* Uniquement sur le 2eme div */

Exemple (Edge / Firefox) :

[SpaceFrog]

Quelle idée de différentier le style des puces par rapport au li ...
Je ne comprends pas l’intérêt de l'absolute

bien vu les exemples ...