Retour à la ligne après image (Créer un compte)

  • Statut : non résolu
12 sujets de 1 à 12 (sur un total de 12)
  • Auteur
    Messages
  • #456658
    kapsteur
    Membre
    Initié WordPress
    13 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 2.3.2
    – Thème utilisé : yello 3
    – Plugins en place : aucun liée au problème
    – Nom de l’hebergeur : 1and1
    – Adresse du site : http://www.kapsteur.com

    Problème(s) rencontré(s) :
    Bonjour, alors mon problème est que aucun retour a la ligne n’est effectué après l’insertion d’une image (voir l’article ApoLynx et le eeePc). Et que quand une image est placé à la fin de l’article, elle dépasse de l’article (voir Ma participation au concours “I LOVE MY TEE SHIRT”). Je n’utilise aucun plugins de gestion d’image.

    #619299
    damino
    Participant
    Maître WordPress
    1241 contributions

    Tu n’utiliserais pas la propriété float:left pour tes images par hasard ?

    Dans ce cas il te faut rajouter la propriété clear:left pour forcer ton image à revenir dans le flux.
    Dans ton cas il faut rajouter cela au sélecteur .item_class img

    #619300
    damino
    Participant
    Maître WordPress
    1241 contributions

    Pour le tee-shirt … même combat à cause du float:left.

    dans ce cas il me semble (à la louche) que cela viendrait du .item_panel auquel il faut rajouter le clear.

    Par contre, tu l’as trouvé où ton thème ? Le code est compliqué je trouve.
    Et autre question : tu rédiges tes articles depuis l’admin WordPress ou tu fais un copier/coller depuis Word ou autre ?

    #619301
    kapsteur
    Membre
    Initié WordPress
    13 contributions

    je rédige mes articles avec l’éditeur visuel de texte de wordpress. Mais image son centré, avec la fonction centré le texte, excuse moi mais j’ai pas très bien saisi ou je dois modifier le float:left? le code pour l’article du tee-shirt est celui-ci :

    La boutique communo-tee a organisé un concours pour gagner un ipod nano 3ème generation de 4go donc je me suis dit après l’échec cuisant au concours blogeur du sud, je me devais d’essayer de me rattraper sur communo-tee. Le but du concours est de partager une photo illustrant le plus la phrase suivante ‘I love my tee-shirt« . Mes finances n’étant pas aux plus haut, je n’ai pas pu m’acheter un tee de chez communo-tee donc je me suis rabattu sur mon Threadless que j’adore. Pour participer à votre tour rendez-vous ici. Les candidatures peuvent être posté jusqu’au 31 décembre.

    #619302
    damino
    Participant
    Maître WordPress
    1241 contributions

    Je te confirme que le problème vient de cette propriété située dans ta feuille de style (.css).
    Dans ton thème, l’auteur du thème a prévu que les images dans les articles soient en flottant à gauche. Mais il a oublié le cas où 2 images se suivent et le texte qui entour l’image n’est pas assez long. D’où le clear:left à ajouter.
    J’ai vérifié sur ton site pour le point 1 et ça fonctionne.

    #619303
    kapsteur
    Membre
    Initié WordPress
    13 contributions

    Merci pour ton aide j’ai remplacé float:left par clear:left et tous est rentrer dans l’ordre.

    #619304
    YannC
    Membre
    Chevalier WordPress
    295 contributions

    Moi, quand je mets des clear:left après mes images en float:left, IE (IE6, de test) m’intercale une height vide de jenesaispascombien de pixels, c’est un désastre de chez désastre 😗

    Mais je viens de réaliser que tu conseillais peut-être de mettre ce clear:left; juste après le float:left;

    dans le même sélecteur du css : genre img {float:left; clear:left; }

    et pas dans le code html

    <img class="img" />

    C’est ça ?

    Je vais tester, c’est juste que ces histoires de float et clear me gâchent souvent mes mises en page.

    #619305
    damino
    Participant
    Maître WordPress
    1241 contributions

    Oui c’est à rajouter après la propriété float:left sur le même sélecteur dans ta feuille de style.
    Donc pour notre ami Kapsteur tu peux laisser la propriété float:left mais ajouter clear:left juste après si tu veux que tes images soient entourées par ton texte.

    #619306
    YannC
    Membre
    Chevalier WordPress
    295 contributions

    J’ai testé sur un thème que je fais en ce moment, là où ça me décale le contenu central. Ca ne marche pas bien , IE décale toujours qqchose ; mais vu qu’il y a plein de code avant et après, ça doit venir des interférences. Tant pis. Je garde en l’état et j’améliorerais sur le prochain travail 😗

    Sinon, j’ai regardé pas mal de méthodes css et cette inclusion dans le même sélecteur semble plutôt rarement utilisée. En général, ils mettent une balise vide, comme
    avec la propriété clear dedans, juste après le ou ls éléments en float. Ou alors ils mettent « overflow:auto » dans l’élément parent qui enveloppe l’élément flottant.

    Ce float est étrange.

    Merci de ta réponse 😉

    #619298
    Catioucha
    Participant
    Padawan WordPress
    56 contributions

    Excusez moi de m’insinuer dans la discussion mais j’ai exactement le même soucis (impossibilité de faire un retour à la ligne, si je le désire, après une image)…

    Or j’utilise le thème Mandigo (1.31) sur un WordPress 2.3.2 et horreur, malheur : la feuille de style style.css est réduite à sa plus simple expression et ne comporte aucune mention de « float » quoique ce soit :(

    Je suis très novice en html, même si je comprends de mieux en mieux comment fonctionne le code sur mon blog, mais je suis contrainte à bricoler en règle générale et là j’ai beau ajouter des et des balises de paragraphe tant que je veux, pas moyen de faire un saut de ligne après une image !

    Le thème comporte une option de personnalisation qui fait débuter le texte en bas d’image et il court donc ensuite sous l’image s’il est trop long, mais ce n’est pas ce que je veux : j’aimerais que l’image puisse rester encadrée par le texte, sauf quand je désire forcer un saut à la ligne…

    Est-ce que quelqu’un connait la procédure à faire avec Mandigo ? 😇

    EDIT : je n’ai pas be lien vers un billet pour illustrer quel est mon problème, mais je vous envoit une capture d’écran d’un de mes brouillons sur lequel je travaille en vain… Il s’agit d’un billet généré automatiquement par BlogMarks pour publier mes favoris du jour… or le résultat visuellement n’est pas franchement publiable :
    blogpbimagesyj8.th.jpg

    #619307
    damino
    Participant
    Maître WordPress
    1241 contributions

    Catioucha, pour la mise en forme cela se passe généralement du côté de ta feuille de style. Donc au niveau du langage CSS.

    #619308
    Catioucha
    Participant
    Padawan WordPress
    56 contributions

    Arf… Je me doutais aussi… 😕

    Le soucis c’est que j’ai contacté l’auteur du thème Mandigo il y a quelques semaines maintenant et que je n’ai malheureusement pas encore eu de réponse de sa part :(

    Du coup j’ignore complètement comment modifier ma feuille de style pour que concernant les images j’ai une plus grande marge de manoeuvre (possibilité de sauter une ligne après et que le texte ne commence qu’en bas de page, possibilité de centrer l’image dans la page éventuellement, etc.).

    Existe-t-il ici quelqu’un qui puisse m’aider à opérer cette légère modification ? Dans ce cas que dois-je faire (poster ici le code de ma feuille de style, etc.) ?

    Ou connaissez-vous un plugin permettant la gestion d’image de manière très libre et simple ? J’utilisais avant Image Manager mais je n’ai pas été convaincue, il ne permettait pas tant que ça de liberté dans la mise en page après (alignement libre des images etc.) ou sans doute que mon thème n’était pas compatible avec ces fonctionnalités et ne permettait tout simplement pas d’aligner les images comme on veut dans la page…

    Merci par avance pour toutes les réponses que vous pourrez m’apporter 😇

12 sujets de 1 à 12 (sur un total de 12)
  • Vous devez être connecté pour répondre à ce sujet.