[Résolu] Effet de style <legend>

Hello,

Pour le site que je suis en train d'intégrer, je suis confronté à une petite difficulté pour réussir à retranscrire en CSS un effet présent dans les maquettes. Voici ce que je cherche à faire :
http://www.pixelastic.com/tests/fieldset-effect-css/legend.jpg

C'est un titre qui est présent en haut des différentes rubriques du site. L'image ainsi que le texte change pour chaque rubrique. Le texte est toujours aligné au même endroit à droite, par contre vu qu'il varie en fonction du nom de la rubrique (ici, "Newsletter"), le trait de gauche ne possède pas forcément la même longueur.

C'est un peu comme l'effet par défaut de la balise <legend> dans un <fieldset> qui passe "par dessus" le border, mais en l'effacant derriere elle (sans effacer le fond du fieldset, uniquement le border).

Je m'étais un peu creusé la tête pour trouver comment faire et n'avait pas trouvé de solution, je m'étais donc rabattu à rajouter ce texte directement dans l'image.

Sauf que là je m'apercois que plusieurs rubriques (une petite dizaine) utilisent la même image mais des textes différents... Et cela m'embete un peu de faire charger 10 fois la même image pour à peine quelques pixels blancs de différence. J'ai essayé pas mal de trucs mais je ne vois pas comment réussir à faire l'effet en pur CSS, avec l'image en fond et le texte en HTML tout en gardant la fluidité des lignes blanches.

Mes pistes du moment sont quelque chose dans ce gout là

<h2>
	<!-- ??? L'autre ligne blanche ici -->
	<span class="title">Newsletter</span>
	<span class="fillerEnd">&nbsp;</span>
</h2>

h2 {
	background:url(img.jpg) top left no-repeat;
	width:605px;
	height:115px;
	position:relative;
}
h2 span {
	position:absolute;
}
h2 span.title {
	top:100px;
	height:15px;
	right:75px;
	color:#FFFFFF;
	text-transform:uppercase;
}
h2 span.fillerEnd {
	right:0px;
	top:105px;
	width:70px;
	border-top:1px solid #FFFFFF;
}

Si jamais vous avez une piste, je suis preneur
Modifié par Tymlis (06 Feb 2009 - 04:02)

Hmm, en écrivant le post une idée m'est venue, je viens de la tester et bien que sémantiquement ça soit pas la panacée, ça fonctionne.

<h2>
	<div class="inner">
		<span class="fillerEnd"></span>
		<span class="title">Newsletter</span>
		<span class="fillerStart"></span>
	</div>
</h2>

h2 { 
	margin:0px; 
	padding:0px; 
	height:115px; 
	background:url(img.jpg) top left no-repeat; 
	overflow:hidden; 
	position:relative; 
	direction:rtl; /* Voici l'astuce */
}
h2 .inner {
	width:3000px; /* Grande largeur, pour que la somme des trois span ne l'atteigne pas */
	height:115px;
}
h2 .fillerEnd, h2 .fillerStart {
	float:right;
	border-top:2px solid #FFFFFF;
	margin-top:105px;
}
h2 .fillerEnd {
	width:110px; /* Largeur de la partie incompressible à droite */
}
h2 .fillerStart {
	width:615px; /* Largeur de l'élément parent (au minimum) */
}
h2 .title {
	float:right;
	color:#FFFFFF;
	text-transform:uppercase;
	padding-left:5px;
	padding-right:5px;
	font-size:18px;
	margin-top:99px;
}

