équivalent de légend

Bonjour,

J'essaie de faire du code bien valide et ce n'est pas toujours évident donc je demande votre aide

Un titre placé entre des balises <legend> permet de le placer un peu comme un onglet titre dans un <fieldset>

Mais ces balises sont réservées pour des zones de formulaire apperrement.

Donc voiçi le code avec les deux versions (pour une zone formulaire et l'autre pour une zone de texte normal) :

Mon code css est valide, correct pour placer le texte dans span dans le même style qu'avec la balise legend ? Faut-il utiliser une autre balise que <span> ou un autre code ccs pour placer le titre ?

Merci

//css 1
fieldset {
	border: 1px solid #ccc;
	padding: 10px;
}
legend { 
	border: 1px solid #000;
	padding: 0.2em 0.5em;
}
//css2
.block {
	border: 1px solid #ccc;
	padding: 10px;
	position: relative;
}
.block span {
	background: #FFF;
	border: 1px solid #000;
	padding: 0.2em 0.5em;
	position: absolute;
	top: -10px;
	left: 5px;
}

//XHTML
<fieldset>
 <legend>Titre</legend>
input<br />
input<br />
</fieldset>
<br /><br />

<div class="block">
 <span>Titre</span><br />
text<br />
text text<br />
</div>
<br /><br />

pour ton span tu peux utiliser un h1 h2 h3 .. h6 à la place
ce sont les vraies balises pour faire un titre

sans oublier que ton texte devra être dans des balises <p></p>

//css 1

fieldset {

	border: 1px solid #ccc;

	padding: 10px;

}

legend { 

	border: 1px solid #000;

	padding: 0.2em 0.5em;

}

//css2

.block {

	border: 1px solid #ccc;

	padding: 10px;

	position: relative;

}

h3 {

	background: #FFF;

	border: 1px solid #000;

	padding: 0.2em 0.5em;

	position: absolute;

	top: -10px;

	left: 5px;

}



//XHTML

<fieldset>

  <legend>Titre</legend>

     <input /><br />
     <input />

</fieldset>



<div class="block">

  <h3>Titre</h3><br />

     <p>
     text<br />
     text
     </p>

</div>

Modifié par Rasta (18 Oct 2006 - 18:01)

Comme le signale Rasta, les éléments hN servent à indiquer des titres de section, c'est à dire des titres décrivant ou annonçant une section (plus ou moins longue) de la page ou du document. Ils sont donc tout à fait adaptés.

Ensuite, le choix du niveau (h1, h2, h3, h4...) dépendra de la place de la section dans l'arborescence du document.

À noter que les titres de section sont des aides précieuses à la navigation avec un certain nombre d'outils, dont les lecteurs d'écrans pour les non-voyants. Attention, donc, à soigner leurs intitulés !
Modifié par mpop (18 Oct 2006 - 08:49)

merci pour vos réponses

sinon mon code css est correct avec la position relative et absolute pour placer l'entête ?

il me semble que tu n'es pas obligé de préciser les positions, et sinon je sais pas si ça existe des valeurs négatives comme -10px, mais j'avoue ne connaitre le css que depuis quelques semaines

pour moi ce morceau de code devrait fonctionner :

.block {
	border: 1px solid #ccc;
	padding: 10px;
}



h3 {
	background: #FFF;
	border: 1px solid #000;
	padding-top: 10px;
        padding-left: 5px;
}

sur le coup je suis pas très sur, mais c'est comme ça que j'aurais fait, sinon essaye d'harmoniser tes unités de "grandeurs" soit px soit em, sinon on y pige plus rien ^^
Modifié par Rasta (18 Oct 2006 - 18:10)

Salut !

Selon moi, un code css est toujours correct, du moment qu'il passe la validation et qu'il donne le rendu que tu souhaites, après certaines techniques sont plus ou moins astucieuse. Ici le positionnement relatif est la bonne solution, on pourrait également utiliser des marges négatives, mais tu risques d'avoir des soucis sur internet explorer.
A plus !

Et donc est-ce que ma méthode pour placer le titre en entête de la boite (comme un legend dans un fieldset) est la meilleure ?

bonjour,

comme dit plus haut , si tes regles css te donne le resultat escomptée tu as une bonne methode
La meilleur sera celle qui ne fera pas bugé ta page.

Par ailleurs , si tu dois ajouté des balises , peut-etre n'as tu pas , là, une methode assez efficace ?

tu peux obtenir cette effet avec un minimum de html :

<h1>Lorem</h1>
<p>Lorem ipsum mea ut appareat conceptam efficiantur, error aliquam invenire sed ad, ea nam lorem audire forensibus. No vix.</p>

et un css comme ça :

p {
padding:1.5em 0.5em 0.5em;
border:3px double #aaa;
margin-top:-1.1em;
width:90%;
margin:-1em 3% 0.2em;
}
h1 {
padding:0 10px;
background-color:#fff;/*on enleve la transparence */
margin-left:6%;
border:1px solid #aaa; /* option boite */
display:inline;/* reduit le titre a la taille du texte */
position:relative;/* pour IE repasse le <h1> sur le <p>
, affichage en avant plan sans z-index */
background:#eee;
}

test visuel :
http://gcyrillus.free.fr/trucs_css/simil_fieldset_legend.html
++

Je viens de tester ta méthode donc evidemment ca fonctionne.
Dans quel cas ta methode serait plus adaptée.

Et au fait !
Je viens de m'apercevoir que monde sous ie placer l'entête au milieu de boite donc il faut que je trouves d'où vient le problème.

text-align et c'était réglé.

Bon merci à tous et surement à bientôt

a écrit :
Dans quel cas ta methode serait plus adaptée.

comme dans l'exemple que je te donne , la ou tu n'as que 2 balises , un titre et un paragraphe, ensuite si tu as un titre et deux pargarphe a "joindre/grouper , le <div id="block"> est bien sur a utiliser .


++

p.s , ce n'est pas ma methode , c'est une solution parmis d'autres .