Vu liste élément différent 1 sur 2

bonjour,

je vous ai fait un petit schéma car je pense que c'est plus simple pour la compréhension.

j'aimerai faire cela.
pour le moment j'ai une liste d’élément ul li, mais identique à l'element 1.

schéma en pièce jointe.

Pièce jointe 130928

:ptdr:

Ceci dit, ça ne suffit pas pour cadrer avec la demande... il manquerait un

Code:

---

1 2 3

body{ transform: rotate(270deg); }

---

:mrgreen:

Pièce jointe 130927

je ne veux pas la forme horizontal l'image c'est telechagé couché lol.

en faite j'ai

Code:

---

1 2 3 4 5 6 7 8 9

<li idcontent="436830"> <a href="#" idcontent="436830" onclick="callJson('type',436830)"> <div style="position:absolute"> <img src="monimg.jpg" height="70" width="104"> </div> <div id="titreArticle" style="margin-left:110px">mon article </div> <p class="descr"> ma description</p> </a> </li>

---

ça c'est mon code pour que mon image soit à gauche et mes deux ligne de texte à coté d'elle.

je voudrais faire de même mais le texte à gauche et l'image à droite.

si je met float right sur l'image elle reste à gauche quand même.

Alterner avec float right et left :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<section> <div class="first"> <img src="http://lorempixel.com/100/100" height="70" width="104"> </div> <div id="titreArticle" >mon article <p class="descr"> ma description</p> </div> </section>   <section> <div class="second"> <img src="http://lorempixel.com/100/100" height="70" width="104"> </div> <div id="titreArticle" >mon article <p class="descr"> ma description</p> </div> </section>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

img{ display: block; } section{ width: 300px; border: 1px solid blue; } .first{ float:left; } .second { float:right; }

---

http://codepen.io/anon/pen/vqmoJ

c'est mieux section que li ??

en faite c'est le position absolute qui bloqué.

Merci bien.