La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  h1 + fond
« Précédent Suivant »
Pages: [1] 2 Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: h1 + fond  (Lu 2274 fois)
h1 + fond
« sur: le 20-06-2011 a 15:15:06 »
Bluely
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 56





Voir le Profil
Répondre avec citation

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

Rapporter au modérateur  

Re:h1 + fond
« Répondre #1 sur: le 20-06-2011 a 16:02:19 »
KB
Superactif
****

Hors-Ligne

Messages: 613





Voir le Profil
Répondre avec citation

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

Rapporter au modérateur  
Re:h1 + fond
« Répondre #2 sur: le 20-06-2011 a 16:14:01 »
Bluely
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 56





Voir le Profil
Répondre avec citation

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

Rapporter au modérateur  
Re:h1 + fond
« Répondre #3 sur: le 20-06-2011 a 17:06:28 »
KB
Superactif
****

Hors-Ligne

Messages: 613





Voir le Profil
Répondre avec citation

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

Rapporter au modérateur  
Re:h1 + fond
« Répondre #4 sur: le 20-06-2011 a 17:22:18 »
Bluely
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 56





Voir le Profil
Répondre avec citation

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

Rapporter au modérateur  
Re:h1 + fond
« Répondre #5 sur: le 20-06-2011 a 17:28:43 »
KB
Superactif
****

Hors-Ligne

Messages: 613





Voir le Profil
Répondre avec citation

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

Rapporter au modérateur  
Re:h1 + fond
« Répondre #6 sur: le 20-06-2011 a 17:36:54 »
Bluely
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 56





Voir le Profil
Répondre avec citation

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?

Rapporter au modérateur  
Re:h1 + fond
« Répondre #7 sur: le 20-06-2011 a 17:50:26 »
KB
Superactif
****

Hors-Ligne

Messages: 613





Voir le Profil
Répondre avec citation

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.

Rapporter au modérateur  
Re:h1 + fond
« Répondre #8 sur: le 20-06-2011 a 17:59:22 »
Bluely
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 56





Voir le Profil
Répondre avec citation

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

Rapporter au modérateur  
Re:h1 + fond
« Répondre #9 sur: le 20-06-2011 a 18:09:46 »
Wolf18
Guru
*****

Hors-Ligne

Sexe: Male
Messages: 1343





Voir le Profil    WWW
Répondre avec 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.

Rapporter au modérateur  

Création de sites internet sur mesure Var (PACA) | Webdesign, découpage/codage, programmation, référencement
Communauté GTA5 francophone
Partageons l'actualité jeux-video
Re:h1 + fond
« Répondre #10 sur: le 20-06-2011 a 18:14:01 »
Pad
Modérateur Global
*****

Hors-Ligne

Sexe: Male
Messages: 1391





Voir le Profil    WWW
Répondre avec citation

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, 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 !

Rapporter au modérateur  

Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028
Re:h1 + fond
« Répondre #11 sur: le 20-06-2011 a 19:07:52 »
KB
Superactif
****

Hors-Ligne

Messages: 613





Voir le Profil
Répondre avec citation

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à.

Rapporter au modérateur  
Re:h1 + fond
« Répondre #12 sur: le 20-06-2011 a 22:06:57 »
Wolf18
Guru
*****

Hors-Ligne

Sexe: Male
Messages: 1343





Voir le Profil    WWW
Répondre avec citation

La publicité est "calculée" ne vous en faîtes pas j'ai mes raisons, que la raison ignore peut être d'ailleurs 
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.

Rapporter au modérateur  

Création de sites internet sur mesure Var (PACA) | Webdesign, découpage/codage, programmation, référencement
Communauté GTA5 francophone
Partageons l'actualité jeux-video
Re:h1 + fond
« Répondre #13 sur: le 20-06-2011 a 22:23:57 »
KB
Superactif
****

Hors-Ligne

Messages: 613





Voir le Profil
Répondre avec citation

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 !

Rapporter au modérateur  
Re:h1 + fond
« Répondre #14 sur: le 21-06-2011 a 10:57:37 »
Bluely
Membre récent
*

Hors-Ligne

Sexe: Femelle
Messages: 56





Voir le Profil
Répondre avec citation

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

Rapporter au modérateur  
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] 2 Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg