Bonjour,

j'essaie de comprendre depuis 3 jours la différence entre <div id=...>
et <div span=...> , svp ne me renvoyez pas sur un cours en ligne , je pige rien .

les id c'est quand on ne veut pas réutiliser cette div et on met span quand on a l'intention de réutiliser cette fameuse div : je comprends pas !!!! ne me traitez pas de tous les noms de la terre , sérieusement je ne comprends pas .
comment on peut réutiliser une div ??? , adméttons qu'on prennent une div pour un menu , on ne va pas réutiliser cette <div id="menu"> ailleurs ???

pouvez vous svp me donner une explication un peu plus claire ou explicite et voir même me donner un exemple , ou allez voir un exemple .

une autre question :
On peut imbriquer combien de div l'une dans l'autre sans que cela soit génant pour une accessibilité correcte.

Merci de m'apporter ces réponses

Cordialement.

ptit novice
Modifié par petit novice (16 Mar 2006 - 17:52)
Bonjour

<div> et <span> sont des balises.
id et class sont des selecteurs css.
class c'est pour plusieurs éléments et id pour un seul.

ex: <div id="">élément unique</div>
<div class="">plusieurs éléments</div>

j'espère que cela apportera un petit plus à ta reflexion.

@+
Re

Dans ta page tu as plusieurs éléments des <div> des <span> des <p> des <em> etc etc, et bien "id" ne peut pas s'appliquer à tous les élément de ta page mais seulement à un seul et unique élément. Par contre class peut s'appliquer à tout les éléments contenu dans cette page.

@+
Re Smiley decu

Je n'arrive pas à visualiser ce que tu me dis , pourais tu me donner un exemple concret d'une page sur le oueb , si tu pe Smiley confused

merci .( j'ai envie de me cacher...) Smiley help
Michel a écrit :

<div> et <span> sont des balises.


Michel a écrit :

id et class sont des selecteurs css.

Stop ! Je t'arrête là. Ce sont des attributs de balises ou attributs d'élément.
minute ! Le CSS, ça vient ensuite.

Ces deux attributs, donc, sont suceptibles de recevoir un nom qui permet de les identifier.

Dans l'attribut id, tu ne peux utiliser qu'une seule et unique fois un nom donné. Cet attribut te permet de différencier un élément particulier dans ta page.
Cette identification sans équivoque permet généralement deux choses :
- Appliquer des propriétés CSS spécifiques à cet élément,
- Faire des traitements javascript/DOM.

Je ne reviendrai pas sur le deuxième point, car c'est une toute autre histoire.

Grâce à id, donc, tu peux appliquer des propriétés CSS à l'élément unique désiré, au moyen de la syntaxe suivante :

#identificateur {
/* propriétés */
}


Passons maintenant à class. Cet attribut peut être utilisé pour identifier un élément comme faisant partie d'un groupe, auquel tu veux appliquer les mêmes propriétés CSS (pour tout les éléments de ce groupe ainsi formé).

Un nom de classe identique peut intervenir autant de fois que nécessaire dans la page. Tous les éléments dotés d'un nom de classe spécifique se verront donc attribuer une série de propriétés CSS communes.

En CSS, voici la syntaxe pour définir une série de propriétés CSS devant appartenir aux éléments dotés d'un nom de classe spécifique :

.nomDeClasse {
/* propriétés */
}


J'espère avoir été limpide dans mes explications.
Bonsoir

C'est exactement ça rien à redire !!! Smiley prie

J'ai essayé de simplifier le plus possible et d'éviter la rallonge pour faire passer le déclic, en ce moment "petit novice" il s'arrache les cheveux Smiley scared et avec ton explication géantissime Smiley deal , c'est la fuite assurée, parfois il faut savoir se mettre à plusieurs niveaux pour comprendre l'autre et le servir convenablement Smiley jap .
Plus d'indulgence que dieu ! Smiley cligne

@+ Smiley smile
Modifié par Michel (16 Mar 2006 - 23:23)
Administrateur
Hello,

A toutes fins utiles, je rappelle qu'il existe un lien qui apparaît en bandeau tout en haut du forum chez les nouveaux venus ici ("Nouveau sur le forum ?...").
Ce bandeau est important. Il contient des pistes de recherche, des cours prévus pour vraiment débuter, des indications sur les règles de vie de la communauté, etc.

