28211 sujets

CSS et mise en forme, CSS3

[résolu] Probleme style label en CSS

Bonjour,

J'ai un problème avec la balise label : je voudrais lui donner des propriétés en css de façon à ne pas avoir trop d'espace entre chaque champs (brbr et p c'est trop) :


<label for="nom">Nom du contact</label><br />
<input type="text" value="Nom" id="nom" name="nom2" size="14" onfocus="this.select();" /><br />


J'ai donc mis un joli 


label {
margin: 5px 0 0 0;
}


Mais ça ne marche pas du tout ! ça bouge pas d'un iota, quelqu'un à une idée ?
Modifié par Samuel Berg (25 Jan 2006 - 10:26)
<p>
   <label for="nom">Nom du contact</label>
   <input type="text" value="Nom" id="nom" name="nom2" size="14" onfocus="this.select();" />
</p>


form fieldset label {
   display:block;
}
form fieldset p {
   margin-top:5px;
}


[EDIT]
J'avais pas vu le js dans l'input, Tu devrais plutot appeler ta fonction directement depuis le fichier .js pour ne pas qu'il y ai de js dans ton code html Smiley cligne
Modifié par noklio (24 Jan 2006 - 17:40)
Modérateur
Bonjour,

noklio, pour ce qui est de mettre le label en display block, personnellement, je n'aime pas cette méthode. Je préfère de loin un bon vieux br. Le display block sur le label fait étendre sa zone d'action sur toute la largeur. Met un background-color:red à ton label, tu verras ce que je veux dire. Cela a pour effet d'être visuellement très étrange si un fond est attribué au label, et en plus, l'utilisateur qui clique à droite dans le formulaire peut donner le focus à un champ, sans trop savoir pourquoi, puisque le texte du label se trouve beaucoup plus à gauche. C'est toujours possible de donner une largeur au label, mais bon, c'est moyen... Smiley confus

Samuel Berg, je ne suis pas certain d'avoir compris ce que tu veux vraiment. Est-ce que c'est l'espace entre chaque label/champ versus label/champ suivant, ou bien entre un label et son champ associé ?

Dans ton CSS actuel, tu as mis 5px en haut du label, et 0 ailleurs. Tu ne voulais pas plutôt mettre 5px en bas du label ?

Un petit rappel, au cas où :
margin:haut droite, bas, gauche

Ceci étant dit, essaye plutôt de mettre le margin-top (ou margin-bottom, selon ce que tu recherche à faire) à ton input plutôt qu'à ton label.
Modifié par Tony Monast (24 Jan 2006 - 17:52)
Tony Monast a écrit :
Bonjour,

noklio, pour ce qui est de mettre le label en display block, personnellement, je n'aime pas cette méthode. Je préfère de loin un bon vieux br. Le display block sur le label fait étendre sa zone d'action sur toute la largeur.


Bah il met un float:left au label et un clear:both à l'input Smiley smile

Ce qu'il veut faire c'est espacer un label/input d'un autre label/input Smiley smile

[EDIT]
De toute façon si il met pas un float ou un display:block; sur le label il arrivera à rien...
Modifié par noklio (24 Jan 2006 - 17:56)
Modérateur
noklio a écrit :

Ce qu'il veut faire c'est espacer un label/input d'un autre label/input Smiley smile


D'accord, alors j'utiliserais plutôt ceci, à la base :

HTML :

<form ...>
<fieldset><legend>Informations</legend>

<p>
<label for="Champ1">Champ 1 :</label><br />
<input type="text" value="AAA" id="Champ1" name="Champ1" ... />
</p>

<p>
<label for="Champ2">Champ 2 :</label><br />
<input type="text" value="BBB" id="Champ2" name="Champ2" ... />
</p>

</fieldset>
</form>


CSS :


form fieldset p {
margin:10px 0 0 0;
padding:0;
}


Le deuxième groupe label/input sera à 10 pixels du premier groupe label/input. À adapter selon les besoins.

C'est un exemple sommaire.
Modifié par Tony Monast (24 Jan 2006 - 18:04)
 Tu devrais plutot appeler ta fonction directement depuis le fichier .js pour ne pas qu'il y ai de js dans ton code html


Alors non parce que c'est une fonctio qui n'est pas dans .js : je demande juste qu'en se mettant sur le champ il le sélectionne ce qui a été validé dans ce forum par la meilleure méthode au niveau de l'accessibilité contre la suppression automatique au clic dans le champ...
Par contre j'aimerais bien savoir comment faire pour tout mettre dans .js pour ne pas avoir a mettre de code dans le xhtml merci d'avance !

Dans ton CSS actuel, tu as mis 5px en haut du label, et 0 ailleurs. Tu ne voulais pas plutôt mettre 5px en bas du label ?


Non car c'est entre chaque label-input que je veux maîtriser l'espace, donc top

Ceci étant dit, essaye plutôt de mettre le margin-top (ou margin-bottom, selon ce que tu recherche à faire) à ton input plutôt qu'à ton label.


C'est effectivement bien vu, mais ça m'oblige à mettre une classe sur les input et textarea... car c'est spécifiquement pour certains formulaires (je ne veux pas que ça s'applique à mon champ recherche et newsletter)


