Utilisation de même classe ou id

Bonjour
je me demande si face au xhtml 1.0 strict l'utilisation de classe et id identique est interdit ?

pour exemple avoir celà est ce interdit ?

<div id="produit">

<div id="Ingrédients"></div>
</div>
...
...
<div id="produit">

<div id="Ingrédients"></div>
</div>
...
...
etc...

j'ai dans ce cas un message disant ID "produit" déjà défini, ID "ingredients" déjà défini

Hmm je ne vois pas de class dans ton exemple, peut-être une erreur d'inattention de ta part.

Pour ce qui est des ID, c'est certain qu'il ne faut jamais que deux éléments ailles le même ID, et cela ne touche pas seulement le xhtml strict, mais aussi le DOM Javascript je crois bien.

Parlais-tu d'avoir un élément avec un ID du même nom qu'une class d'un autre élément ayant déjà ce nom ?

Comme :

<div id="bidon"></div>  et <div class="bidon"></div>

Modifié par Merkel (09 May 2005 - 19:04)

Salut
oui j'ai oublié d'y montrer des classe dans mon exemple mais l'erreur est identique aux id, puisque j'utilise des class et id identiques...
J'utilise les même nom de classe ou d'id car j'ai besoin des mêmes propriete, faut il que je change le nom pour ça??

Dans ta CSS, pour cibler un élément, on fait ceci pour les ID :

#bidon

Pour les class :

.bidon

Donc au niveau de stylage des éléments, le fait que tu donne un ID identique à une class déjà existante, ca ne change rien car de toutes façons, tu devras ajouter une déclaration dans ta feuille de style pour cibler l'élément via son ID. Bref, je ne vois pas pourquoi tu dis que tu dois donner le même nom à un ID qu'à une class. Tu peux très bien donner les mêmes propriétés à deux éléments ayant des ID ou des class différentes.

Tu le sais surement déjà, mais je le répète, au cas où :

Un ID doit toujours être unique
Une Class peut se répéter plusieurs fois dans le document
Théoriquement, je ne pense pas que ce soit illégal d'utiliser un ID="bidon" et une CLASS="bidon" dans le même document (c'est ca que tu veux savoir ?)

J'ai peut-être mal compris ce que tu veux dire.

ha j'ai du mal m'exprimer
bon en fait ce sont des id que j'ai identiques et que j'utilise plusieurs fois car je veux les même priorités

la solution serait donc de passer
#bidon
à .bidon ainsi je pourrais les répéter plusieurs fois?

imotep a écrit :
la solution serait donc de passer
#bidon
à .bidon ainsi je pourrais les répéter plusieurs fois?

Exact :
http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id

merci beaucoup pour vos réponses

Bonjour,

Tu peux définir des propriétés identiques à plusieurs éléments à la fois dans ta feuille de style, et définir des propriétés qui sont propres à tel ou tel élément.

.toto, #tata{
color: #cc0000;
font-weight: bold;
font-family: monospace;
}
#tata{
position:absolute;
top:200px;left:200px;
background:#eee;
}
.toto{
position:absolute;
top:30px;
left:30px;
background:#000;
}

Pour préciser le tuto de raphael :
L'attribut ID est une propriété de l'interface HTMLElement du DOM.

En tant que propriété du DOM, cet attribut peut être utilisé par tous les langages qui implémentent le DOM pour identifier un élément unique, c'est le cas de Ecmascript (getElementById) mais aussi de Java, des dialectes XML, de certaines biliothèques PHP ou encore de CSS.

L'attribut class quant à lui n'à pas vocation à identifier un élément mais simplement à passer des propriétés, en loccurence des propriétés CSS, à un ou plusieurs éléments.
De ce point de vue il ne diffère pas des attributs comme src, width, name ou href par exemple.
Enfin l'attribut class se comporte de manière strictement identique à l'attribut style qui sert à définir des propriétés CSS locales.

Il n'y à aucun problème à ce qu'un attribut ID, unique, est une valeur identique à un autre attribut.
On utilise par exemple ce genre de syntaxe dans les formulaires :