Il serait courtois de bien vouloir en prendre connaissance, afin qu'on n'aie pas l'impression de se fatiguer tout le temps pour rien Smiley cligne

PS : pour les id et les class, il suffit parfois de faire une petite recherche de 30sec sur les tutoriels, qu'en pensez-vous ? On y trouve parfois de jolies choses.
Modifié par Raphael (17 Mar 2006 - 09:39)
Bonjour,

Merci Michel et quentinc.

En effet il existe plusieurs definitions sur le net de ce que peut être une div id et une div class , avoir une explication théorique peut ne pas forcément servir surtout lorsqu'on débute.
De plus quand on regarde les codes sources de certains sites aussi bien leur html que leur CSS on s'apperçoit qu'il y a beaucoup de confusion entre les div id et les div class , certains webmasters utilisent des id à la place des class , sans doute parce qu'ils n'ont pas compris l'utilité réelle de ces deux nommages.

Raphael : excuse moi si tu as l'impression que j'ai créer un fil pour rien , mais mon sentiment décrit ci-dessus est véritable.
Toi en tant que professionnel et auteur d'un superb écrit tu pourai le confirmer sans peine.

Michel oui hier soir à 23.30 j'etait en train de me tirer les cheveux Smiley cligne .

Merci à vous tous.
Excuse moi Raphael.

Ptit novice.
Modifié par petit novice (17 Mar 2006 - 12:10)
Administrateur
Bonjour,

