[Résolu] Entourer des titres de chapitres

Bonjour à tous,

je veux entourer des titres dans un cadre avec un fond qui change de couleur suivant mes différents dossiers. J'ai fait quelque chose de simple.

h3 span {
	border: 1px solid #000000;
	background-color: #CCCCCC;
	padding: 5px;
}

Cela marche très bien quand mon titre est sur une ligne, mais sur deux lignes, mon cadre recouvre en partie le texte de la première ligne.

Merci d'avance

Bonjour,

Peut tu mettre le code HTML associé?
En tout cas, si je comprend bien ce que tu veut faire (un titre encadré), je ne vois pas trop l'interet de mettre des span dans les h3 (une bordure et un fond directement sur les h3 devrait fonctionner sans soucis).

Salut


Si le cadre de ton texte sur ligne 2 recouvre le texte de ligne 1 , met toi un pti margin-top:10px;

merci de me répondre
mon code pour h3 est le suivant :

h3 {
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	font-size: 16px;
	padding-top: 10px;
	padding-bottom: 10px;
}

oui voila, tu as mis un padding donc un marge intérieur à la bordure, met un margin-top maintenant.
Modifié par JuseN (21 Jun 2012 - 09:24)

Lorsqu'un SPAN ou autre élément en display:inline occupe plusieurs lignes, le moteur de rendu le découpe en autant de boites que de lignes, et n'a pas la capacité de fusionner ces boites entre elles pour faire une zone graphique unie. Donc l'effet que tu cherches n'est a priori pas possible ainsi.

Si tu veux un rendu graphique sous la forme d'un rectangle qui prend la largeur du texte quand celui-ci est court (sur une seule ligne) et toute la largeur du conteneur quand le texte est long (sur plusieurs lignes), tu peux utiliser display:inline-block.

Pour JuseN : où dois-tu mettre le margin-top dans h3 ou dans h3 span, ce qui n'a pas l'air de marcher .

Pour fvsch : le display:inline-block dans le h3 span me donne effectivement un rendu excellent, SAUF si j'ai une image placée en float et qui doit normalement chevaucher le titre à droite. À ce moment, le texte du titre se positionne en dessous de l'image, ce qui est logique.
Comment pourrais-je remédier à cela ?

osiris67 a écrit :
Comment pourrais-je remédier à cela ?

Aucune idée, je ne visualise pas ce que tu essaies de faire (rendu souhaité), les données du problème, le code utilisé...
Une page en ligne?

oublie le margin si le display marche.


j'ai pas compris pour l'image, tu veux qu'elle soit a coté du texte, pas à coté ? le texte tu veux que lui soit sous l'image ? a droite , a gauche ? lol au pire prend un screen du rendu que tu as actuellement.

Mon image a pour css

img.droite {
	float: right;
	margin-right: 0px;
	margin-top: 4px;
	margin-bottom: 0px;
	margin-left: 10px;
	border: 1px solid #000000;
		}

et cela donne ceci

Je dois être débile et je pose une question idiote mais
pour vous envoyer une image dans le message, comment faire ? J'ai cliqué sur joindre une image, alsa l'a bien reçue, mais elle n'apparaît pas dans le message ?

euh... quand tu clic sur parcourir et que tu choisie ton image, t'a un système de validation (que t'a peut être sapé ^^)

osiris67 a écrit :
J'ai cliqué sur joindre une image, alsa l'a bien reçue, mais elle n'apparaît pas dans le message ?

Il faut cliquer sur le bouton «Valider» à la fin pour que le code d'affichage de l'image soit inséré dans ton message.

You are right, j'avais oublié de valider ! On voit que je suis nouveau sur le site, mais, comme dit Brassens, " Le temps ne fait rien à l'affaire ! Quand on est c.., on est c.. "
Voilà l'image, le titre entouré est en noir il devrait se positionner à gauche de l'image, vu qu'elle flotte à droite !

Hmm oui, c'est effectivement le comportement d'un élément en display:inline-block.
Là je vois pas trop de solution.

Y'a que deux possibilité :

si ton image et ton titre son contenu par exemple dans une div, et que la largeur de ton titre (dans ton css c'est l'attribut heigh:...) + la largeur de ton image est plus grande que la taille de la div.. c'est normal que le titre aille à la ligne..

OU


tu met un float:left sur ton h3

JuseN a écrit :
tu met un float:left sur ton h3

C'est ce que j'avais pensé aussi mais ça semble faire le même effet que le display : inline-block :o

Oui ! Effectivement, cela ne change rien et perturbe même le reste !

Si ton image a une largeur connue à l'avance, ainsi que ton conteneur, tu peux mettre un max-width sur ton titre en display:inline-block. Mais ça fait beaucoup de «si».

Merci !