<label for="nom">nom</label><input id="nom" name="nom"... />

Donc une syntaxe comme

<div id="contener" class="contener">..</div>

Ne pose aucun problème tant que la valeur de l'attribut ID est unique pour cet attribut.
A noter enfin que si des propriétés CSS sont affectées à l'ID et à la class les règles d'héritages jouent normalement, de la même manière qu'il est possible de "surcharger" une classe CSS en rajoutant un attribut style local.
Modifié par jpv (09 May 2005 - 23:44)

Merci vraiment

Je viens de tester ma page, en remplaçant les id par class et il se trouve que je passe en valide xhtml1.0 strict

Mais le probleme c'est qu'en passant de id a class, je me retrouve plus avec le même rendu visuel!
certaine choses sont décalé etc...

Comment celà fait ce? d'autant plus que je n'ai fait que changer mes #bidon par .bidon

imotep a écrit :
Merci vraiment
(...)

Mais le probleme c'est qu'en passant de id a class, je me retrouve plus avec le même rendu visuel!
certaine choses sont décalé etc...

Comment celà fait ce? d'autant plus que je n'ai fait que changer mes #bidon par .bidon

De mémoire, il me semble que quand on a plusieurs fois le même id dans la page, le "stylage" spécifié dans la feuille de style ne s'applique qu'au dernier élément possédant cet id...

bin là le "stylage" est le même partout, mes dimension de largeur ne sont plus respectées, pour tous ces blocs

Gilles a écrit :


De mémoire, il me semble que quand on a plusieurs fois le même id dans la page, le "stylage" spécifié dans la feuille de style ne s'applique qu'au dernier élément possédant cet id...

Moi j'ai envie de dire, on s'en fout de comment ça marche ID c'est unique et puis point barre.

ID ça ne sert d'ailleurs pas qu'aux styles CSS, c'est pour les ancres, pour pointer sur un élément via JS, ...

ID est unique c'est bien pour ça, donc on s'en fout un peu quand dans l'hypothétique cas où il y en aurait plusieurs ID lequel sera traité

Olivier a écrit :

ID est unique c'est bien pour ça, donc on s'en fout un peu quand dans l'hypothétique cas où il y en aurait plusieurs ID lequel sera traité

Certes certes... Je suis entièrement d'accord avec toi sur le fait qu'un ID est et ne peut qu'être qu'unique. C'était juste une tentative d'explication de ce que constatait imotep... Je n'aime pas rester avec un problème non résolu sur les bras
Modifié par Gilles (10 May 2005 - 12:58)

a écrit :

Moi j'ai envie de dire, on s'en fout de comment ça marche cligne ID c'est unique et puis point barre.

Moi j'ai envie de dire que ben si, justement, comprendre comment ça fonctionne permets de savoir comment debugger

a écrit :

Comment celà fait ce? d'autant plus que je n'ai fait que changer mes #bidon par .bidon

Il n'y à aucune raison pour que le changement d'affectation des propriétés CSS d'un ID à une classe modifie quoi que ce soit.
Tu à donc une ou plusieurs erreurs dans ton fichier CSS.

Il est par contre possible que l'erreur soit antérieure à ta modification et que ton premier résultat n'ait été que la conséquence "heureuse" d'une structure invalide.

Il te faut donc vérifier point par point ton fichier CSS et ta structure de page.

JP

PS: En passant, un grand bonjour à Gilles dont les cours sur XML/DOM/DHTML sont des modèles du genre.

Modifié par jpv (10 May 2005 - 13:14)

jpv a écrit :

Moi j'ai envie de dire que ben si, justement, comprendre comment ça fonctionne permets de savoir comment debugger

