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] BANNIERE CLIQUABLE
  • BONJOUR

        - 1er question
    je suis en premuim, peut-on mettre une image gif (animée) dans la bannière, si oui est-ce ici ? 
     .header .banner .avatar {
                    background: #F8F8F8; si oui dois-je mettre ceci : background-image:url(adresse.gif);
        - 2eme question
    question hors design, savez-vous si on peut payer le premuim en deux fois comme avant (semestre) ou par mois, comment fait-on ? car 59€ en une seule fois pour une petite asso c'est cher ! 

    merci pour vos réponse... 
  • Re, 

    j'ai oublié de vous demander la grandeur de l'image pour le fond de la bannière (entête) : hauteur + largeur 

    merci pour vos réponse... 
  • Bonsoir

     il va falloir modifier le code à differents endroits

    tu va chercher la dernière  balise style dans ton code (en dessous tu verra "head" et plus loin "body"

    ajoute  toutes ces lignes de code juste avant la fameuse balise "style" (oublie pas d'enregistrer ensuite)

    tu change bien sur  http://idata.over-blog.com/2/25/98/74/02-fond/mariage-franco-marocain-2014-5.png  qui est l'adresse de ma bannière pour test (968 x 125 px de haut)

    ___________


    .header .banner {
        background: url("http://idata.over-blog.com/2/25/98/74/02-fond/mariage-franco-marocain-2014-5.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
        height: 125px;
    }



    .header .banner p {
        color: #888;
        display: none;
        margin-bottom: 0;
        max-width: 100%;
    }



    .header .banner .blog-title {
        display: none;
        margin: 0;
        max-width: 75%;
    }


    .banner .avatar img, .profile .avatar {
        box-sizing: content-box;
        display: none;
    }


    .header .banner .avatar {
        display: block;
        float: left;
        margin: 0 20px 0 0;
        padding: 5px;
        position: relative;
    }


    _________________

    explication:

    on doit faire disparaitre la description et l'avatar  en ajoutant un "display: none sinon il sont en surimpression sur la banniere

    tu te crée une bannière de 968 par 125 (je pense que cela doit fonctionner avec une banniere plus haute)

    voila ce que cela donne comme rendu

    image





  • image


    la balise style ressemble a ça (avec donc head et body en dessous)

  • avant la balise  </style>
            </head>
            <body>


    tu peux écrire:

     /* ----------------------------- */
                    /* ==Personnalisation */
                    /* ----------------------------- */

    .header .banner {
        background: url("http://idata.over-blog.com/2/25/98/74/02-fond/mariage-franco-marocain-2014-5.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
        height: 125px;
    }

    .header .banner p {
        color: #888;
        display: none;
        margin-bottom: 0;
        max-width: 100%;
    }

    .header .banner .blog-title {
        display: none;
        margin: 0;
        max-width: 75%;
    }

    .banner .avatar img, .profile .avatar {
        box-sizing: content-box;
        display: none;
    }

    .header .banner .avatar {
        display: block;
        float: left;
        margin: 0 20px 0 0;
        padding: 5px;
        position: relative;
    }

    </style>

    ______________
    tu pourra ensuite retrouver facilement l'endroit des ajouts;)


  • merci Mehdi pour toutes ces explications c'est super... Je vais faire l'image gif et je vais essayer... 

    dernière question, pour changer la couleur du texte descriptif dans la bannière je n'ai pas trouvé, j'ai trouvé pour la couleur du titre, la couleur du menu mais pas pour le texte...  

    merci d'avance... 
    Rolande 
  • avec les code que je t'ai mis au dessus././.il y a plus le texte descriptif ...je l'ai caché (le "display:none)

    .header .banner p {
        color: #888;
        display: none;
        margin-bottom: 0;
        max-width: 100%;


    tu peux le remettre en écrivant pas ces lignes avant style
  • vraiment merci Mehdi.... c'est super... 
  • Mehdi,

    Me revolià pour mettre une image dans ma bannière.
    Je fais ce que tu as décrits ici ?
    J'ai un autre blog sur lequel je peux essayer c'est 


    Ou bien sur celui là, actuel
    merci pour toutes ces aides
  • Mehdi,
    Je me suis servi de mon autre blog pour la bannière : parfait cela marche.
    merci de vos conseils
  • super...tu va devenir un pro bientôt... :)


    surtout bien faire attention au (point virgule, balise ouvrante et fermante etc...)
    {
     ;
    }
  • Bonjour,

    Le "pro"   :( fait appel à toi 

    Medhi je suis dessus depuis 5 h du mat et je n'y arrives pas :
    peux-tu me dire comment centrer mon image car cela se repete à droite.
    Merci.
    C'est sur le blog d'essai
  • Bon, j'ai bidouillé le paramètre height : 125px et l'ai passé à 230 pour que l'image rentre entièrement dans la bannière. Image aussi modifié en 968 x ..
  • Bonjour,
    ton image fait 968 px par 242 px de haut

    dans ton code tu a:

    .header .banner {
        background: url("http://img.over-blog-kiwi.com/1/01/24/82/20150321/ob_7e8049_over-blog-c.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
        height: 230px;
    }


    met le a 242 px,ton mage apparaitra en entier sur la hauteur (tu peut tester avec firebug)

  • Ok. Merci.

    Je suis en train de préparer les têtes de menus déroulants avec leurs sous  menus.
     Ensuite je vais regarder ce que tu avais proposé à ? et vais m'essayer sur le blog test. 
    Je souhaite que tu puisses m'aider :)

    Il commence à avoir de la "gueule" mon blog, non ? 

    Faut dire qu'avant ce n'était pas fameux. Je compte aller à la FNAC pour acheter un libre du genre" html pour les nuls"...à moins que tu me conseilles autre chose. Merci pour ton aide
  • lire les post de ce forum.......cela rentre petit a petit.... j'apprend comme ça...jetais comme toi il y  pas si longtemps