26 août 2010

(OverBlog) Placer une image devant le titre des articles

Pensez à ne pas prendre une image de trop grande dimension : 30px sur 30 semble suffisant.

Vous allez dans le CSS - Design > Mode CSS - et vous modifiez
.divTitreArticle .titreArticle {background-image:url(adresse de l'image);background-repeat:no-repeat; padding-left:30px; }
Il faudra jouer avec le nombre de px de padding-left (marge de gauche) pour obtenir le bon emplacement

Un exemple d'image que vous pouvez enregistrer :

7 commentaires:

  1. Bonjour
    J'ai positionné une image Gif sur la gauche du titre mais la partie basse disparaît.
    Qu’elle manipulation pour augmenter la hauteur.
    Bravo et merci pour les informations sur ce blog.

    RépondreSupprimer
  2. Bonjour Iloria :) je vois que tu as trouvé la solution, il suffit en effet de rajouter des marges en haut et/ou en bas : padding-bottom:35px

    RépondreSupprimer
  3. Salut Annak,

    Dis peux tu jeter un oeil sans te faire mal bien sûr ;) sur mon blog et me dire stp comment dois-je centre cette petite luciole que j'ai mis devant le titre des mes articles.je n'ai ps su trouver comment faire.
    http://www.saveurspartageesdetaous.com/

    Ah je profite pr te souhaiter une excellente nouvelle année positive et aussi plein d'astuces à trouver et à concocter !
    Cordialement
    Taous

    RépondreSupprimer
  4. Bonjour Taous :)
    Merci et meilleurs voeux à toi aussi :)
    Tu remplaces ta ligne par celle-ci
    .divTitreArticle h2, .divPageTitle h2{
    font-size: 24px;
    line-height: normal;
    margin: 0 0 20px -20px;
    padding: 5px 0 5px 20px;
    border-left: 4px solid;
    color: #f97d16;
    padding-left:10px;background-image:url(http://idata.over-blog.com/2/29/50/03/17.gif);background-repeat:no-repeat;background-position:center left;
    }
    J'ai rajouté le positionnement : background-position:center left;

    RépondreSupprimer
  5. Merci bien la Miss, tout est ok comme d'hab

    Très bon Dimanche et au plaisir

    RépondreSupprimer
  6. Bonjour Annak, j'ai essayé de mettre une image à coté du titre de mes articles mais je n'y arrive pas. Je ne suis pas très douée en CSS.
    Je voudrais mettre cette image : http://idata.over-blog.com/0/11/57/56/CSS/icone.JPG
    Mais elle est assez grande, si ça ne marche pas je l'ai en plus petite : http://idata.over-blog.com/0/11/57/56/CSS/icone2.JPG

    J'ai essayé avec les deux URL, le titre se déplace un peu vers la droite, c'est peut etre un probleme de placement ? J'ai mis :
    .titreArticle, .divPageTitle h2 {color: #A7430F; font-size: 20px; font-weight: normal; text-decoration: none; margin: 0; display: block; background-image:url(http://idata.over-blog.com/0/11/57/56/CSS/icone.JPG);background-repeat:no-repeat; padding-left:30px; }

    Merci d'avance.

    RépondreSupprimer
  7. Après plusieurs essaie, plusieurs tentative je n'arrive pas à mettre mon image devant le titre sur mon blog !!
    Quand je "prévisualise" elle apparaît idem quand je "prévisualise" mes articles mais quand je vais sur le liens de mon blog il n'y a rien je trouve pas d'ou viens le soucis ! MErci de m'aider !!

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)