euh oui, je le vois mais je ne comprend pas trop ce que je devrais y voir !
euh oui, je le vois mais je ne comprend pas trop ce que je devrais y voir !
hum... ok:
Il faut savoir que les styles s'héritent. Un élément contenu dans un autre héritera des styles de son conteneur. Sauf si l'élément a un style défini qui écrase celui du conteneur. Sachant ça:Tous les labels contenus dans corpForm ont une taille de 150px, sont alignés à droite et, le plus important, ils flottent tous à gauche. C'est à dire que le flux HTML normal coule à droite de chaque label.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 #corpForm label { float: left; width:150px; text-align: right; }
Ensuite on écrase et ajoute des styles dans l'élément label contenu dans contexte :Au lieu d'aligner à droite comme le début du formulaire on place le texte à gauche du label. Ensuite le clear dit que le coté gauche du label ne doit pas toucher de boîte flottante. Pourquoi? Apparemment, les checkbox sont des élements plus petits que les autres inputs donc les labels seraient censés couler à droite de chaque label précédent.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 #contexte label { clear: left; text-align: left; }
Ce n'est pas forcément clair mais pour illustrer, remplace le style #contexte label actuel par :Et on comprend tout de suite mieux l'intérêt du clear (un bout de chaque label touche le label précédent en bas à droite).
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 #contexte label { border: solid 1px red; text-align: left; }
En fait, les champs du formulaires coulent à droite des labels grâce à #corpForm label, le clear: left n'est qu'une mise au point.
Clair?
ah oui tres clair, mais en fait tu vois ce que tu nommes contexte, est un nom généré automatiquement depuis une table de ma base et qui change selon les tables, donc le nom n'est pas fixe, on ne peux pas rajouter une balise d'un nom different pour que cela fonctionne ?
Ben mets un id en dur.
html :css :
Code : Sélectionner tout - Visualiser dans une fenêtre à part <fieldset id="sousForm">
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 #sousForm label{ clear: left; text-align: left; }
Partager