Le principe c'est de faire se coller trois éléments en float, donc je fixe la largeur du premier (le trait tout à droite), la taille du second varie selon le texte qu'elle contient, et le troisième doit s'adapter à ce qu'il reste.
L'astuce que j'ai trouvé c'est de contourner le 3e point. Le dernier span ne s'adapte pas à ce qu'il reste, en réalité il est très grand, et s'étire sur toute sa longueur (ici, 615px), mais il est masqué par un overflow:hidden passé non pas sur son parent (qui est lui aussi très large, pour l'empecher de passer à la ligne), mais sur son grand parent.
Par défaut, les élements s'agrandissent sur la droite, dans le sens de remplissage du texte, mon .inner aurait donc du dépasser par la droite. J'ai juste changé le sens d'affichage du texte en Left to Right, et ca a inversé le dépassement.

Donc au final, ça fait ce que je cherchais à faire. Par contre c'est clairement de la magouille, mais au prix de deux spans vides et d'un div qui wrappe le tout, ça reste sémantiquement assez acceptable... Du moins jusqu'à ce que je trouve une meilleure solution...

Si vous en avez, n'hésitez pas, en attendant je ne marque pas encore le sujet comme résolu

(Testé sous IE7, Firefox, Opera et Safari. Pas encore testé sous IE6, je vous tiendrai au courant)
Modifié par Tymlis (04 Feb 2009 - 05:22)

Alors je propose un peu mieux avec, tant qu'à faire, un code valide (un DIV dans un H2???).

<h2 id="test">
	<span class="filler1"></span>
	<span class="text">Bla bla</span>
	<span class="filler2"></span>
</h2>

Et côté CSS:

#test {
	/* Dépassement des flottants */
	width: 100%;
	overflow: hidden;
}
#test .filler1 {
	float: right;
	width: 200px;
	padding: 6px 0 0 0;
	border-bottom: solid 1px white;
}
#test .text {
	float: right;
	padding: 0 10px 0 10px;
}
#test .filler2 {
	zoom: 1; /* HasLayout, émule un contexte de formatage pour IE6 */
	overflow: hidden; /* contexte de formatage */
	padding: 6px 0 0 0;
	border-bottom: solid 1px white;
}

Hmm, cela ne semble pas fonctionner correctement, le .filler2 n'apparait pas avec cette méthode. (cf. page de test)

J'ai adapté ma méthode à partir de la tienne, j'ai bien aimé l'idée du padding-top avec un border-bottom plutot que margin-top et border-top, je l'ai gardée. Et ai remplacé mon div par un span avec display:block.
Et j'ai appliqué un padding-top à mon .inner plutot que des margin-top à ses childs.
Modifié par Tymlis (04 Feb 2009 - 16:17)

Tymlis a écrit :
le .filler2 n'apparait pas avec cette méthode

Oui c'est normal, je n'ai pas testé et j'avais oublié quelque chose de simple (une déclaration CSS). Je te laisse chercher, c'est assez évident.

Indices: quelles sont les dimensions du SPAN.filler2 dans ta page de test? Qu'est-ce qui pourrait expliquer qu'un SPAN ait de telles dimensions? Et comment y remédie-t-on en temps normal?
Modifié par Florent V. (04 Feb 2009 - 17:21)

J'avoue que je ne voyais pas vraiment où tu voulais en venir donc l'oubli ne m'a pas vraiment sauté aux yeux.
Mais c'est vrai qu'avec un display:block ça passe de suite beaucoup mieux

bonjour

une autre piste en jouant sur les bordures , line-height et marges negatives:

<div>	 Zone de test	
<p>.<span>test sur simili legende</span></p>
<h2>Newsletter</h2>
</div>

(le span restera necessaire) .

h2 , p {
line-height:2px;/* determine l'epaisseur de la bordure */
border-left:1000px solid black;/* epaisseur surdimensionnée pour simulé une ligne */
 padding:0 0.5em;
border-right:1000px solid black;
float:left;/* empeche l'element de se compresser sur lui même et du coup son contenu  */
margin:1em -700px;/* 
la marge horizontale compense le line-height reduits a peau de chagrin */
/*
la marge négative determine le positionement du texte  a partir du bord de son conteneur parent et a partir du sens de flottement imposé.
pour 300px a gauche : float:left; et -700px  qui retranché a -1000px de bordure nous donne 300px  de difference non absorbé par la marge négative. */
}
span {position:relative;/* le span pour la compatibilité IE6 */}
div {overflow:hidden;/* no scrollbar svp [smile]  */}

Maintenant a savoir comment cet usage du CSS sera perçu ....

GC