Bah, comment débugger... y a pas de bug, ID est unique donc on en met qu'un pis c'est tout (une valeur j'entend).

Pour un autre problème, comprendre comment ça marche oui, mais là bon.. enfin on a compris mon point de vue

bonjour à tous

malheureusement, en changeant simplement mes id en class j'ai un changement soudain erfff
j'ai validé mon fichier css et tout est ok pourtant:

je vous joint l'architecture de mon fichier html et css

<div id="idees">


<div id="produit">

<table class="contour"><tr><td><a name="">Recette</a></td></tr></table>

<ul class="annexe"> <li>nbre pers</li><li>tps</li> <li>Cuisson : </li></ul>
<img src="monimage.jpg" alt="image" class="image" /> 

</div>
<div id="Ingredients"><strong class="surlign">Ingrédients</strong>
<ul class="liste"><li>....</li>
                  <li>....</li>
                  <li>.....</li>
           
                  
</ul>


</div>

<div id="preparation">

<p class="surlign">Préparation</p>


<p class="surlign">....text</p>
Formez autant de petite boule avec la pate, donez la grosseur que vous désirez.<br />

<p class="surlign">garniture</p>
Faite cuire.....<br />
<p class="surlign">Conseils</p>
C'est extrement simple à réaliser.<br />                
                  

</div>
<br /><br />

#idees
{
margin-left: 5px;
margin-top: 20px;
width: 100%;
text-align: left;

}

#produit
{
width: 50%;
height: 250px;
text-align: left;
border-left: yellow double 5px;
float: left;
}

.contour
{
width: 100%;
background: #ddd;
color: #fff; 
font-family: Benguiat Frisky;
font-size: 15px; 
font-weight: bold;
}

.image
{
width: 200px;
height: 200px;
margin-top: 10px;
}


.annexe
{
float: right;
margin-top: 35px;
color: #ddd;
font-weight: bold;
font-size: 15px;
font-family: Lucida Console;
}

#Ingredients
{
margin-top: 30px;
padding-left: 20px;
width: 300px;
color: #ddd;
font-family:arial;
font-size: 15px;
float: left;
}

.surlign
{
text-decoration: underline ;
font-weight: bold;
}

.liste
{
font-size: 14px;
font-family: arial;
list-style-type: none;
}

#preparation
{
padding-left: 10px;
padding-top: 10px;
width: 550px;
text-align: left;
font-size: 14px;
}

Voilà, en changeant mes id en class mon style ce voit tout modifier, mes largeurs ne sont plus respectées etc...

Ta structure est inutilement compliquée et contiens beaucoup d'élement inutiles comme la table et le div préparation.
Le flux est particulièrement obscur et il est bien difficile de comprendre ce que tu veux obtenir exactement.

Il y à également d'autres problèmes comme de styler des paragraphes ou un strong à seule fin de créer des effets de titre (tu devrais utiliser des balises h pour ça).

En partant de la sructure actuelle, ton affichage à l'écran est absolument exact par rapport à ta structure CSS.

Ce qui veut dire que le problème ne viens pas des CSS mais de ta structure elle-même.

Par exemple, les deux positionnements en float:left de produits et Ingrédiens sont particulièrement obscurs, à quoi te servent-ils ?
A priori ces deux éléments ont parfaitement leur place en flux naturel.

Enfin quel est le contexte dans lequel cette structure doit s'afficher, c'est une page ? ou un élément à afficher dans une page ?

Le plus simple serait de nous montrer ce que tu veux obtenir dans le contexte d'affichage final (Un draft en image suffirait)

Il faudras ensuite simplifier la structure et adapter les styles en conséquences.

salut et merci

En fait a travers ces 2 float: left; je cherche le moyen d'accoler ces 2 blocs sur la même horizontale, car sinon ils se placent les uns en dessous.

On peut considérer que j'ai un grand bloc qui contient le tout(id="idees")!
j'ai volontairement enlever ce qu'il y a au dessus!
dans ce bloc je place un bloc qui contient une recette(id="produit"),ainsi de suite.
Dans le bloc ingredients je place une liste d'ingredients pour la recette, et ensuite dans le bloc preparation j'explique la recette.
Voilà un peu ma trame, que j'aimerais faire, qui fonctionne parfaitement si je laisse les id, mais qui est bousculé si je mets des class, au niveau des id="produit" et id="ingredients"