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] Bannière transparente
  • Bonjour, 
    je viens de creer un blog, je ne connais absolument rien en HTLM :) , donc pas si simple pour moi :)
    Si une personne pouvais m'aider . j'en serai trés heureux . 
    Je souhaite rendre ma bannière transparente ( donc le fond blanc derrière Stratfut687 ) en transparence . 

    J'abuse mais bon, je souhaiterai aussi , ou il y a page et catégories , creer un menu déroulant . Donc tous ca si j'ai bien compris doit passer par 
    gerer : theme : editer ( et c'est la qu'il faut intervenir DOCTYPE htlm ) . Mais je ne suis vraiment pas assez caler en informatique
    ( via dropbox une capture ecran pour etre plius explicite . Merci d'avance si une personne peut m'aider ,la je galére franchement.

  • Bonsoir

    il faut aller dans le code de ton blog pour faire des changement

    il te faut chercher la dernière balise </style> de ton css kiwi....celle avant </HEAD> <BODY>

    ci dessous pour t'aider a visualiser ou se trouve cette balise 
    </style> 

    image

    on peut mettre un fond transparent mais cela ne sert a rien car sous la couleur blanche du fond actuelle se trouve la couleur blanche du fond des articles

    concrètement on enlève le blanc de l’entêté pour laisser apparaître le blanc de l'article

    tu peux par contre changer la couleur de fond de l’entête  en ajoutant AVANT  </style> :

    #blog-header {
        background-color: #373737;
       }


    ici j'ai mis un noir: #373737

    Concernant un menu déroulant en colonne, si tu Maîtrise pas du tout le code, laisse tomber trop compliqué a réaliser

  • Bonjour, 

    Ok je comprend le soucis, la seule facon donc de le rendre transparent (astuce possible ?)  serait donc d'insérer une image dans cette bannière , est ce possible,? voila l'idée, je prend mon image de fond d'origine ( le bleu en l'occurence) de cette originale je prodèce a une découpe , ( photofiltre ) cette découpe sera exactement de la dimension de ma bannière et correspondra parfaitement à l'emplacement de la bannière sur l'image de fond.  en calquant cette découpe sur la bannière on aura l'impression d'une transparence  enfin de compte cette image inséréé en bannière sera le morceau manquant de mon image de fond caché par la bannière , et sur un plan optique ca donnera une transparence !  simple idée heinnn :)   est ce possible ? 
    humm concernant , l'autre sujet je te réponde dessus . 
    Merci beaucoup de ton aide . . elle s'avère extrêmement précieuse pour moi pour la suite de mon blog . 
    Merci encore . Val 
  • Re, je trouve pas la balise style médhi pour changer mon fond de banniere en image. On parle donc du rectangle blanc ou il y a le titre . 
    Unlien car je souahaiterai ta confirmation d'un cote que c'est bien le bon endroit et d'autre , hummmm 
    le script pour mettre non pas une couleur mais une image ? pas trop envie de me planter dans ce css la. :) 
    je prefere demander :)


    un lien d'une capture ecran et de mon css twenty eleven . Si tu peux juste me dire si bon endroit ou non ? 
    merci. 

    Val .

  • Bonjour

    je comprend mal.....tu a déjà une bannière avec au dessus une bande blanche avec un titre

    tu veux 2 bannières image qui se superpose?

    ta banniere actuelle:

  • pour twenty eleven la dernière balise style se trouve vers la ligne 1005

    image
  • pour la bande blanche si on la passe en bleu ciel par exemple(#b3d0e0) c'est ces lignes qu'il faut ajouter avant style

    #blog-header .description {
        background-color: #b3d0e0;
        color: #b3d0e0;
        font-size: 14px;
        height: 100px;
    }


  • pour mettre une image il faut remplacer background color par:

    background-image: url ("adresse de l'image";) 

    il faudra une image dans les 125 px de haut sur 960 px de large (a affiner en testant)
  • Merci mehdi , c'est exactement cela , je veux virer cette bande blanche ou il y a mon titre et la remplacer par une image . Ok jpense y arriver merci , ui je pense qu'il va falloir affiner pour les dimensions . 
    merci bien . 
    Val 
    :)
  • oui effectivement je me suis mal exprimé je ne veux pas toucher a ma bannière juste remplacer la bande blanche ( en haut de la bannière ) par une image : Merci 
  • Excuse mehdi , quesion bete mais bon , toujours mieux que faire des erreurs qui seront pas evidentes a réparer apres , pour inserer juste avant style 6 ( ligne 1006 )  , je me met tout a la fin a gauche de la ligne 1005 je valide et cela creera un espace ou je pourrait inserer c'est bien ca ? 
  • Re re re Médhi , :) 
    dc si je prend une image " front size 14 et px et height 100 px ( ton exemple )  , je remplace par 125 ET 960 ? 

    ce qui correspondra au dimension du rectangle blanc en haut de ma bannière si 'jai bine compris ? 

    voila voila,, merci de ton aide , trés précieuse, merci encore . 
  • pour l'insertion.... tu met ton curseur ligne 1005 (aprés la parenthèse) et tu fait un retour a la ligne avec "entrée (ou enter)

    tu libère ainsi de l'espace pour insérer tes lignes de code

    _________________

    pour ton image, tu dois d'abord en choisir une......ensuite avec un logiciel de retouche d'image type photofiltre la mettre a la bonne dimension

    test a 960px de large...et 125 px de hauteur

    cet image que tu aura sur ton pc......il te faut l’héberger pour en obtenir son adresse url....(http://img.over-blog-kiwi.com/.....................)

    c'est cette adresse url que tu mettra aprés "background - image"

    #blog-header .description {
        background-image: url ("adresse de l'image";) 
        color: #b3d0e0;
        font-size: 14px;
        height: 125px;
    }

    ________________

     front size 14   ou plutôt font size 14 (sans le "r")  ce n'est pas une taille d'image mais la taille de la police d’écriture (font en anglais)..;et "size"...pour la taille toujours en anglais

    tu va juste augmenter le "height" (hauteur) et la passer a 125 px comme ton image (au lieu de 100 px

    ce qui donnera au final (comme au dessus)

    #blog-header .description {
        background-image: url ("adresse de l'image";) 
        color: #b3d0e0;
        font-size: 14px;
        height: 125px;
    }


    la largeur s'ajustera automatiquement vu que ton image sera deja a 960 px de large ce qui doit correspondre a peu prés a la largeur de ton blog et donc de son entete

    suivant le résultat on pourra affiner en modifiant l'image plus ou moins en largeur et en hauteur

    ______________

    tu peux aussi laisser la hauteur a 100 px.(le "height")......a ce moment la..tu redimensionne ton image à 960 px en largeur et 100 pixel en hauteur


  • Bonjour Mehdi, 

    Merci encore , je comprend mieux . :) 
    je teste ca dans la matinée, c'est plus clair la . 

    Je te remercie pour ton aide ( Les ingénieurs d'overblog ont pas choisi le plus simple avec ce CSS je trouve :) )
    Val . 
  • Bonjour Mhédi , 
    j'ai essayer mais je ne comprend pas ou est le soucis, 'jai donc tout éffacer ca marche pas, 
    ( je pense a un soucis dans ma synthaxe ? ) 
    Ci joint un lien avec capture écran. 
    Medhi insertion ( hebergement donc , quelle est la bone adresse a inserer dans le css ? )
    Medhi insertion 2 ( le resultat apres avori inserer le scrip ds le CSS ) 
    Medhi insertion 3 ( l"insertion ) 
    Transpo ce que je souhaite , l'image a donc ete adapter au format prévu 960*125 mais dans tous les cas , elle n'apparait pas ? 
    Galère ce truc :) 
    Merci d'avance 
    val 

  • bonjour

    je tai mis


    ensuite ce n'est pas une adresse url d'image.......facile a verifier, tu la colle dans ton navigateur, l'image n’apparaîtra pas

    les img, url..les differents "signe" sont tous en trop