Memes proprietes pour plusieur div

[Nenex]

Slt

Pouvez vous eclairer ma lanterne

Pour le site d'une copine je vais lui faire un menu simple en image survolees en CSS. Voila le CSS pour un bouton :

.bouton-mes-produits {
	background:url(../elements-des-pages/acceuil/bouton.png);
	width:200px;
	height:33px;
	display:block;
	position:absolute;
	background-repeat:no-repeat;
	/* Position block */
	top:150px;
	left:10px;
	/* dimentions */
	left:100px;
	top:200px;
	/* Texte */
	font-family:normal;
	font-size:1em;
	font-weight:bold;
	color:#FFFF00;
	text-align:center;
}

.bouton-mes-produits:hover {
	background:url(../elements-des-pages/acceuil/bouton.png);
	width:200px;
	height:33px;
	cursor:pointer;
	text-decoration:none;
	color:#00FFFF;
}

Certaine propriete seront les meme pour les autres boutons. Par exemple, la dimention du block, centrage du texte, etc. Pour les proprietes qui seront les meme pour touts les bouton, est-il possible de faire comme ca :

bouton-mes-produits, bouton-me-trouver, bouton-contact {
	width:200px;
	height:33px;
	font-family:normal;
	font-size:1em;
	font-weight:bold;
	color:#FFFF00;
	text-align:center;
}

bouton-mes-produits:hover, bouton-me-trouver:hover, bouton-contact:hover {
	color:#00FFFF;
}

Comme ca si je doit modifier, par exemple la couleur du hover, je ne fait qu'une seule modif. Pareil pour le texte.

Merci pour vos lumieres

Modifié 18 Septembre 2009 par Nenex

[jcaron]

Je pense que tu devrais relire quelques trucs sur la différence entre "class" et "id". "Class" (donc la notation .nomdeclasse ou type.nomdeclasse en CSS) peut être appliqué à plusieurs objets qui partagent les mêmes attributes. "Id" (donc la notation #id ou type#id en CSS) est prévu pour être associé à un seul objet.

Ce qui fait qu'en général, tu vas avoir quelque chose comme ça:

<div class="classe1" id="div1">....</div><div class="classe1" id="div2">...</div>

Et en CSS:

div.classe1
{
/* attributs communs à tous les div avec la classe "classe1" */
}

div#div1
{
/* attributs spécifiques au div id=div1 */
}

div#div2
{
/* attributs spécifiques au div id=div2 */
}

etc.

Tu peux même mettre plusieurs classes sur un objet si nécessaire (en les séparant par des espaces dans l'attribut class).

Jacques.

[petit-ourson]

Oui c'est possible, mais il faut écrire :

.bouton-mes-produits, .bouton-me-trouver, .bouton-contact {
...
}

.bouton-mes-produits:hover, .bouton-me-trouver:hover, .bouton-contact:hover {
...
} 

[Nenex]

Je pense que tu devrais relire quelques trucs sur la différence entre "class" et "id". "Class" (donc la notation .nomdeclasse ou type.nomdeclasse en CSS) peut être appliqué à plusieurs objets qui partagent les mêmes attributes. "Id" (donc la notation #id ou type#id en CSS) est prévu pour être associé à un seul objet.

Ce qui fait qu'en général, tu vas avoir quelque chose comme ça:

<div class="classe1" id="div1">....</div><div class="classe1" id="div2">...</div>

Et en CSS:

div.classe1
{
/* attributs communs à tous les div avec la classe "classe1" */
}

div#div1
{
/* attributs spécifiques au div id=div1 */
}

div#div2
{
/* attributs spécifiques au div id=div2 */
}

etc.

Tu peux même mettre plusieurs classes sur un objet si nécessaire (en les séparant par des espaces dans l'attribut class).

Jacques.

Je connais la difference entre id et class. Je demande pas si je peu mettre pluseiurs class. Regarde mieux les 2eme codes tu vera que c'est pas ca. Je me suis peut etre mal exprime.

Oui c'est possible, mais il faut écrire :

.bouton-mes-produits, .bouton-me-trouver, .bouton-contact {
...
}

.bouton-mes-produits:hover, .bouton-me-trouver:hover, .bouton-contact:hover {
...
}

ha oui j'ai oublie les point avant les nom des class. Merci.

[jcaron]

Pas la peine de citer l'intrégalité des messages qui sont juste avant.

Pour ma part, je voulais simplement dire que si tu as plusieurs objets qui ont des propriétés CSS communes, plutôt que de faire une liste des objets en question dans ton CSS, c'est plus simple d'utiliser une classe unique. Comme ça, si tu rajoutes un autre objet du même genre, tu n'as que ta page HTML à modifier, pas ton CSS (ou uniquement pour les propriétés spécifiques à ce nouveau bouton). Ca fait du code nettement plus facile à maintenir.

Donc au lieu de faire .bouton-ceci, .bouton-cela, .bouton-autre-chose dans ton CSS (et la liste s'allonge à chaque fois que tu ajoutes un bouton), tu les mets tous dans la même classe "bouton", et tu utilises .bouton dans ton css. Pour les propriétés qui sont différentes d'un bouton à l'autre, tu utilises soit un ID (ce qui serait le plus logique), soit une autre classe.

Mais ce n'est évidemment que mon avis, et je le partage :-)

Jacques.

[Nenex]

La liste ne s'allongera pas pour les bouton (bon allez peut etre 1, voir 2, mais pas plus). Je sais qu'il faut essayer de voir plus loin (au cas ou..), mais la j'en suis certain. Et si je doit rajouter un bouton, j'ai juste le nom de sa classe a rajouter dans dans la fameuse liste du fichier CSS . Pas epuisant quand meme

Pour l'id oui tu a raison. Ca aurait ete plus logique que je mette une id plutot que class.

[jcaron]

Même si tu ne t'en sers pas dans ce cas précis, ce sont toujours de bonnes habitudes à prendre...

Jacques.

[Nenex]

Pour les id tu parle ?

[jcaron]

Pour le fait d'utiliser une "class" pour les propriétés communes à plusieurs objets.

Jacques.

[Nenex]

mais je trouve pas plus simple que se que je fait moi. Je dit pas que c'est pus complique, mais je trouve que c'est pareil.