OVH Cloud OVH Cloud

[CSS] Styler LEGEND ?

5 réponses
Avatar
Pierre Goiffon
Est-ce que quelqu'un ici a tenté quelques modifications au rendu par
défaut de l'élément legend ?
J'ai essayé quelques petites choses, pour simplement afficher le legend
à droite du trait du fieldset, mais je n'arrive à rien de concluant
(margin comme padding fond que la bordure du fieldset se retrouve très
espacée du legend)

5 réponses

Avatar
O.L.
Pierre Goiffon a utilisé son clavier pour écrire :
Est-ce que quelqu'un ici a tenté quelques modifications au rendu par défaut
de l'élément legend ?



Oui, moi !
Par exemple sur www.reseau-pegase.net (zone de recherche à droite)

J'ai essayé quelques petites choses, pour simplement afficher le legend à
droite du trait du fieldset



Mettre le LEGEND à droite ? Est ce que ça, ça ne suffit pas :
<legend align=right ...>

Ou bien tu veux ça mais en mieux ? En + à droite ?

--
Olivier Ligny
Créateur web free-lance / www.cyber-tamtam.net
Avatar
Pierre Goiffon
O.L. wrote:
Est-ce que quelqu'un ici a tenté quelques modifications au rendu par défaut
de l'élément legend ?



Oui, moi !
Par exemple sur www.reseau-pegase.net (zone de recherche à droite)

J'ai essayé quelques petites choses, pour simplement afficher le legend à
droite du trait du fieldset



Mettre le LEGEND à droite ? Est ce que ça, ça ne suffit pas :
<legend align=right ...>



Oui, les modification de font* et border* sont en effet bien prises en
compte.

Je pensais sinon à des modifications de la position (horizontale,
verticale), _en_CSS_. L'attribut align est deprecated :
http://www.w3.org/TR/html401/interact/forms.html#adef-align-LEGEND

Merci quand même de la réponse
Avatar
ASM
Pierre Goiffon a écrit :
Est-ce que quelqu'un ici a tenté quelques modifications au rendu par
défaut de l'élément legend ?
J'ai essayé quelques petites choses, pour simplement afficher le legend
à droite du trait du fieldset, mais je n'arrive à rien de concluant
(margin comme padding fond que la bordure du fieldset se retrouve très
espacée du legend)



pour ce que j'en avais essayé à une époque
les différences de résultats IE/FF etant trop importantes
pour tout ce qui a trait aux styles des forms et de leurs elements
en particulier fieldset, legend, label
j'ai mis un très fort bémol
(et c'est sans compter avec les fantaisies d'autres navigateurs
dont bp ne veulent pas qu'on touche à leurs boutons)

--
Stephane Moriaux et son [moins] vieux Mac
Avatar
ASM
Pierre Goiffon a écrit :

Je pensais sinon à des modifications de la position (horizontale,
verticale), _en_CSS_. L'attribut align est deprecated :
http://www.w3.org/TR/html401/interact/forms.html#adef-align-LEGEND



et ils y disent bien :

<!ELEMENT LEGEND - - (%inline;)*

http://www.yoyodesign.org/doc/w3c/css2/visuren.html#value-def-inline

alors, en le passant en block ?

--
Stephane Moriaux et son [moins] vieux Mac
Avatar
Olivier Masson
ASM a écrit :

pour ce que j'en avais essayé à une époque
les différences de résultats IE/FF etant trop importantes
pour tout ce qui a trait aux styles des forms et de leurs elements
en particulier fieldset, legend, label
j'ai mis un très fort bémol
(et c'est sans compter avec les fantaisies d'autres navigateurs
dont bp ne veulent pas qu'on touche à leurs boutons)




Pareil.
Effectivement border et font mais également background passent bien.
Pour le reste, à chaque navigateur sa salade.

Si tu veux vraiment décaler le fieldset, moi j'utilise une magouille
toute moche puisque elle ressemble à un bon hack puant à la IE : mets un
padding de la longueur du décalage voulu (en % si tu veux) sur le
fieldset (et non le legend, puisque ff ne le prend pas) puis mets une
marge négative de la même valeur sur le label.

Du genre :

fieldset {
border-color: #A29160;
border: 1px solid blue;
padding: 10px 0 0 300px;
margin: 0;
font: normal 13px/21px arial, sans-serif;
}
legend {
text-align:center;
font: bold 17px/17px arial, sans-serif;
color: gray;
border:1px dotted grey;
}
label {
margin: 0 0 0 -300px;
}