H2 avec brodures arrondies sur les cotés

Bonjour,

j'ai bien regardé les exemples fournis par la FAQ sur la boîte avec arrondis cependant, je n'arrive pas à l'appliquer à mon cas.

J'essaye tout bêtement, de mettre un background à un <h2> via 3 parties (gauche, centre et droite) monoligne.

<div class="h2_bord_g"></div>
<h2>Bienvenue</h2>
<div class="h2_bord_d"></div>

avec :

h2 {
	min-width: 200px;
	max-width: 500px;
	height: 26px; 
	margin-top: 1em;
	font-size: 1.3em;
	background:url(/images/background_vert_h2_2.jpg) repeat-x;
}
.h2_bord_g {
	width: 11px;
	height: 26px; 
	margin-top: 1em;
	background:url(/images/background_vert_h2_1.gif) no-repeat;
}
.h2_bord_d {
	width: 11px;
	height: 26px; 
	margin-top: 1em;
	background:url(/images/background_vert_h2_3.gif) no-repeat;
}

J'ai tenté de mettre float:left mais le résultat n'est pas là...
Pourriez-vous m'aider SVP ?

Merci d'avance.

Bonjour,
Tes images doivent dépendre du titre, il serait donc plus simple et plus logique de les mettre de part et d'autre du titre à 'intèrieur du <h2>.
Même si cela n'est pas conseillé pour ce genre d'image (décorative,
qui n'apporte rine au contenu), rien de t'interdit de placer des images
de part et d'autre du titre dans le html comme ceci:

<h2><img src="..." alt="" width="..." height="..." />Titre<img src="..." 
alt="" width="..." height="..." /></h2>

et d'utiliser la propriété float pour leur placement
Modifié par Hermann (09 Feb 2007 - 12:19)

Salut,

Si je comprend bien il y a deux coins arrondis a placer pour ton h2 et il s'agit de coins haut/gauche et haut/droite.

Au passage un petit dessin pour aider à se représenter la chose. Par exemple savoir s'il s'agit de coins arrondis simple ou bien de coins arrondis avec bordures. Et aussi, dans le dernier cas, s'il s'agit de bordures constituées d'un simple trait ou bien d'un motif plus complexe telle une ombre portée !!!!!

Si vous voulez qu'on vous réponde utilement faites l'effort de mieux poser vos questions sacré nom d'une pipe

Maintenant si on envisage le cas le plus simple, deux coins arrondis sans bordure.

Tu as un h2

<h2>Titre h2</h2>

Ce h2 est le heading d'une sous section. donc il y a une sous section.

<h2>titre h2</h2>

<p>début sous section</p>

... suite sous section avec son balisage pertinent ...

<p>Fin sous section</p>

L'ensemble constitué de <h2> et de tout le balisage (a priori de type block)constituant la section constitue un tout et peut donc très légitimement être inséré dans une balise permettant les regroupements de balises block.

C'est précisemment à ça que sert la balise <div>, donc :

<div id="conteneur_sous_section>

<h2>titre h2</h2>

<p>début sous section</p>

... suite sous section avec son balisage pertinent ...

<p>Fin sous section</p>

</div>

On se retrouve donc avec un fragment html cohérent et conséquent et dont on pourrait même se demander ce qu'il aurait pu être d'autre du point de vue de la seule structuration du document.

Ah oui les coins arrondis ???

Très simple :
. div#conteneur prend en image background le coin haut/gauche
. h2 prend en image background le coin haut/droite
. Petite gestion des marges internes/externes des éléments concernés à faire

et voilà

Désolé pour ma réponse tardive...

effectivement j'ai oublié de préciser que les bords (gauche et droit) sont arrondis et le tout forme un simple rectangle aux coins arrondis...

Devant l'étonnante difficulté à mettre ceci en oeuvre (même avec votre aide) pour que le contenu du rectangle (le <h2>) soit fluide en largeur, j'ai finalement adopté le bon vieux <table>... toujours aussi efficace malgré tout.

        <table id="titre_h2" cellpadding="0" cellspacing="0"><tbody><tr>
            <td class="h2_bg_left"></td>
            <td class="h2_bg_center"><h2>Bienvenue</h2></td>
            <td class="h2_bg_right"></td>
            </tr></tbody></table>

avec en CSS :

table#titre_h2 td.h2_bg_center {
	background:url(/images/background_vert_h2_2.jpg) repeat-x;
	height: 26px;
	white-space: nowrap;
}
table#titre_h2 td h2 {
	font-size: 1.2em;
	padding-left: 1em;
	padding-right: 1em;
}
table#titre_h2 td.h2_bg_left {
	background:url(/images/background_vert_h2_1.gif) no-repeat;
	width: 11px;
	height: 26px;
}
table#titre_h2 td.h2_bg_right {
    background:url(/images/background_vert_h2_3.gif) no-repeat;
    width: 11px;
	height: 26px;
}

C'est grave docteur d'utiliser un <table> contenant un <h2> ?

Ben tu utilises un tableau si tu veux, hein.
Pour l'étonnante difficulté... je vois pas trop ce que ça a d'étonnant. Tu vois des propriétés CSS de base qui servent à réaliser ce genre de petit effet ? Qui permettent d'utiliser plusieurs niveaux d'images de fond pour un unique élément ? Qui réalisent des arrondis de manière fiable dans tous les navigateurs ? Non.
Et en HTML sans CSS, encore moins : on était obligé de bidouiller avec des images, des tableaux, des machins pas faits pour ça à la base.
Rien d'étonnant, finalement. C'était compliqué avant, et ça reste compliqué maintenant. On en reparle dans quelques années, après publication et implémentation de CSS 3.

