Multiples id sans definitions ?

Bonjour,

J'ai trouvé ce code :

HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS

#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#navlist li 
{
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}

Mais j'aimerais savoir :

1 - Pourquoi on a qu'un seul identificateur defini dans le fichier CSS (navlist) et dans le code HTML on appel des id non definies dans notre style tels que navcontainer, active, current ?

2 - Pourquoi on a mis

<li id="active">

qu'une seul fois mais dans les autres li ?

Merci.

... Pour ça, il faudrait demander au concepteur du code ...
Car il s'agit de sa mixture !

Pour ma part, je pense que tu n'as pas dû bien lire le code jusqu'au bout car il doit certainement y avoir plus loin une référence à #active et #current...
Enfin, cela semblerait logique !

Mais, en l'état actuel des choses ...
Si nulle part dans le CSS, il n'est fait mention de : #navcontainer, #active et #current
La portion de HTML pourrait s'écrire comme ceci :

<div>
 <ul id="navlist">
  <li><a href="#">Item one</a></li>
  <li><a href="#">Item two</a></li>
  <li><a href="#">Item three</a></li>
  <li><a href="#">Item four</a></li>
  <li><a href="#">Item five</a></li>
  </ul>
</div>

Modifié par Cygnus (30 Jan 2007 - 09:46)

Bonjour,

La feuille de style est incomplète, ou bien il s'agit d'id destinés à permettre l'ajout ultérieur de styles sur ces éléments.

Le conteneur #navcontainer peut avoir toutes sortes de rôles, pour la gestion d'arrière-plan, de bordures, d'espacement... en combinaison avec le contenu #navlist.

Le #active est généralement utilisé pour différencier l'élément de menu correspondant à la page en cours.

En revanche, le #current est a priori une maladresse du point de vue application de styles CSS, puisqu'un #active a remplira plus élégamment le même rôle.

Enfin, le rôle des identifiants ne se limite pas à appeler des styles CSS: ils sont fréquement utilisés, par exemple, pour faire intervenir des fonctions javascript.
Modifié par Laurent Denis (30 Jan 2007 - 09:47)

La portion de code va servir à marquer le lien en cours.
C'est très utile par exemple si un arrière-plan affecté à l'élément de liste doit être modifié au passage de la souris.

<li id="active">

Cependant, il est généralement déconseillé d'utiliser active comme nom d'id ou de classe car ce mot-clef possède déjà une utilité propre et définie en CSS.

Voila ou j'ai trouve le code :

ICI

apt a écrit :
Voila ou j'ai trouve le code :

ICI

Dans le cadre d'un exemple qui se veut pédagogique, c'est effectivement d'avoir utilisé des id que l'on n'utilisera pas dans le code CSS ou Javascript de l'exemple.

Mais comme expliqué plus haut, ces identifiants (id) peuvent être placés dans le code HTML en prévision d'utilisations futures (soit en CSS, soit en Javascript, voire les deux).

Note : le fait que le code HTML utilise un id ne signifie pas que cet id doive être retrouvé dans les scripts ou les feuilles de style liés à la page pour être valide. Il n'y aura pas d'erreur de compilation ou d'exécution liée à des attributs HTML inutiles ou des styles CSS inapplicables.

Cygnus a écrit :

Cependant, il est généralement déconseillé d'utiliser active comme nom d'id ou de classe car ce mot-clef possède déjà une utilité propre et définie en CSS.

Ah ? Intéressant concept...

Laurent Denis a écrit :
Ah ? Intéressant concept...

Eh ben ...
Dans l'optique où active définit déjà l'état d'un lien au moment de son activation,
Il me semble qu'il vaut mieux éviter de l'utiliser comme nom de class ou d'id ... Non ?!?

la FAQ a écrit :
La pseudo-classe a:active est souvent sujette à mauvaise interprétation.
a:active permet de provoquer un changement d'état au moment de l'activation du lien (état très temporaire).
a:active n'est pas prévu pour permettre de marquer une page comme active dans un menu.

Par exemple l'utilisation suivante ne me semble pas très judicieuse :

<a id="active href="#">lien de la page en cours</a>

a#active {
color:red;
}
a:active{
color:green;
}

M'est avis que c'est le meilleurs moyen pour s'emmeler les pinceaux ...
Surtout pour les personnes commençant à coder, non ?!?

M'enfin ...
Moi, j'dis ça...
Moi, j'dis rien ...
Modifié par Cygnus (30 Jan 2007 - 14:33)

Bof, pour tout dire

Le <a id="active"> a le mérite de la clarté, et de la lisibilité.

Sans compter que la pseudo classe :active est à peu près totalement dépourvue d'utilité, et n'est employée (au mieux) que pour le principe de faire comme si elle en avait une...
Modifié par Laurent Denis (30 Jan 2007 - 14:36)