Ce qu'il veut faire c'est espacer un label/input d'un autre label/input smile


J'aime me sentir compris

De toute façon si il met pas un float ou un display:block; sur le label il arrivera à rien...


Je préfère rester dans le traditionnel et n'utiliser les displays qu'avec parcimonie...

Le deuxième groupe label/input sera à 10 pixels du premier groupe label/input. À adapter selon les besoins.


Il me semble avoir essayé mais ayant déjà donné des attributs à la balise p il ne me prend pas en compte les nouveaux paramètres ce qui veut dire qu'à 0 je suis à 7 pixels de différence. Cela peut-il se régler par l'attribut !important ? Et cet attribut fonctionne actuellement sur quels navigateurs ?
Modifié par Samuel Berg (25 Jan 2006 - 09:42)
Bonjour,

<style type="text/css">
<!-- 
form div {
margin-top: 5px;
}
-->
</style>
</head>
<body>
<form action="#" method="post">
<div><label for="nom">Nom du contact</label><br />
<input type="text" value="Nom" id="nom" name="nom2" size="14" onfocus="this.select();" /></div>
<div><label for="nom">Nom du contact</label><br />
<input type="text" value="Nom" id="nom" name="nom2" size="14" onfocus="this.select();" />
</form>


Ou margin-bottom selon le résultat attendu pour le premier/dernier groupe....
Modifié par Laurent Denis (25 Jan 2006 - 09:47)
Laurent Denis a écrit :
Bonjour,

<style type="text/css">
<!-- 
form div {
margin-top: 5px;
}
-->
</style>
</head>
<body>
<form action="#" method="post">
<div><label for="nom">Nom du contact</label><br />
<input type="text" value="Nom" id="nom" name="nom2" size="14" onfocus="this.select();" /></div>
<div><label for="nom">Nom du contact</label><br />
<input type="text" value="Nom" id="nom" name="nom2" size="14" onfocus="this.select();" />
</form>


Ou margin-bottom selon le résultat attendu pour le premier/dernier groupe....


Non je n'aime pas cette méthode car "trop de div tue les divs" !

J'ai trouvé la solution : la bonne méthode est effectivement fieldset p, mais ça ne marchait pas pour la bonne raison que je m'appliquais sur les margin alors que : 

p {
	background: transparent;
	color: #000;
	padding: 7px 0 7px 0;
	margin: 0;
	}
Samuel Berg a écrit :


Non je n'aime pas cette méthode car "trop de div tue les divs" !


ça, c'est une grosse erreur due aux (anciens) billets de Raphaël sur ce thème, partiellement erronés, ou disons beaucoup trop rapides (Raphaël sait que je n'ai jamais été d'accord avec sa notion de "divite").

