Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
***[RÉSOLU] centrage photos
  • Bonjour, malgré les informations d'Iv-oam, les photos ne se centrent pas dans l'article.

    ob-section-images  

    .ob-row-1-col img{margin:auto, display:block; width: auto; max-width:100%;}

    .CtreTexte {margin: auto; display: block; width: auto;}


  • Les images sont centrées... Mais dans une largeur d'article qui est limitée à 600px 

    Ligne à ajouter dans la partie CSS

    #page .post {max-width: 100%;}

    8-|
  • Bonsoir Iv-oam, les photos ne se centrent toujours pas et le texte se met sur une bande à gauche.
  • Iv-oam, excuse-moi j'ai fait et dit une connerie. J'ai marqué 100px au lieu de 100%. merci beaucoup. Bonne soirée.

  • J' ai placé la phrase dite en tenant compte de l'article


    et cela ne fonctionne pas. L'ai je placée au bon endroit???
    ligne 759 avant le dernier "style"

    Cordialement
    Charisma45
  • Bonjour



    Je cherche à re-centrer des photos placées à gauche suite à la migration, pour certaines cela se fait sans problème, pour d'autres, impossible
    6ème photo juste après le diaporama

    Merci de vos conseils

    Cordialement
    Charisma45
  • Bonsoir,
    peut-être l'avais-tu positionnée au moment de la rédaction de l'article, dans ce cas le html l'emporte toujours sur le css.
    Pour la centrer, tu vas dans ton article, tu bascules en html et tu entoures l'adresse de ton image des balises 
    <center></center>   
  • Bonjour,

    Pour bien faire, il faudrait simplifier le code :

    <p><img alt="Geraudot 01" class="CtreTexte" height="224" src="http://img.over-blog.com/300x224/2/58/68/53/France/Champagne-Ardennes/Geraudot-01.JPG"></p>


    En ajoutant côté CSS

    .CtreTexte {margin: auto; display: block; width: auto;}

    Au passage, erreurs à corriger dans CSS :
     /* CREDITS */
    .credits a,
    .credits a:visited {color: #fff;}
    .credits a:hover {color: #9bb1c5;}
     /*---personnalisation--*/
    .ob-share {display:none;}
    .ob-admin-toolbar .lnk_repost{display:none;}
    <style type="text/css">
    div#cl_1_0.cl {width:100%;}
    .article {background:none; border:0px;}

    <p ><a href="adresse du blog">Retour &agrave; l&#39;accueil</a></p>

    /*---fin personnalisation---*/
     </style>
  • Bonjour lv-oam


    En effet j' ai essayé de centrer avec des espaces multiples car suite à la migration, toutes les photos des articles provenant de l'ancienne plate forme étaient à gauche et impossible d'utiliser la position "centrer"

    Merci d'avance pour ta réponse
    Cordialement
    Charisma45
  • En fait, tout ce qui suit n'a pas sa place là :

    <style type="text/css">
    div#cl_1_0.cl {width:100%;}
    .article {background:none; border:0px;}

    <p ><a href="adresse du blog">Retour &agrave; l&#39;accueil</a></p>


    C'est resté je pense après avoir fait des essais pour avoir une page d'accueil. La partie CSS réservée à la page d'accueil apparaît en bas du code (à conserver)

    <style type="text/css">
    div#cl_1_0.cl {width:100%;}
    .article {background:none; border:0px;}
    .post-title {display:none;}
    </style>
  • Ok je modifie donc dans le css mais toutes les explications pour la photo sont un peu compliquées pour moi.


    Que ois je faire de cela:
    <p><img alt="Geraudot 01" class="CtreTexte" height="224" src="http://img.over-blog.com/300x224/2/58/68/53/France/Champagne-Ardennes/Geraudot-01.JPG"></p>

    et de cela
    .CtreTexte {margin: auto; display: block; width: auto;}

    j'ai beau essayer de lire divers articles sur le CSS et le html, c' est de l'hébreux pour moi.

    Merci d'avance pour la réponse
    Cordialement
    Charisma45

  • CSS = style, apparence du blog

    Tu as déjà ajouté des lignes de CSS dans le code du thème, par exemple pour le repost. Ajoute la ligne pour centrer les images

    /*---personnalisation--*/
    .ob-share {display:none;}
    .ob-admin-toolbar .lnk_repost{display:none;}
    .CtreTexte {margin: auto; display: block; width: auto;}


    Après

    1) éditer l'article
    2) cliquer en bas de la section sur "basculer vers le mode HTML" pour voir le code HTML
    3) modifier le code HTML des images 

    Le code est compliqué car l'éditeur d'overblog est mal fait /:)
  • Ok c 'est donc un miracle que j'ai pu avoir des réponses depuis le début car j'ai toujours regardé dans toutes les discussions. c'est donc la preuve que j'ai toujours eu mes réponses rapidement, donc merci.
  • CSS = style, apparence du blog

    Tu as déjà ajouté des lignes de CSS dans le code du thème, par exemple pour le repost. Ajoute la ligne pour centrer les images

    /*---personnalisation--*/
    .ob-share {display:none;}
    .ob-admin-toolbar .lnk_repost{display:none;}
    .CtreTexte {margin: auto; display: block; width: auto;}


    Après

    1) éditer l'article
    2) cliquer en bas de la section sur "basculer vers le mode HTML" pour voir le code HTML
    3) modifier le code HTML des images 

    Le code est compliqué car l'éditeur d'overblog est mal fait 

    Ok pour le css, c' est fait
    en ce qui concerne la photo, dois-je remplacer la totalité de la ligne 29 par

    <p><img alt="Geraudot 01" class="CtreTexte" height="224" src="http://img.over-blog.com/300x224/2/58/68/53/France/Champagne-Ardennes/Geraudot-01.JPG"></p>
  • Autre question:

    Dois-je comprendre que maintenant sur les nouveaux articles les photos seront toujours centrées?
    Est ce que la modif faite dans le CSS aurait du centrer toutes les photos des articles provenants de l'ancien OB.
  • Pour les anciens articles c'est avec la classe CtreTexte
    Pour les nouveaux, l'image peut être centrée dans une section en ajoutant côté css
    .ob-row-1-col img{margin:auto, display:block; width: auto; max-width:100%;}

Bienvenue sur le forum !

Si vous souhaitez rejoindre la communauté, cliquez sur l'un de ces boutons !

In this Discussion