28242 sujets

CSS et mise en forme, CSS3

Modifier une balise h3

Bonjour,

Merci d'être indulgent c'est mon premier message sur ce forum Smiley langue !

Voilà j'ai déclaré un fond pour une balise h3, ce fond prend la largeur totale de ma page !

Première question comment limiter le fond à la largeur du texte plus un petit peu ?

Et seconde question , j'ai une image d'un arrondi gauche et une autre d'un arrondi droit que je voudrais coller au texte h3 pour faire plus joli Smiley murf .

J'ai déjà tenté pas mal de choses mais une fois j'ai plusieurs sauts de ligne, une autre fois le fond de h3 continue au travers de mon image arrondi droit ....

Merci d'avance votre lecture et de vos éclairages Smiley confused

A bientôt
Marc
Je n'ai peut-être pas tout compris mais :

Tu peux donner une dimension à ta h3 via la css.
h3 {width : 500px ; padding : 10px}
Les padding c'est pour les marges de ta balise.
Et tu mets ton image en background sur ta balise.
en fait c'est pas tout à fait cela, reprenons Smiley biggrin

<h3>voici mon titre</h3> et il affiche "voici mon titre"

après avoir déclaré une image de fond dans le style h3

"début de l'image de fond; voici mon titre ;et tout au bout de ma ligne fin de l'image de fond"

Je voudrai :
"début de l'image de fond ;voici mon titre ; fin de l'image de fond à la longueur du texte"

en plus si il y avait moyen:
"image arrondie gauche; début de l'image de fond ;voici mon titre ; fin de l'image de fond à la longueur du texte ; image arrondie droite"

Sait-on déclarer tout cela dans la balises h3 ???

J'espère avoir été plus clair dans ma tentative d'exposer mon problème ?

Merci

Marc
Tu veux construire ton site autour de la balise h3 ? Smiley smile
Ca me parait possible mais pas forcement la solution idéale ...

Pourquoi ne fais tu pas un conteneur pour ta balise h3 avec l'image de fond ..
et tes 2 autres images dans le conteneur ?
Et pour ces 2 images arrondis tu peux n'en faire qu'une seule en background aussi .. c'est toujours mieux que des images en float. Surtout que ca a l'air de la déco tout ca, non ?

T'as pas une page à montrer que ce soit plus simple ?
salut.
tu ne peux pas appliquer 2 images a <h3> soit tu n'en fais qu'une si tu dois t'en sevir qu'une fois mais le probleme est que si ton titre varie en largeur on va la voir soit a moitie soit dupliquée .alors la solution dans ce cas est de faire 2float right et left ton <h3> entre les 2
Bonjour marc59.
marc59 a écrit :

Voilà j'ai déclaré un fond pour une balise h3, ce fond prend la largeur totale de ma page !

Oui. C'est le comportement normal d'un élément de type bloc (occuper toute la largeur disponible).
marc59 a écrit :

Première question comment limiter le fond à la largeur du texte plus un petit peu ?

Il faut forcer h3 à se comporter comme un élément inline.

h3 {
	display: inline;
	padding-right: 0.5em;
	padding-left: 0.5em;
}

marc59 a écrit :

en plus si il y avait moyen...

Voir : Rubber headers (en).

Personnellement, ça ne me gêne pas du tout de faire un titre en image et de le coder en dur dans la page :

<h3 id="miss"><img src="miss.png" width="350" height="30" alt="Mission" /></h3>

Modifié par Stephan (08 Oct 2005 - 20:04)
Heu oui Smiley cligne désolé por le retard de réponse mais il m'a fallu un peu de temps pour digérer tout cela et dans ma digestion j'ai percuté pas mal d'autres trucs aussi Smiley eek , je crois que je vais tenter une colonne fixe en largeur et une seule image avec les deux arrondis en haut ou en bas.

J'avais trouvé aussi sur un autre site
1° faire une image gauche beaucoup plus large
2° faire une image droite 'normale"
3° le fait de laisser la colonne grandir permettrai de tricher.

Bref j'ai pas mal de chose encore à tenter, en tout cas grand merci pour toutes ces indications et toutes ces pistes Smiley biggrin

A bientôt

Marc
Sujet clos
Aller à