Image flottante - parfois trop de place dessous?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par karine - AAM, 24 Février 2019.

  1. karine - AAM
    karine - AAM WRInaute discret
    Inscrit:
    26 Janvier 2007
    Messages:
    61
    J'aime reçus:
    2
    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
     
  2. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 354
    J'aime reçus:
    87
    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
     
  3. karine - AAM
    karine - AAM WRInaute discret
    Inscrit:
    26 Janvier 2007
    Messages:
    61
    J'aime reçus:
    2
    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... :-(
     
  4. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 101
    J'aime reçus:
    176
    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.
     
  5. karine - AAM
    karine - AAM WRInaute discret
    Inscrit:
    26 Janvier 2007
    Messages:
    61
    J'aime reçus:
    2
    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?
     
  6. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 101
    J'aime reçus:
    176
    <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.
     
Chargement...
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
Liens en do follow ou no follow pour créditer les images ? Netlinking, backlinks, liens et redirections 14 Mai 2022
Images upscalées ou downscalées et le SEO Débuter en référencement 6 Mai 2022
Shopify : images hébergées sur CDN, en dehors du nom de domaine YouTube, Google Images et Google Maps 4 Mai 2022
URL rewriting d'images URL Rewriting et .htaccess 22 Janvier 2022
Quota d'images sur une page Débuter en référencement 10 Janvier 2022
Utiliser plusieurs fois une même image sur un site YouTube, Google Images et Google Maps 3 Janvier 2022
images en responsive, balises et rapidité de chargement Développement d'un site Web ou d'une appli mobile 20 Décembre 2021
problème avec la mise en cache des images de mon site Développement d'un site Web ou d'une appli mobile 19 Décembre 2021
référencement image sur imgbox, Imgur Débuter en référencement 8 Novembre 2021
Duplicate images pour déclinaisons de produits Débuter en référencement 20 Octobre 2021
Référencement - nom des fichiers images Débuter en référencement 22 Septembre 2021
URL image située sur un autre site ou sous-domaine YouTube, Google Images et Google Maps 17 Septembre 2021
Comment accélérer chargement d'une image ? Développement d'un site Web ou d'une appli mobile 4 Septembre 2021
WordPress Actualiser le titre d'une image référencée par mes domaines référents Netlinking, backlinks, liens et redirections 3 Août 2021
faut-il activer les URL image ou éviter pour économiser le crawl Référencement Google 21 Juin 2021
Page indexée mais pas les images Problèmes de référencement spécifiques à vos sites 10 Juin 2021
Images Webp : peut-on se passer d'images alternatives ? YouTube, Google Images et Google Maps 1 Juin 2021
Temps de chargement - Une image full width peut-elle peser moins de 100ko ? Développement d'un site Web ou d'une appli mobile 1 Juin 2021
Linkedin : comment ajouter une URL sur une image ? Autres réseaux sociaux 1 Juin 2021