Image flottante - parfois trop de place dessous?

karine - AAM · 24 Février 2019

Bonjour,

je pratique depuis peu les images flottantes, youpi, c'est super!
mais j'ai un souci sur quelques images et je ne trouve pas ce qui cloche par rapport aux autres...

La plupart du temps, cela fonctionne bien, et je cale le reste du texte avec un "clear:both".
Mais parfois, il reste beaucoup de place sous l'image, et je ne comprends pas pourquoi?

Un exemple du problème :
http://www.art-et-artisanat-du-monde.com/francais/recherche/recherche_oeufs_oie.php

Et sur cette page, ça marche presque chaque fois : mais pourquoi pas tout le temps? grr...
http://www.art-et-artisanat-du-monde.com/francais/actualites/blog.php

Si quelqu'un peut me souffler la solution? merci d'avance, je craque un peu...

Karine

cthierry · 24 Février 2019

Commence par mettre ton image en premier dans le paragraphe en lui laissant un bord (en css) pour ne pas qu'elle apparaisse "collée" au texte. Et pour l'espace sous l'image, revoit ton code

PS : L'inspecteur d'élément de Chrome est ton ami pour faire le débug

Ex avec du style inline qui est pas beau du tout : https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2

karine - AAM · 24 Février 2019

Bonjour,

Merci pour le conseil pour chrome, mais je ne l'ai pas, je suis sous vista.. peut-être y-a-t-il la même chose sous mozilla?

J'ai déjà une marge sur ces images, je les ai définies dans le fichier css :

.Flottante_Blog {
float: left;
padding-left:20px;
padding-right:20px;
}

Et pour le texte que je veux voir juste sous l'image, je lui applique ce div là :

.Retour_dessous {
clear: both;
}

ça semblait simple dans tous les exemples, mais chez moi, ça ne donne pas toujours le même espacement entre l'image et le texte en-dessous... :-(

indigene · 24 Février 2019

Ne faut-il pas utiliser margin au lieu de padding ?
Sinon perso je met les images flottantes dans une div et c'est la div que je rend flottante. Et pour la taille des images il me semble préférable d'utiliser max-width:100%; en plus de préciser la largeur.

Essaye avec une div flottante pour commencer.

Mais je ne suis pas certain que ça vient de là. C'est juste une proposition.

karine - AAM · 24 Février 2019

Merci pour les idées!

J'ai essayé les différentes propositions : margin, div flottante... rien n'y fait.
Quant à max-width:100%, je ne sais pas où le mettre?

indigene · 25 Février 2019

<div>
<div class="flottante">
<img ......>
</div>
<div class="text">blabla</div>
</div>

Mais il faudrait commencer par corriger toutes les erreurs html car les navigateurs doivent s'y perdre un peu.

Similar Threads - Image flottante place	Forum	Date
CSS : sélectionner les images flottantes	Développement d'un site Web ou d'une appli mobile	15 Février 2013
Empêcher l'indexation d'images dont le nom contient une chaîne donnée	Crawl et indexation Google, sitemaps	27 Juin 2020
Balise Alt d'une image	Crawl et indexation Google, sitemaps	8 Juin 2020
Google Image, url des fichiers et traduction	YouTube, Google Images et Google Maps	4 Juin 2020
Vérifier si plusieurs images ont le même poids	Développement d'un site Web ou d'une appli mobile	13 Mai 2020
Position images/slideshow dans page ?	Rédaction web et référencement	12 Mai 2020
Insérer 1 image google dans une page	Développement d'un site Web ou d'une appli mobile	26 Avril 2020
WordPress Questions de SEO pour les images et duplicate content	Débuter en référencement	11 Avril 2020
Astuce Presta passage de 1.6 à 1.7 en gardant les images rubriques et sous rubriques	e-commerce	8 Avril 2020
Astuce optimisation image au format Webp	YouTube, Google Images et Google Maps	6 Avril 2020