Mettre une image en Float left a coté d'une liste a puce à droit

Titoforlife -
Pitet Messages postés 2845 Statut Membre - 19 janv. 2016 à 13:46

Bonjour,

Comment faire pour mettre a gauche une image en Float, et a droite de celle ci une liste a puce, je ne trouve pas les combinaisons gagnates ?!

Afficher la suite

A voir également:

Image float html
Editeur html - Télécharger - HTML
Légende image word - Guide
Reduire taille image - Guide
Image iso - Guide
Acronis true image gratuit - Télécharger - Sauvegarde

4 réponses

Réponse 1 / 4

Pitet Messages postés 2845 Statut Membre 528

Salut,

Comme ceci ?

<img src="image.jpg" class="monimage">
<ul class="maliste">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

.monimage, .maliste {
    float: left;
}

Bonne journée

Titoforlife

cela ne fonctionne pas , j'ai essayé de faire float right sur ma liste sans résultat, en laissant float left a ma liste elle se met toujours en bas de mon image :/

Pitet Messages postés 2845 Statut Membre 528

Pourtant on peu difficilement faire plus simple : https://jsfiddle.net/u41jo4q3/
Une autre solution est d'utiliser display: inline-block; pour aligner des éléments horizontalement.

Peux tu nous montrer ton code ?

Réponse 2 / 4

Titoforlife

<body>
    <h1> Lavier anthony </h1>
   <p> Bénévole au sein d'une association </p> <br/>
  
  <p>
    <img src="1.png"/>
</p>

   <h2> Mon Expérience </h2>
  
<h3> Création d'une association <em> Gaia & Compagnie </em> dans l'évenementiel </h3>

<img src="fond2.png" class="monimage">

<ul class="maliste">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

</body>
</html>

Pitet Messages postés 2845 Statut Membre 528

Quelles sont les dimensions de l'image fond2.png stp ?

Titoforlife > Pitet Messages postés 2845 Statut Membre

l'image fait 137/90 pourquoi la taille peut poser problème?

Réponse 3 / 4

Titoforlife

code CSS :

.monimage, .maliste
{
    float: left;
}

Réponse 4 / 4

Pitet Messages postés 2845 Statut Membre 528

En reprenant ton code, la liste se positionne bien à coté de l'image (à condition que la fenêtre ai une largeur supérieur à la largeur de l'image + la largeur de la liste) : https://jsfiddle.net/rL917acv/

Discussions similaires

Retrouver l'image originale d'une photo modifiée

Comment recadrer une image avec Inkscape

PIX

Discussions similaires

Newsletters