Moi j'aurais bien vu un truc pas trop compliqué quand même, par exemple ceci :

[b]HTML :[/b]
<h2><span class="gauche"></span><span class="droite"></span>
<span class="centre">Bla bla mon titre</span></h2>

[b]CSS :[/b]
h2 {height: 30px; background: ...;}
h2 span.gauche {float: left; height: 30px; width: 20px; background:...;}
h2 span.droite {float: right; height: 30px; width: 20px; background:...;}
h2 span.centre {display: block; margin: 0 30px;}

C'est peut-être à corriger un peu, mais ça devrait marcher. Bien sûr, ça demandera que le titre ait une hauteur fixe, ce qui n'est pas évident si on a un contenu très variable.

À noter qu'on peut aussi travailler avec des coins positionnés en absolu, par exemple.

Tchupacabra a écrit :


C'est grave docteur d'utiliser un <table> contenant un <h2> ?

non pas du tout, ça ne sert à rien c'est tout.

Autre question :

C'est grave docteur de truffer mon document d'éléments vides ? <td> ou <span> ?

C'est pas grave du tout non plus et tout le monde s'en fout. On peut donc faire n'importe quoi et d'ailleurs la preuve c'est que la plupart des gens continus à faire absolument n'importe quoi. Mais encore une fois ça ne sert à rien et dans ton cas il n'y a pas besoin d'éléments vides

PS : La solution que j'ai indiqué plus haut convient parfaitement pour ce que tu veux. Elle n'a qu'un seul défaut, j'essaye de ne pas faire n'importe quoi.
Modifié par Christian Le Bouler (19 Feb 2007 - 19:05)

merci pour vos réponses.

cependant,
Florent V. > le problème de ton code est que le <h2> prend toute la largeur disponible, alors que j'aimerais que le rectangle arrondi s'adapte au contenu. Même si effectivement, mes <h2> resteront sur une seule ligne.

Christian Le Bouler > la solution que tu m'as gentillement proposé te parait (apparemment la meilleure) simple et facile à mettre en place mais ce ne pas mon cas malheureusement... si tu pouvais me reproposer un code plus précis je t'en serais énormement reconnaissant... parce que la, j'ai beau faire des efforts, je ne trouve pas la solution.

En espérant avoir un dernier coup de pouce...

Christian Le Bouler a écrit :
C'est grave docteur de truffer mon document d'éléments vides ? <td> ou <span> ?

C'est pas grave du tout non plus et tout le monde s'en fout. On peut donc faire n'importe quoi et d'ailleurs la preuve c'est que la plupart des gens continus à faire absolument n'importe quoi. Mais encore une fois ça ne sert à rien et dans ton cas il n'y a pas besoin d'éléments vides

Reste alors à démontrer l'impact négatif des éléments vides en question (et je parle d'impact pratique, pas de vagues questions de « sémantique »), et de le contrebalancer avec l'objectif suivant : obtenir rapidement et autant que possible de manière facilement reproductible un résultat correspondant aux attentes formulées (maquette).

Tchupacabra a écrit :
Florent V. > le problème de ton code est que le <h2> prend toute la largeur disponible, alors que j'aimerais que le rectangle arrondi s'adapte au contenu. Même si effectivement, mes <h2> resteront sur une seule ligne.

Tu peux aussi avoir, dans l'ordre : bord gauche, partie centrale, bord droit. et faire flotter tout ça à gauche. Mais ça va devenir compliqué à gérer, donc un tableau sera peut-être la solution la plus robuste.

Quoique, toujours avec la contrainte d'une hauteur fixe on doit pouvoir faire des choses plutôt correctes. Par exemple en m'inspirant de ceci :

[b]HTML :[/b]
<h2><span>Ceci est un titre</span></h2>

[b]CSS :[/b]
h2 {
	height: 40px;
	padding-left: 40px;
	background: url(gauche-40px.png) no-repeat left center;
}
h2 span {
	float: left;
	height: 40px;
	padding-right: 40px;
	background: url(centre-droite.png) no-repeat right center;
}

On utilise deux images : une de 40x40 pixels avec juste le bord de gauche, et une disons de 1000x40 pixels avec le bord de droite et la partie centrale.

Le h2 prend toute la largeur disponible dans le conteneur, mais le span prendra uniquement la largeur de son contenu (+ le padding de droite) grâce au positionnement flottant (l'idéal aurait été l'utilisation de display: inline-block, mais bon...).

Florent V. a écrit :
pas de vagues questions de « sémantique »

+1

Perso je ne parle jamais de vagues questions de sémantique, pas plus que je ne parle de questions de sémantique, et au final pas plus que je ne parle de sémantique tout court...

C'est dire...

obtenir rapidement et autant que possible de manière facilement reproductible un résultat correspondant aux attentes formulées

Le jour où un gourou estampillé prouvera que cela est évidemment possible sans que l'intégrité du code html ne soit en aucune manière en jeu alors tout le monde dira Amen.

En attendant ça continuera à partir dans tous les sens sans la moindre exigence de rigueur. Par exemple faire une proposition de div (ou span, ou b, ou tout ce que l'on veut au point où ç'en est rendu) vides alors que cela n'est En la circonstance strictement d'aucune utilité.

Ce qui m'amuse franchement là dedans c'est la volée de bois vert que vont se prendre les débutants en train de boire cela comme du petit lait. Volée de bois vert qui sera d'ailleurs administrée par les mêmes qui les auront initiés.

Tchupacabra a écrit :

En espérant avoir un dernier coup de pouce...

Non, j'en ai assez dit, à toi de bosser maintenant.
Modifié par Christian Le Bouler (19 Feb 2007 - 23:22)