Discussion :

[Jolt0x]

Bonsoir,

Vous qui avez l'habitude de développer pour le Web, pouvez-vous me dire à quelle date on a vu apparaitre les balises <div> et les "class" avec les "id" ?

Ce que je voudrai faire c'est avoir plusieurs valeurs de <h1>, <h2>, etc pour une instance div ? Est-ce que c'est possible ? En sachant que je veux conserver mes anciennes valeurs de <h1>, <h2>.

Je n'en sais pas si je suis clair. Par exemple, je veux faire cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div class="maClasse">
<h1>Bonjour</h1>
</div>
et 
<div class="monAutreClasse">
<h1>Bonjour autre</h1>
</div>

Ça doit être possible ? Mais quoi mettre dans la feuille de style ?

Merci

J.

[nsanabi]

Ce que je voudrai faire c'est avoir plusieurs valeurs de <h1>, <h2>, etc pour une instance div ? Est-ce que c'est possible ? En sachant que je veux conserver mes anciennes valeurs de <h1>, <h2>.

effectivement ce n'est pas claire
mais si tu veux que tes H1, H2 etc aient différentes apparence (styles) selon les div auxquelles ils appartiennent tu pourras (pour ton exemple) écrire en css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
/*avec */
/*style des h1 dans n'importe quel conteneur de classe  maClasse  */
.maClasse h1{
  color:red;
}
 
/*style des h1 dans n'importe quel conteneur de classe  monAutreClasse */
.monAutreClasse h1{
  color:blue;
}
 
 
/*ou encore*/
/*style des h1 dans une div de classe  maClasse  */
div.maClasse h1{
  color:red;
}
 
/*style des h1 dans dans une div de classe  monAutreClasse */
div.monAutreClasse h1{
  color:blue;
}

sinon tu pouvait plus simplement utiliser des id :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="maDiv">
<h1>Bonjour</h1>
</div>
et 
<div id="monAutreDiv">
<h1>Bonjour autre</h1>
</div>

en css ce sera :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
/*style des h1 dans n'importe quel conteneur d'id  maClasse  */
#maDiv h1{
  color:red;
}
 
/*style des h1 dans n'importe quel conteneur d'id  monAutreDiv*/
#monAutreDiv h1{
  color:blue;
}

faire un minimum de recherche sur les sélecteurs css s'impose

[12monkeys]

Bonsoir

Peut être utile : un tutoriel sur les sélecteurs CSS http://css.developpez.com/tutoriels/...lecteur-css-3/

[Erwan31]

Vous qui avez l'habitude de développer pour le Web, pouvez-vous me dire à quelle date on a vu apparaitre les balises <div> et les "class" avec les "id" ?

L'élément DIV a été introduit en 1995 avec HTML 3.0, quand à class et id ils sont arrivé après avec HTML 4.0 en 1997.

EDIT : je me rend compte que ça ne répond à ta question.
Je dirais pour ma part que l'utilisation du couple DIV/CSS (sous l'impulsion de sites comme CSSZengarden, Openweb...) a émergé en France vers 2002-2003, associé souvent à XHTML 1.0 dont j'ai commencé à entendre parlé en 2001-2002.
Mais la transition dans les entreprises s'est faite un peu plus tard (2004-2005 voire 2006 je dirais). Dans la boîte ou je bossais à l'époque on s'y était mis en 2004 (assez tardivement quand on y repense).
Les class étaient déjà utilisées avant pour styler le texte le plus souvent, personnellement je les ai utilisées dés 2000 voire 99 me souviens plus mais les id on été introduit en parallèle aux DIV/CSS.

[Jolt0x]

Merci pour les dates, Erwan31 !

Mais tu dis: "Les class étaient déjà utilisées avant pour styler le texte le plus souvent, personnellement je les ai utilisées dés 2000 voire 99 me souviens plus mais les id on été introduit en parallèle aux DIV/CSS."

Mais un <div> sans classe ou id a l'intérieur ne sert a rien ? T'es d'accord ? Alors pourquoi l'utiliser seul ?

J.

[nsanabi]

Mais un <div> sans classe ou id a l'intérieur ne sert a rien ? T'es d'accord ? Alors pourquoi l'utiliser seul ?

rien ne sert à rien en général, cela dépendra de l'usage qu'en fait le développeur.
déjà une div dans le flot html est considérée par défaut comme un bloc ce sera ainsi la même chose qu'insérer un <p>
puis il ne faut pas oublier qu'on peut accéder à n'importe quel élément en css ou en javascript via le dom sans que cet élément n'ai un id, il suffit pour cela d'utiliser l'arborescence du document html