titre header

RicoRico Member
dans Entraide
Bonjour,

je suis en train de modifier le thème Mystique pour avoir à peu près les couleurs et le header du forum, le blog, etc...

http://www.web-automobile.com/test/

je souhaiterais rendre le titre et la description du site invisible à l’œil mais toujours présente comme j'ai fais pour le forum ! http://forum.web-automobile.com/index.html

Pouvez vous me dire ou modifier ça dans le css ? pour le header j'ai trouvé

merci

Réponses

  • k610ik610i Member
    mars 2012 modifié
    Sur ton forum, tu utilises ceci : 
    element.style {
    text-indent: -5000px;
}



    Mais voici ce qu'on m'a dit sur ça :
    Surtout pas ! ^^

    C'est une mauvaise pratique bien trop répandue, imagine que l'image ne se charge pas (oui ça arrive encore, la preuve là où je loge en ce moment pour mon stage ça arrive ponctuellement) et bien tu ne verras... rien du tout ! ^^

    Il y a plusieurs façon de procéder, si tu as seulement envie de voire une image (et pas un petit texte explicatif sur le côté) le mieux est de simplement la placer dans une balise img avec un attribut alt pertinent. C'est une image porteuse de sens alors on la met dans l'HTML. Après tu peux faire des jolis effet en CSS3 avec :hover.
  • RicoRico Member
    Merci pour ta réponse k610i mais si y a une meilleur solution je suis preneur
  • GzygGzyg Member
    Salut,

    Essaie avec :

    h1 {visibility:hidden;}


    à plus,

    Gzyg
  • RicoRico Member
    Bonsoir Gzyg,
    merci ça fonctionne pour le titre, reste la description et la barre verticale !

    je suppose que pour la description je fais pareil en h2? mais pour la barre?
  • GzygGzyg Member
    Pareil, effectivement :


    #site-title p.headline {
    ...
    ...
    visibility: hidden;
    }


    (à rajouter à la fin du bloc)


    La propriété hidden permet de masquer l'élément mais sans le retirer du flux. De cette façon, sa place est toujours acquise au cas où tu souhaiteraiss le réafficher, tu n'auras pas à repositionner ce qu'il y a autour.



    à plus,


    Gzyg
  • RicoRico Member
    Salut Gzyp et merci

    j'ai mis ça en fin de code mais in ne se passe rien
    #site-title p.headline {
...
...
visibility: hidden;
}

    faut il mettre quelque chose à la place des points?
  • danielsandanielsan Member
    Rico a écrit:
    faut il mettre quelque chose à la place des points?
    comme c'est meugnon ça :D
  • StéphaneStéphane Member, Former PluXml Project Manager
    Si tu as déjà #site-title p.headline dans ton fichier css, rajoute la ligne visibility: hidden; entre { et }

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • RicoRico Member
    mars 2012 modifié
    merci pour vos réponses

    j'ai fais ça 
    /* headings */
h1{visibility:hidden;}
h2{visibility:hidden;}
/*h1{font-weight:normal;font-size:270%;letter-spacing:-.04em;line-height:100%;margin:.8em 0 .2em;letter-spacing:-0.04em;}*/
/*h2{font-weight:normal;font-size:200%;letter-spacing:-.04em;line-height:110%;margin:.7em 0 .2em;letter-spacing:-0.03em;}*/
h3{font-size:160%;font-weight:normal;letter-spacing:-.04em;line-height:110%;margin:.7em 0 .2em;letter-spacing:-0.02em;}
h4{font-size:140%;font-weight:bold;margin:.7em 0 .2em;letter-spacing:-0.02em;}
h5{font-family:"Palatino Linotype", Georgia, Serif;font-size:140%;font-weight:bold;margin:.5em 0 .2em;letter-spacing:-0.02em;}
h6{font-size:120%;font-weight:normal;text-transform:uppercase;margin:.5em 0 .2em;}

    en firefox ça change rien et avec IE y a plus rien mais l'image est tronqué
Connectez-vous ou Inscrivez-vous pour répondre.