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] Article sur toute la largeur de la page
  • Bonjour à tous,

    Je souhaiterais mettre l'article sur toute la largeur. Merci de m'indiquer comment procéder.
    Par avance merci
    http://coaching-formation-travail-social.over-blog.com/
  • Bonsoir,

    Avant la dernière balise </style> de ton css tu ajoute ces lignes de code

    Pour te repérer, légèrement en dessous de la balise  </style> tu verra     </head>  et <body>


    .posts {
        padding: 12px 40px 40px 0;
        width: 950px;
    }

    (actuellement le width (la largeur) est à 610 px)

    par contre tu aura plus ta colonne droite


    image

    Ne tient pas compte du numéro de ligne spécifique à mon code et oublie pas de cliquer sur "enregistrer" ensuite

    Edit: pour trouver plus facilement, utilise la fonction "recherche" avec ton clavier Ctrl+F

    tu entre ensuite dans l'onglet recherche: </style>

  • Merci Mehdi ça fonctionne nickel, reste plus qu'à calibrer les photos de l'article sur la même largeur.
    Je vais tenter de trouver où cela peut-il être
  • toujours avant </style> tu ajoute

    .ob-section-images img {
        margin-left: 80px;
        max-width: 800px;
    }

    le max-width est actuellement à 600 px , je l'ai passé à 800px

    j'ai ajouté une marge gauche de 80 px pour centrer à peu près l'image

    tu peux bien sur modifier la largeur maxi autorisé des images et jouer sur la marge aussi


  • Merci Mehdi :)

  • je viens de regarder, le résultat est parfait ;)

    tu peux peut être tester en centrant le texte sous l'image
  • ouais pourquoi pas mais là je cherche à ôter l'espace entre le menu et le titre de mon article et pour l'instant je sèche...
  • on va jouer sur ton slideshow

    avant  </style> donc (tu connait la musique maintenant....lol)

    .slideshow-bg {
        margin-bottom: 0;
        margin-top: -30px;
        overflow: hidden;
        position: relative;
        width: 970px;
    }

    la marge basse était à 20 px je l'ai mis à 0 px (le margin-bottom)

    pour faire remonter le slide show...j'ai ajouté une marge haute négative  (-30px)

    a partir de la, tu règle la marge négative a plus ou moins -30 px pour obtenir l’écart voulu avec le menu

  • en fait avant </style> tu peux ecrire seulement

    .slideshow-bg {
        margin-bottom: 0;
        margin-top: -30px;
    }

    sans  re écrire toute la ligne..... (au choix donc)
  • Nikel merci
  • Pour essayer de comprendre comment modifier ce qui m'intéresse je fais un clic droit sur ma page en mettant examiner l'élément, est ce comme ça qu'il faut procéder ? Moi je trouve ça pas mal mais peut être y a t il d'autres possibilités meilleures ?
  • c'est une solution

    mais il y a mieux encore, des "addons" firefox gratuit a telecharger

    soit web developper soit dans mon cas firebug

    une fois installé sur mon navigateur, je fait un clique droit je lance firebug

    je me met ensuite sur l'endroit que je veux modifier

    je modifie directement le code dans firebug et je vois en réelle le changement de design sur mon navigateur (en simulation)


    ce qui fait que quand je te donne une ligne de code à modifier j'ai en fait visualiser en simulation le résultat grâce à  firebug

    je maitrise moins web develloper qui fait pareil avec bien d'autre fonctions

    ces addons permettent de tout modifier et surtout voir le résultat sans toucher au code du blog....se sont juste des simulations

  • par exemple pour la largeur de tes articles........je met le curseur sur le cadre de ton article....firebug me donne les lignes de code correspondante...

    je vois width: 610 px;...je monte a 900 px et je vois immédiatement de visu ton article qui s’élargit sur mon navigateur

    pareil si j'ajoute une marge.......je vois en temps réel la modification qui est prise en compte par mon navigateur

    juste ensuite a copier le code modifié si il convient et le remettre sur l'editeur ob avant la balise </style>

    si on fait une erreur de codage, pas grave, ce n'est qu'une "simulation"

  • Bon comme tu le constateras Mehdi "il n'y a que les imbéciles qui ne changent pas d'avis".
    En effet, je suis revenu sur l'article sur toute la largeur de la page. J'ai donc ôté les manipulations que tu m'avais fait faire mais je me trouve désormais avec un problème :
    http://coaching-formation-travail-social.over-blog.com/
    car la partie de gauche "s'abonner, liens, etc" empiète sur mon image...
    Comment décaler vers le bas ces modules ?

    Par avance merci
  • Bonjour

    il doit y avoir des bouts de code non enlevé qui crée le probleme

    tu ouvre un blog test avec le même thème......tu recupere son code et tu le met sur ton blog
    a moins que tu ne possède une sauvegarde avant modification