CSS : caler une image de fond sur un texte centré.

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : CSS : caler une image de fond sur un texte centré.

Beral2

Bonjour tout le monde.

En fait j'ai un h1 centré (le "text-align: center" est dans le body) :

Code :

h1
{
font-size: 1em;
font-weight: bold;
color: #7885A0;
margin: 12px 0px 0px 0px;
background: url(../images/motif_h1.png) 0 0 no-repeat;
}

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.

Publicité

Beral2

up.

afbilou

pouet your life

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css"/>
body {
text-align: center;
}
h1 {
background-color: red;
display: inline;
padding: 0 10px;
background-image: url(puce.gif);
background-repeat: no-repeat;
background-position: 0 0;
}
p {
text-align: left;
}
</style>
</head>
<body>
<h1>Bonjour</h1>
<p>
boum boum boum
</p>
</body>
</html>

Message édité par afbilou le 06-10-2005 à 10:46:09

Beral2

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.

afbilou

pouet your life

Sur un élément inline seuls les margin-top et margin-bottom ne fonctionnent pas. Padding et margin-left/right sont fonctionnels.

afbilou

pouet your life

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; }

gatsusat

le selecteur + n'est pas reconnu sous IE

afbilou

pouet your life

Ah oui mais un jour faut savoir dire merde a IE ...

FORUM HardWare.fr

Programmation

HTML/CSS

CSS : caler une image de fond sur un texte centré.

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
Plus de sujets relatifs à : CSS : caler une image de fond sur un texte centré.

Page générée en 0.067 secondes