28173 sujets

CSS et mise en forme, CSS3

Appliquer un display:block sur une <legend>

Bonjour !

Je cherche à faire en sorte que les balises legend d'un formulaire prennent toute la largeur du formulaire. Et je ne parviens pas à fixer la largeur d'icelles.

Est-ce que quelqu'un sait si c'est possible ?

Mon code de test (le width n'est pas pris en compte) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr">
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
	<style>
	</style>
</head>
<body>

	<form>
		<fieldset>
			<legend style="border: 1px solid blue; display: block; width: 10em; color: blue;">Mon formulaire</legend>
			<label for="name" style="display: block; texte-align: right; width: 5em; padding-right: 1em; float: left;">Nom</label><input name="name"></input>
		</fieldset>
	</form>
</body>
</html>


Chose étrange, le DOM inspector ne me dit pas si firefox applique un display: inline; ou un display: block; à legend, donc je soupçonne une comportement trop particulier...

Et pour une fois, ça fonctionne sous I.E..
J'ai trouvé une solution éminament insatisfaisante mais qui fonctionne sous I.E. 6 et FF 1.5 : j'applique dans la direction qui convient un padding-direction: 1000px; et margin-direction: -1000px;.
Modifié par Carmine (03 Mar 2006 - 10:59)
Bonjour,

Gasp ! Smiley cligne

On peut voir un exemple en ligne ?

Parce qu'a priori, on peut aisément prévoir divers effets de bords indésirables.

Le stylage des éléments liés aux formulaires est un exercice souvent très frustrant, qui invite généralement à lâcher prise une fois qu'on a obtenu l'effet désiré dans un navigateur de son choix sans dégradation pour les utilisateurs.
Modifié par Laurent Denis (03 Mar 2006 - 11:11)
Carmine a écrit :
J'ai trouvé une solution éminament insatisfaisante mais qui fonctionne sous I.E. 6 et FF 1.5 : j'applique dans la direction qui convient un padding-direction: 1000px; et margin-direction: -1000px;.


Merci pour cette solution. Au moins, le résultat visuel voulu est obtenu Smiley cligne . Ce n'est pas la première fois que j'y étais confrontée et, en attendant, j'ai maintenant une solution.
Sujet clos
Aller à