On est ici exactement dans un cas où div est tout à fait justifié, puisqu'il s'agit de grouper des éléments (qui ne constituent pas plus un "paragraphe" qu'autre chose) afin de leur appliquer un style. Ce qui est précisément l'une des définitions de div selon CSS2 Smiley cligne

Il n'y a aucun avantage à utiliser des paragraphes qui nécessitent que tu surcharges la CSS (au passage, tu peux très bien te passer de surcharger aussi le HTML avec un fieldset inutile, en utilisant un sélecteur du type form p ou body form p)
Modifié par Laurent Denis (25 Jan 2006 - 10:15)
Laurent Denis a écrit :


ça, c'est une grosse erreur due aux (anciens) billets de Raphaël sur ce thème, partiellement erronés, ou disons beaucoup trop rapides (Raphaël sait que je n'ai jamais été d'accord avec sa notion de "divite").

On est ici exactement dans un cas où div est tout à fait justifié, puisqu'il s'agit de grouper des éléments (qui ne constituent pas plus un "paragraphe" qu'autre chose) afin de leur appliquer un style. Ce qui est précisément l'une des définitions de div selon CSS2 Smiley cligne

Il n'y a aucun avantage à utiliser des paragraphes qui nécessitent que tu surcharges la CSS (au passage, tu peux très bien te passer de surcharger aussi le HTML avec un fieldset inutile, en utilisant un sélecteur du type form p ou body form p)


Je comprend Raphaël, car pour moi aussi les divs servent à combler les manques de mise en page que l'on avait avec les tableaux, donc éviter de les employer en plus pour d'autres action quand c'est possible afin de s'y retrouver dans le code. Par ailleurs c'est aussi long d'avoir des balises p que des divs, et c'est aussi long dans le css de donner un propriété un div qu'a un css, je ne vous suis pas trop sur ce point Smiley sweatdrop
Un élément div n'a pas de propriété CSS par défaut dont il faut tenir compte, contrairement à un paragraphe (marges) ou autre.

Il ne suppose aucun sens prédéfini qui serait susceptible d'être exploité à tort par un script (exemple, extraire le début de chaque paragraphe d'un document dans une version résumée de celui-ci).

Utilisé comme conteneur même si les propriétés concernées pourraient être portées par l'élément enfant (<div><ul>...</ul></div> par exemple), il permet d'anticiper sur les besoins de structure qui apparaîtraient par la suite lors d'un redesign (et qui peuvent être très coûteux en temps de reprise du code HTML).

Il "remplace" effectivement en quelque-sorte les tableaux, mais sans aucun des désavantages de ceux-ci (il ne suppose aucun mode de rendu a priori).

Il répond au besoin inhérent au HTML d'éléments permettant des effets de présentation. HTML et (X)HTML1.0 ne sont pas des formats abstraits : leur structure est directement issue du besoin d'afficher le contenu, et conserve obligatoirement une part "présentative". Celle-ci n'est pas problématique dans la mesure où elle n'est pas obstructive...
Ah le sujet revient ça faisait longtemps Smiley smile

J'étais déjà convaincu à l'époque par l'argumentation de laurent concernant l'utilisation des div dans le cas où aucune autre balise html ne semble particulièrement adéquate.

L'exemple donné était le cas d'un lien isolé ayant body pour parent. Que choisir ?

. créer une liste à un item

. le placer dans un p

. convenir que rien de tout celà ne convient réellement et qu'il est préférable de se rabattre sur une balise neutre de type block.

Conclusion évidente : c'est div.

Sur l'utilisation de div dans l'anticipation de mise en page :

Là je serais plus réservé en étant néanmoins d'accord sur le fond du raisonnement. Les grands div englobants sont tout à fait cohérents dans le code html :

div global, pour le contenu, pour l'ensemble des menus constituant le menu, pour l'ensemble des éléments constituant la clôture du document et qui deviendront graphiquement un footer et d'autres choses sans doute encore.

Tout celà est très vrai mais n'est pas le fond du problème car il y en a un et énorme. C'est comment élaborer une méthode pour mettre en oeuvre les css sur la base d'un code html bien pensé. Le sujet serait donc la qualité de conception, les étapes de cette conception, l'apprentissage, et plus plus spécifiquement la méthode pour le débutant.

du point de vue du html les div englobants n'ont aucune utilité et cet état garde une antériorité logique.

La logique de conception serait donc : codage html - mise en place de div en vue d'un design "possible" - finition en vue d'un design précis.
On peut bien sur très bien imaginer de regrouper les trois premier point mais cela n'a de sens que si on a la maitrise pour le faire.

La logique d'apprentissage serait elle : codage html - test divers et aventureux sur les css à partir de cette structure - découverte de l'utilité des div englobantes - retour aux css de manière plus efficace.

Au final bien sur les div sont bien là et de manière justifiée. Pourtant le billet de Raphaêl faisait mouche car dans la réalité que voit on très souvent ?

Design sur logiciel d'image - mise en div - découverte au hasard qu'un menu ça se code très bien en liste - mise de cette liste dans une des div précitées - Résultat un <div><ul>...</ul></div> dont celui qui l'a écrit est incapable de penser à quoi cela correspond.
Modifié par clb56 (25 Jan 2006 - 12:06)
Modérateur
Samuel Berg a écrit :

C'est effectivement bien vu, mais ça m'oblige à mettre une classe sur les input et textarea... car c'est spécifiquement pour certains formulaires (je ne veux pas que ça s'applique à mon champ recherche et newsletter)


Non, tu peux utiliser le id de ton formulaire pour appliquer les styles uniquement à celui-ci. Tu peux aussi faire l'inverse en appliquant la margin sur les inputs à tous tes formulaires, et ensuite ajuster le tir via CSS pour tes formulaires spécifiques. Voici un exemple pour espacer un input de son label associé :


form#IDForm input,form#IDForm textarea {
margin-top:10px;
}


Comme c'est plutôt l'espace entre un label/input et un autre label/input que tu veux faire, tu peux utiliser mon code ou celui de Laurent. Au fait, tu n'aime pas le code que je t'ai proposé ? Il fonctionne très bien... Smiley confus . Selon ta vision des choses, tu peux reprendre mon code et changer les p pour des div, c'est comme tu veux.
Modifié par Tony Monast (25 Jan 2006 - 15:03)
Sujet clos
Aller à