Forum-webmaster
Technique - programmation => HTML / CSS / XHTML => Message commencé par: Bluely le le 20-06-2011 a 15:15:06

Titre: h1 + fond
Posté par: Bluely le le 20-06-2011 a 15:15:06

Bonjour,
j'aimerais connaitre la technique pour mettre une image de fond sur un titre H1du genre:

MON TITRE //////////////////////////////////////////////////////////////////////////////

Les slashs représentent le fond.
Mon problème est que je n'arrive pas à avoir un espace entre le titre et le fond, même si je mets un padding-right.
Quelqu'un pourrait-il m'aider svp?
Merci beaucoup

Titre: Re:h1 + fond
Posté par: KB le le 20-06-2011 a 16:02:19

salut !
Ton probleme peut s'expliquer de différentes façon.
On peut avoir ton code ou la page web stp?


Titre: Re:h1 + fond
Posté par: Bluely le le 20-06-2011 a 16:14:01

Oui alors voilà c'est tout bete:



Code:



#content h1{
background:transparent url(../images/bg-H1.gif) repeat-x ;
   padding-right:15px;   
}


Merci de votre aide

Titre: Re:h1 + fond
Posté par: KB le le 20-06-2011 a 17:06:28

Plusieurs choses:
- repeat-x, signifie que ton image de fond va etre repeté sur toute la largeur. Si tu veux 1 seule occurence de ton fond, il faut utiliser no-repeat.
- h1 doit etre en display:block pour avoir un background.

en gros (par exemple):


Code:
background:transparent url('tonimage.tonextension') top right no-repeat ;
width:250px;
height:125px

Titre: Re:h1 + fond
Posté par: Bluely le le 20-06-2011 a 17:22:18

En fait j'ai des h1 sur différentes pages et le fond doit s'adapter à la longueur du texte, comme ceci:

MON TITRE //////////////////////////////////////////////////////////////////////////////

MON DEUXIEME TITRE ////////////////////////////////////////////////////////

ET UN TROISIEME PLUS GRAND TITRE ////////////////////////

donc y aurait-il une autre solution?
Merci

Titre: Re:h1 + fond
Posté par: KB le le 20-06-2011 a 17:28:43

dans ce cas, pourquoi mettre l'image en background? Il suffit de la mettre de facon classique <img src="">.

Titre: Re:h1 + fond
Posté par: Bluely le le 20-06-2011 a 17:36:54

oui ce serait plus simple. Sauf que j'ai des contraintes. Je ne peux pas toucher au html mais uniquement le css.
Pas de solution?

Titre: Re:h1 + fond
Posté par: KB le le 20-06-2011 a 17:50:26

si tu ne peux toucher qu'au CSS, il n'y a pas de solutions a ton probleme.
A part un background, je vois pas.

Titre: Re:h1 + fond
Posté par: Bluely le le 20-06-2011 a 17:59:22

Merci KB mais jss sure qu'il doit y avoir une solution.
A l'aide svp!

Titre: Re:h1 + fond
Posté par: Wolf18 le le 20-06-2011 a 18:09:46

Tu mets une image de fond, en repeat-x (si besoin est) etc etc.. Et pour ton texte il te suffit de lui donner une valeur de background-color:#FFFFFF; (ou autre).

C'est ce que j'ai fait sur wolf18.com (http://www.wolf18.com), pour le titre de mes pages.

Titre: Re:h1 + fond
Posté par: Pad le le 20-06-2011 a 18:14:01

Citation de: Wolf18 le le 20-06-2011 a 18:09:46
Tu mets une image de fond, en repeat-x (si besoin est) etc etc.. Et pour ton texte il te suffit de lui donner une valeur de background-color:#FFFFFF; (ou autre).

C'est ce que j'ai fait sur wolf18.com (http://www.wolf18.com), pour le titre de mes pages.


Oui, mais tu utilises une div avec le fond et ensuite le h1... lui il veut tout avoir seulement dans son h1... D'ailleurs une petite remarque au passage à propos de ton site : as tu déjà réfléchi à l'impact sur ton visiteur quand il voit des pubs sur ton site professionnel... a mon avis, c'est pas une super idée !

Titre: Re:h1 + fond
Posté par: KB le le 20-06-2011 a 19:07:52

Bluely a dit qu'il ne pouvait pas toucher au html.
Citation:
Tu mets une image de fond, en repeat-x (si besoin est) etc etc.. Et pour ton texte il te suffit de lui donner une valeur de background-color:#FFFFFF; (ou autre).

C'est ce que j'ai fait sur wolf18.com, pour le titre de mes pages.

Oui, mais tu utilises une div avec le fond et ensuite le h1... lui il veut tout avoir seulement dans son h1... D'ailleurs une petite remarque au passage à propos de ton site : as tu déjà réfléchi à l'impact sur ton visiteur quand il voit des pubs sur ton site professionnel... a mon avis, c'est pas une super idée !


le double <h1> et <h1>L'actualité</h1> ca fait pas très référenceur pro! (pourtant tu proposes ce service). Mais la question n'est pas là.

Titre: Re:h1 + fond
Posté par: Wolf18 le le 20-06-2011 a 22:06:57

La publicité est "calculée" ne vous en faîtes pas j'ai mes raisons, que la raison ignore peut être d'ailleurs ;D
Et je ne suis pas convaincu que le fait de mettre plusieurs balises h1 soit négatif, ça dilue peut être un peu et aprés ?
Je n'ai pas vu de sites qui le déconseille, ni d'article qui dit que d'un point de vue SEO c'est interdit.

Titre: Re:h1 + fond
Posté par: KB le le 20-06-2011 a 22:23:57

Citation:
Et je ne suis pas convaincu que le fait de mettre plusieurs balises h1 soit négatif, ça dilue peut être un peu et aprés ?
Je n'ai pas vu de sites qui le déconseille, ni d'article qui dit que d'un point de vue SEO c'est interdit.

la balise h1 correspond au titre principal de la page: par définition ce titre est unique. ce n'est pas pénalisant, juste illogique. Mais ce n'est que mon avis.
Par contre l'utilisation de terme ultra générique dans ces balises n'apporte rien a ton référencement.
D'ailleurs, toujours sur ton accueil, je changerai le texte des liens "lire la suite".

Enfin bref, ce topic n'est pas dédié à ton site ! :)

Titre: Re:h1 + fond
Posté par: Bluely le le 21-06-2011 a 10:57:37

Merci à vous tous pour votre aide.
Avec ta méthode Wolf18 j'ai pu obtenir ce que je voulais.
:)

Titre: Re:h1 + fond
Posté par: KB le le 21-06-2011 a 12:16:12

Citation:
Avec ta méthode Wolf18 j'ai pu obtenir ce que je voulais.


je peux voir le code CSS de ton H1 car visiblement, j'ai pas tout compris! et je suis curieux.


Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.