CSS : caler une image de fond sur un texte centré.
CSS : caler une image de fond sur un texte centré. - HTML/CSS - Programmation
Marsh Posté le 06-10-2005 à 10:36:09
Tente un "display: inline;" sur le h1 pour que la largeur de ton element h1 s'adapte a son contenu et l'entoure sans prendre toute la largeur de la page.
Un exemple :
Code :
|
Message édité par afbilou le 06-10-2005 à 10:46:09
Marsh Posté le 06-10-2005 à 12:21:26
Merci afbilou, je l'avais essayé hier soir, alors oui ça marche mais problème : plus aucune possibilité d'indiquer un margin ou un padding à h1. Je suis passé après à un line-height (pour tenter de simuler un padding mais ça ne marche pas non plus), celui-ci n'est pas respecté.
J'arrive à peu près à faire ce que je veux avec une DIV, mais j'aurais voulu éviter.
En fait le problème est que je ne vois pas comment indiquer l'emplacement du début d'un texte centré (dont la largeur peut varier). Je ne sais pas si cela est possible.
Marsh Posté le 06-10-2005 à 13:50:34
Sur un élément inline seuls les margin-top et margin-bottom ne fonctionnent pas. Padding et margin-left/right sont fonctionnels.
Marsh Posté le 06-10-2005 à 13:59:11
Tu peux t'en sortir pour faire un margin-bottom en appliquant un margin-top sur les elements qui suivent ton h1 :
h1 + * {
margin-top:10px;
}
Et pour simuler un margin-top jouer sur la position relative de h1 :
h1 { position:relative; top:10px; }
Sujets relatifs:
- Interdire le texte dans un champs
- Script de randomisation d'affichage d'une image
- copier le contenu d'un fichier texte dans un fichier html
- Pb lecture d'une image après upload
- CSS : Afficher un bloc lors du survol d'un lien
- Afficher une image dans un email
- [TABLE/CSS] Tableau avec ascenseur !
- Comment mettre image fond écran sous-pages site ?
- placement du texte dans un bouton
Marsh Posté le 05-10-2005 à 21:07:13
Bonjour tout le monde.
En fait j'ai un h1 centré (le "text-align: center" est dans le body) :
motif_h1.png est une image qui ne représente QUE le coin haut-gauche d'un cadre (cette image de coin part après en fondu vers la couleur de background de la page).
Je voudrais que cette image se cale (à un certain padding près) au tout début de mon h1 qui je le rappelle est centré et dont la longueur varie en fonction des pages (titre différent). h1 étant de type block par défaut, si l'image est en 0 0, elle se retrouve tout en haut à gauche, cad très loin du début du titre.
Sachant que je ne veux pas utiliser de DIV seulement pour contenir le h1 (j'ai déjà fait plein de pages alors j'aimerais éviter de retoucher l'HTML), auriez-vous une idée quant à la façon de procéder ?
Merci.