CSS Selector: adjacent siblings (+ la philo du <dl>)

26 juil. 2006, 13:27

...pas trouvé de meilleur titre, désolé

Je vous explique le problème. Je souhaite styler un formulaire où chaque <label> est contenu dans un <dt> et le champs correspondant dans un <dl>. J'aimerais faire en sorte que la couleur du texte du <label> (ou <dt> à la rigueur) change lorsqu'on passe la souris passe sur le <dd> correspondant. Un exemple du XHTML du formulaire

Code : Tout sélectionner

<div class="form-main"><form method="post" action="#">
<dl>
	<dt><label for="nom">Nom</label></dt>
	<dd><input type="text" name="nom" id="nom" size="20" /></dd>

	<dt><label for="prenom">Prénom</label></dt>
	<dd><input type="text" name="prenom" id="prenom" size="20" /></dd>
</dl>
</form></div>

Extrait du CSS:

Code : Tout sélectionner

.form-main dt
{
	color: #555555;
}

Si j'ajoute ça:

Code : Tout sélectionner

.form-main dd:hover + dt
{
	color: #000000;
}

ça fait presque ce que je veux, ça change la couleur du <dt> qui suit le <dd>, alors que j'aimerais sélectionner celui qui le précède. Une idée ? merci

26 juil. 2006, 13:37

Je viens de me rappeler que phpBB 3 avait un truc similaire dans son panneau d'admin. J'ai vérifié, la différence par rapport à mon code c'est que chaque entrée du formulaire a son propre <dl>. Concrètement:

Code : Tout sélectionner

<div class="form-main"><form method="post" action="#"> 
<dl> 
   <dt><label for="nom">Nom</label></dt> 
   <dd><input type="text" name="nom" id="nom" size="20" /></dd> 
</dl>
<dl>
   <dt><label for="prenom">Prénom</label></dt> 
   <dd><input type="text" name="prenom"id="prenom"  size="20" /></dd> 
</dl> 
</form></div>

Et là, le CSS devient facile:

Code : Tout sélectionner

.form-main dl dt
{ 
   color: #555555;
}
.form-main dl:hover dt
{
   color: #000000;
}

Du coup, maintenant la question que je me pose est : peut-on réellement utiliser un <dl> par élément ? D'un point de vue sémantique, tous les champs du formulaire devraient faire partie de la même liste, même si j'avoue que l'intérêt est plus philosophique que pratique. (à part peut-être pour les screen-readers ?)

Tout avis est le bienvenu

26 juil. 2006, 13:41

A quoi correspondent les balises <dl> et <dt>?
Merci d'avance

26 juil. 2006, 14:06

<dl> est une liste de définitions

Pour se rappeler des noms des balises

<dl> - definition list
<dt> - definition term
<dd> - definition description

26 juil. 2006, 19:22

De la façon dont je vois la chose : l'utilisation de dl/dt/dd n'est là que pour de la mise en page : est-ce bien utile dans la mesure où tu pourrais très bien faire la même chose en pointant les propriétés CSS directement sur les éléments

26 juil. 2006, 19:44

L'utilisation d'une dl sert surtout à structurer les données, mais c'est bien sûr un élément essentiel pour baser mon CSS. J'aimerais bien faire du XHTML qui soit un tant soit peu sémantiquement correct mais surtout laisser 100% de la présentation au CSS. (donc pas de tables

)

Je n'ai pas compris, qu'entends-tu par "point[er] les propriétés CSS directement sur les éléments" ?

26 juil. 2006, 19:59

Si c'est pour une question de positionnement des éléments <label> ou <input /> tu peux très bien le faire directement sans devoir les encadrer dans un <dt> ou <dd>

Prenons un formulaire tout ce qu'il y a de basique sans mise en forme spécifique mais en XHTML 1.0 Strict :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <!-- Date de cr?ation: 07/04/03 -->
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
    <title>Un formulaire ordinaire</title>
  </head>
  <body>
    <form method="post" action="recup.php" id="mon_formulaire">
      <label>Votre nom</label>
	  <input name="nom" type="text" />
	  <label>Votre prénom</label>
	  <input name="prenom" type="text" />
	  <input type="submit" name="Submit" value="Envoyer" />
    </form>
  </body>
</html>

Appliquons une feuille de style :

Code : Tout sélectionner

label, input {
    display: block;
    color: #555;
    background-color: inherit;
}
label {
    padding-left: 1em;
}
label:hover {
    color: #000;
    background-color: #ff9;
}
input {
    border: 1px solid #555;
    margin: 0.2em 0 0 3em;
}

Observe le résultat et vois si ça répond à ce que tu cherches ? (Je suis peut-être complètement à coté de la plaque ?)

26 juil. 2006, 20:25

Oui, mais non

J'ai vraiment besoin d'une structure pour organiser les champs parce que je peux avoir d'autres informations à présenter comme par exemple une description du champs (ou une info du genre "Insensible à la casse") ou encore changer la couleur de fond de la zone autour d'un <input> pour indiquer une erreur. Par exemple

Code : Tout sélectionner

<dt><label for="main-date">Date</label><div class="explain">Format jj/mm/aaaa</div></dt>
<dd class="error"><input type="text" name="date" id="main-date" /><div class="error">Impossible d'utiliser une date passée</div></dd>

...tout ça pour dire qu'il y a pas mal d'avantages à bien structurer mes champs, donc je suis à 99.99% certain d'utiliser des <dl>. Ça aide aussi à aligner les éléments horizontalement (même si c'est possible par d'autres moyens). Que de très bonnes choses en somme

Ce que je cherche, c'est à modifier le style du <label> (et même de l'explication situé dans le <div> juste en dessous si possible) lorsque le focus est donné à l'<input> vers lequel il pointe. Pour l'instant, j'ai recours à la même astuce que phpBB 3, c'est à dire utiliser un <dl> par champs du formulaire. Mais si quelqu'un connait ou a connu le même problème et connait une meilleure solution alors je suis preneur :]

CSS Selector: adjacent siblings (+ la philo du <dl>)

Qui est en ligne