petit novice a écrit :
Pour ce qui est de ma question :
En effet les id prennent toute leur importance quand on a une feuille de style pour pluqieurs page ( oui je sais c'est l'intérêt d'une feuille de style) et dans ce cas oui on parle d'élément unique , contrairement à une class qui celle ci peut changer en fonction des pages.

Ce que tu dis n'est pas inexact mais c'est pas la raison première. La différence de définition entre les deux, c'est pour une page donnée, on ne pense pas à un site.
Un id ne peut pas et ne doit pas être trouvé plus d'une fois par page (il est donc par définition présent zéro ou une fois dans le code XHTML)

un class peut être trouvé zéro, une ou plusieurs fois dans le code XHTML d'une page.


Après au niveau d'un site, globalement, les id peuvent être utilisés pour distinguer un certain élément dans toutes les pages d'un site et qui serait unique (présent une fois maximum) à chaque page. Exemple un menu qui serait le même à travers toutes les pages et serait strictement identique.
Ils peuvent au contraire être utilisés pour marquer de manière unique un élément dans une page (ça de toute façon) ET à travers un site. Comme les plaques minéralogiques des voitures d'un pays: il n'y en a pas 2 identiques. Cela permet à coup sûr de savoir de quelle page il s'agit. Ce n'est pas tellement utilisé pour CSS mais surtout en programmation. C'est comme un code-barre que l'on placerait au milieu d'une page.
Felipe , merci pourta contribution ,
je repreends:
<div id="X">
#X
Sachant que X peut prendre des noms différents : logo ect...

< div class="W">
.W
aussi W peut prendredes noms différent

il peut exister plusieurs div id dans une page ex : X, X1, X2, X3...tout comme sur ce site alsacreations, il y a plusieurs div id.

Pour les class , c'est pareil

<div id =" X1"> X1 est unique : ex si X1 est le logo , cel veut dire quon ne peu mettre le logo que a un endroit de la page et non à deux endroits , si nous souhaitons le mettre a deux endroits il faut utiliser une class = c'est dans ce sens qu'on parle d'unique ???

Merci
Ps: Si on veut vraiment comprendre le CSS+Xhtml et faire quelque chose d'asssez évolué , croyez moi ce n'est pas facile ( en tot cas en ce qui me concerne ) .
je ne sais plus cela doit être sur openweb ou pompage, ou il est inscrit que c'est pas facile, contrairement à plusieurs autres sites qui affirment le contraire.
petit novice a écrit :
Ps: Si on veut vraiment comprendre le CSS+Xhtml et faire quelque chose d'asssez évolué , croyez moi ce n'est pas facile ( en tot cas en ce qui me concerne ) .
je ne sais plus cela doit être sur openweb ou pompage, ou il est inscrit que c'est pas facile, contrairement à plusieurs autres sites qui affirment le contraire.

En fait, c'est facile et compliqué à la fois. Par rapport à la méthode "à l'ancienne" pour faire des pages web, où on devait surcharger la page HTML avec du code gérant la présentation graphique, les CSS sont assez faciles d'utilisation. Mais en général, les sites qui font la promotion des CSS confondent facilité et puissance. Commes les CSS sont très puissantes et, dans une certaine mesure, facile d'utilisation pour les personnes déjà familiarisées avec l'édition de documents pour le web, on a tendance à affirmer que « Si si, vous verrez, c'est super facile ! », avant de se rendre compte que ça demande en fait un certain investissements.

Surtout en l'absence d'éditeurs (logiciels) bien fichus et accessibles aux non experts.

Je reviens sur la question qui nous occupe :

Les "div id" et les "div class" n'existent pas
Désolé, ça risque de t'embrouiller un peu, mais il faut crever l'abcès : il me semble que tu as compris quelque chose de travers dès le début, et si tu continues comme ça ça risque de t'embêter par la suite.

Tu parles de "div id" par opposition à des "div class". C'est peut-être juste une erreur d'expression (quoiqu'elles soient souvent révélatrices), mais tu as l'air d'opposer deux éléments distincts. Il va falloir faire un rappel.

Il s'agit dans les deux cas d'un unique élément HTML, nommé "div". Cet élément est composé de deux balises, une balise ouvrante "<div>" et une balise fermante "</div>", ainsi que d'un contenu placé entre ces deux balises (du texte, d'autres éléments HTML, etc.). Enfin, la première balise (la balise ouvrante), comme pour tout élément HTML, peut accueillir un ou plusieurs attributs, composés pour chacun d'un nom d'attribut, d'un signe "=", et d'une valeur d'attribut.

On récapitule :
Élément balise (cet élément n'existe pas, il est fictif) :
<balise attribut1="valeur" attribut2="valeur">Contenu</balise>
	(ou encore...)
<balise>Contenu</balise>


Élément div :
<div attribut2="valeur" attribut1="valeur">Contenu</div>
	(ou encore...)
<div>Contenu</div>


Mais alors c'est quoi "id" et "class" ?
Maintenant qu'on a vu la différence entre élément, balise est attribut, on peut affirmer que :
– Une "div" est un élément HTML composé de deux balises (ouvrantes et fermantes) englobant un contenu.
– Dans l'élément "div" suivant : <div class="valeur">Contenu</div>, les lettres "div" que l'on retrouve en début de balise ouvrante et dans la balise fermante correspondent au nom de l'élément.
– Dans ce même exemple, "class" est un attribut, auquel correspond une valeur. En tant qu'attribut, il n'est pas indispensable à l'élément. On ne peut donc pas parler de "div class" comme étant un élément unique.
– De même, "id" est un attribut, qui n'est pas indispensable à l'élément.
– On peut avoir zéro, un ou plusieurs attributs (avec leurs valeurs) pour un élément. Tous ces attributs seront placés dans la balise ouvrante de l'élément, après le nom de l'élément, et dans l'ordre que l'on voudra.
– Les attributs ne s'excluent pas mutuellement. C'est à dire que l'on pourra très bien écrire :
<div class="maclasse" id="identifiant">Contenu</div>
	(ou encore, écriture équivalente...)
<div id="identifiant" class="maclasse">Contenu</div>


Bon d'accord les "id" et les "class" c'est des attributs, mais on ne les utilise pas uniquement avec des "div" ?
Non, pas du tout. Tout élément HTML peut avoir des attributs, et les attributs "id" et "class" sont utilisables avec tous les éléments HTML décrivant un contenu (c'est à dire, dans une page, tous ceux qui sont placés au sein de l'élément "body", entre la balise "<body>" et la balise fermante "</body">... Rappel : l'élément "body" correspond au corps de page, et la grande majorité des éléments HTML présents dans le code d'une page web sera contenue au sein de cet élément).

On peut donc écrire :
<h2 class="titre">Ceci est un titre</h2>
<p id="premierparagraphe">Bla bla bla...</p>
<blockquote class="citation">Ma citation</blockquote>

Par exemple.

------------------------------------------

Voilà. Pour la différence entre l'attribut "id" et l'attribut "class", Raphael a donné un lien vers un article d'Alsacréations qui me semble sufisamment clair :
http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id

Dans la foulée, j'ai aussi écrit (pas pour l'occasion, hein !) un petit cours d'initiation HTML + CSS disponible à l'adresse suivante :

http://web.covertprestige.info/cours-htlm/

Je ne suis pas sûr qu'il soit totalement clair, mais je pense ne pas y avoir écrit (trop) de bêtises...
Modifié par mpop (17 Mar 2006 - 17:26)
Bonjour,

mpop: chapeau bas ...Superb..

Pour tout ce que tu écris je suis ok , et il est vrai que j'ai toujours parlé de div id et div class , mais on peu utiliser id et class avec autres balises.

ce que je veux arriver à comprendre ( vous m'excuserez ) c'est , pourquoi on ne peut pas reutiliser une id="X" et on peut réutiliser une class="y" , pouvez vous me donner des exemples..

la théorie je l'ai lu , et si je vous ennuie autant c'est bien parce que je n'arrive pas à comprendre et à voir ou a matérialiser la réutilisation d'une class et la non réutilisation d'une id.

ptit novice.
Désolé Smiley sweatdrop
petit novice a écrit :
ce que je veux arriver à comprendre ( vous m'excuserez ) c'est , pourquoi on ne peut pas reutiliser une id="X" et on peut réutiliser une class="y" , pouvez vous me donner des exemples...


Bon, allons-y pour un exemple.

Soit un blog composé d'une multitude de pages (allez, disons de 1 à + l'infini), toutes construites sur le même modèle. On pourra avoir une structure de page ressemblant à ceci :

<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Le blog du Dahu</title>
	<link rel="stylesheet" type="text/css" media="screen" href="superdahu.css" />
</head>

<body>
	<div id="page">
		<div id="entete">
			<h1>Le super blog du Dahu</h1>
		</div><!-- fin de div#entete -->
	
		<div id="contenu">
			<h2>Nouveau billet : trop d'la balle atomique</h2>
				<p>Ah ouais alors ça c'est trop marrant, j'adore :</p>
				<blockquote>
					<p>CATS: All your base are belong to us.</p>
					<p>CATS: You are on the way to destruction.</p>
					<p>CAPTAIN: What you say!!</p>
					<p>CATS: You have no chance to survive make your time.</p>
					<p>CATS: Ha Ha Ha Ha....</p>
					<p class="source">
						<a href="http://en.wikipedia.org/wiki/Zero_Wing_%28translations%29">
						Wikipedia EN: Zero Wing (translations)
						</a>
					</p>				
				</blockquote>
		
			<h2 class="important">Avertissement au lecteur</h2>
				<p>Lorem ipsum tout ça...</p>
				<p>Encore un paragraphe</p>
				<p class="note">Information périphérique au contenu du billet</p>			
		
			<h2 class="important">Premier billet : et c'est parti !</h2>
				<p>Super citation :</p>
				<blockquote>
					<p>J'ai aujourd'hui des enfants de quatorze et seize ans dont internet constitue la culture et l'espace de liberté.</p>
					<p class="source">
						M. le député Marc Le Fur
						(Assemblée Nationale, 2e séance du mercredi 21 décembre 2005)
					</p>
				</blockquote>
		</div><!-- fin de div#contenu -->
		
		<div id="piedpage">Mon pied de page</div>
	</div><!-- fin de div#page -->
</body>
</html>


Remarques sur le code :

Certains éléments de cette page sont uniques, c'est à dire que pour une page donnée du site, on les retrouvera qu'une seule fois. Bien sûr, si on cummule plusieurs pages, on retrouve ces éléments plusieurs fois. Mais pour une page donnée, on n'a qu'un seul conteneur général (ici la div ayant pour identifiant "page", qui nous servira par exemple à donner une largeur fixe à la page et à la centrer horizontalement...), on n'a qu'un seul en-tête, un seul pied de page, et une seule zone principale de contenu.

Techniquement, on retrouve souvent ces éléments identifiés par un identifiant unique dans les éléments qui dessinent la structure générale de la page. Ensuite, dans le contenu de la page lui-même, il est plus rare de les rencontrer (ou plutôt, il est plus rare que l'on en ait besoin).

Maintenant, les classes. Pour utiliser une classe, on n'est pas obligée d'être sûr d'avoir, à chaque page du site, plusieurs éléments qui utiliseront cette classe. En fait, on réfléchit dans le sens inverse. On a un élément, auquel on voudrait donner un style spécifique. On se demande alors : ce type d'élément sera-t-il toujours unique dans la page, ou bien pourra-t-on avoir plusieurs instances (plusieurs utilisations) de ce type d'élément ?

Dans l'exemple ci-dessus, on a des titres de niveau 2 qui indiquent le début d'un nouveau billet. Sur les trois billets affichés ici, deux ont un statut spécifique. L'auteur les considère comme importants et donc différent des billets normaux, et il leur applique une classe nommée "important", qui lui permettra par exemple d'afficher le texte en plus gros, ou en rouge, ou ce qu'il veut en fait.

Autre utilisation des classes, pour les paragraphes au sein d'un bloc de citation (élément "blockquote"). Si la citation est longue, on pourra l'organiser en utilisant plusieurs paragraphes. Maintenant, on voudra indiquer dans le bloc de citation la provenance de cette citation, en la mettant en évidence grâce à un style particulier. Comme un "paragraphe indiquant la provenance d'une citation" n'est pas un élément de la structure de la page, et que de plus il est théoriquement possible (et c'est le cas ici) que l'on ait plusieurs paragraphes de ce type dans une seule et même page, on utilisera donc plutôt une classe.
Exemple (code CSS) :
p.source {font-style: italic; color: gray;}

Notre paragraphe sera donc grisé et en italiques, afin de le différencier du texte même de la citation.

Il y a une infinité d'autres exemples. On peut créer un style "gauche" et un style "droite" que l'on attribuera aux images dans le contenu, pour les aligner à gauche ou à droite. Du coup, pour chaque image insérée dans le contenu, on n'aura plus qu'à choisir un des deux styles. Qu'utilisera-t-on dans ce cas précis, des classes (attribut "class") ou des identifiants (attribut "id") ?

Je ne donne pas la réponse, en espérant qu'à ce stade là elle s'impose d'elle-même Smiley biggrin
Modifié par mpop (17 Mar 2006 - 19:02)
Attention à utiliser un peu le bon sens quand même.

Si tu rentres dans une pièce en disant :

je demande que Jean_dupont lève la main.
Alors tu t'attends bien à voir une seule main se lever.

Si tu dis :

Je demande que toutes les personnes de plus_de_trente_ans lèves la main.
Alors tu prévois qu'il puissse en avoir plusieurs. Non ???

Jean_dupont c'est un id (un identifiant) et il est unique.

plus_de_trente_ans (c'est une classe, en anglais class, l'ensemble de tous ceux qui ont plus que trente ans... Les pauvres Smiley lol ...)
Modifié par clb56 (18 Mar 2006 - 00:03)
clb56 a écrit :
tous ceux qui ont plus que trente ans... Les pauvres Smiley lol ...)


Attention, début de troll prévisible...

Pour en revenir au sujet, évoquer "le bon sens" en ce qui concerne le web et plus généralement l'informatique, me semble source à controverses diverses et vairiées... (je passe les exemples multiples où le "bon sens" est mis à mal).

Ce topic a l'air rigolo à première vue, mais il n'en reste pas moins que l'accès au développement web pour des novices n'est pas simple du tout !!!

La meilleure preuve en est ce que souligne le "novice" en question :
a écrit :
Ps: Si on veut vraiment comprendre le CSS+Xhtml et faire quelque chose d'asssez évolué , croyez moi ce n'est pas facile ( en tout cas en ce qui me concerne ) .

Certes, il est toujours facile de dire :
- lisez la FAQ
- allez voir là
- et puis là aussi, vous verrez c'est génial...

Mais il n'empêche que certaines notions sont parfois difficiles à comprendre pour quelqu'un qui n'a jamais fait de sites web "à la main", c'est à dire sans l'aide d'outils comme Dream...er et compagnie.
Ce sujet m'a interpellé justement parce que mon père, qui voulait faire un petit site perso, m'avait posé exactement la même question il y a 2 semaines...
Après que je lui ai fait une démo minimale de son cas particulier, j'ai eu la chance qu'il comprenne à peu près ce que j'avais fait avec les "class" et les "id" pour n'avoir pas à lui expliquer ce que mpop a parfaitement expliqué dans son post (merci à lui, je crois que je vais le mettre dans mes favoris pour pouvoir le ressortir à l'occasion).