[résolu] un "id" et une "class"

BberXIII81 · Message par **BberXIII81** » 17 juin 2007, 09:26

Es-ce possible d'attribuer un "id" et une "class" à la même balise?
Par exemple avec ses règles:

.centre
{
      text-align: center;
}

#centre
{
      text-align: center;
      background-color: #FFFFFF;
}
#centre2
{
      background-color: #FFFFFF;
}

Au lieu de mettre id="centre", es-ce possible de mettre id="centre2" et class="centre" à la même balise? Es-ce conseillé?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Mongo Bob · Message par **Mongo Bob** » 17 juin 2007, 10:13

A-priori, non, bien sûr, et inutile d'ailleurs. Mais quelle est la balise concernée? (code html?)

BberXIII81 · Message par **BberXIII81** » 17 juin 2007, 10:23

Pas de balise principalement concernée, un peu toutes. C'est pour nettoyer mon fichier css, et éviter qu'une propriété ce répète.
Plusieurs id ou class, non plus, je suppose.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

calimo · Message par **calimo** » 17 juin 2007, 10:37

BberXIII81 a écrit :Au lieu de mettre id="centre", es-ce possible de mettre id="centre2" et class="centre" à la même balise?

Oui bien sûr... pourquoi ça ne le serait pas ?

Code : Tout sélectionner

<p id="monTexte" class="resume">...</p>

BberXIII81 a écrit :Es-ce conseillé?

Euh, je dirais pas "conseillé", mais tout à fait normal.

Par contre, quand tu choisis des noms de classes et d'id, évite de penser à la mise en forme... que feras-tu le jour où tu ne voudras plus aligner au centre mais à gauche ? Tu auras des .centre alignés à gauche ? Ou bien tu devras changer tous les noms...

Trouve plutôt un nom un petit peu plus sémantique, par exemple #contenu, ou que sais-je !

Voir : http://www.pdimension.net/w3c/QA-Tips/goodclassnames (n'hésite pas à lire les autres astuces aussi)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4[/quote]

PS : tu peux aussi utiliser plusieurs classes séparées par des espaces : class="class1 class2 class3" -> les 3 classes seront appliquées.
Généralement, ce n'est pas nécessaire si l'on utilise correctement l'héritage. Et ça risque de devenir rapidement incompréhensible. Mais c'est possible

BberXIII81 · Message par **BberXIII81** » 17 juin 2007, 10:55

Voilà c'est tout ce que je voulait savoir, merci du conseil

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

BberXIII81 · Message par **BberXIII81** » 17 juin 2007, 12:09

Ma feuille de style a-t-elle encore de l'intérêt?
En voulant éviter que les attributs s'y répètent j'ai créer de nouvelles class qui constituent, maintenant, son principal contenu. Mes règles ne sont plus composé que de 1 à 2 attributs. Quand à ma page xhtml elle s'est alourdie du fait que j'utilise plusieurs class pour mes balise.
P.S. L'idée d'éviter que les attributs ne se répètent me vient du validateur css qui me disait que certains se répéter.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

calimo · Message par **calimo** » 17 juin 2007, 14:49

Ben c'est un peu toujours pareil : sans code, difficile à dire. Essaye de mettre en ligne ce que tu peux

(je crois sincèrement que ça vaut la peine, histoire de voir s'il n'y a pas quelque chose qui cloche...)

Sinon (et si oui aussi d'ailleurs), un peu de lecture : http://blog.alsacreations.com/2005/07/1 ... de-rigueur

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20061201 Firesalamandre Firefox/2.0.0.4 (Ubuntu-feisty)

BberXIII81 · Message par **BberXIII81** » 17 juin 2007, 15:08

Le premier, celui de base:

Code : Tout sélectionner

body
{
   background-image: url("fond.jpg");
   text-align: center;
}
img
{
   border: 0px solid;
   vertical-align: middle;
}
p
{
   text-indent: 20px;
}
p:hover, a:hover
{
   background-color: #CFE1EB;
}
p:first-letter
{
   font-weight: bold;
   color: #FF6600;
   font-size: 1.5em;
}
.titre
{
   font-weight: bold;
   color: #FF6600;
}
.titre2
{
   font-weight: bold;
   color: white;
}
.gauche2
{
   text-align: left;
}
.gauche
{
   float: left;
}
.centre
{
   text-align: center;
}
#barre
{
   background-color: #FFFFFF;
   border: 4px ridge;
   margin-bottom: 7px;
   padding: 3px 3px 6px 3px;
}
#menu
{
   float: left;
   width: 150px;
   min-height: 1600px;
   background-color: #FFFFFF;
   border: 4px ridge;
   padding: 1px 1px 1px 1px;
   clear:left
}
#corps
{
    margin-left:164px;
    margin-right:164px;
	min-height: 1600px;
	background-color: #FFFFFF;
	border: 4px ridge;
	padding: 1px 1px 1px 1px;
}
#droite
{
   float: right;
   width: 150px;
   min-height: 1600px;
   background-color: #FFFFFF;
   border: 4px ridge;
   padding: 1px 1px 1px 1px;
}
#pied
{
   background-color: #FFFFFF;
   border: 4px ridge;
   margin-top: 7px;
   padding: 1px 1px 1px 1px;
}
#annonces
{
   border: 4px ridge;
   padding: 1px 1px 1px 1px;
}
#logo2
{
   float: right;
}

Le second, en évitant un minimum de répéter les attributs

Code : Tout sélectionner

body
{
   background-image: url("fond.jpg");
   text-align: center;
}
img
{
   border: 0px solid;
   vertical-align: middle;
}
p
{
   text-indent: 20px;
}
p:hover, a:hover
{
   background-color: #CFE1EB;
}
p:first-letter
{
   font-weight: bold;
   color: #FF6600;
   font-size: 1.5em;
}
.titre
{
   font-weight: bold;
   color: #FF6600;
}
.titre2
{
   font-weight: bold;
   color: white;
}
.gauche2
{
   text-align: left;
}
.gauche
{
   float: left;
}
.droite
{
   float: right;
}
.centre
{
   text-align: center;
}
.barre
{
   margin-bottom: 7px;
   padding: 3px 3px 6px 3px;
}
.colonne
{
   min-height: 1600px;
}
.largeur
{
   width: 150px;
}
.couleur
{
   background-color: #FFFFFF;
}
.bordure
{
   border: 4px ridge;
}
.bordure2
{
   padding: 1px 1px 1px 1px;
}
#menu
{
   clear:left
}
#corps
{
    margin-left:164px;
    margin-right:164px;
}

Dans un premier temps, j'ai gardé des noms de règles en rapport, pour pas m'y perdre.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Message par **Benoit** » 17 juin 2007, 15:45

BberXIII81 a écrit :Ma feuille de style a-t-elle encore de l'intérêt?
En voulant éviter que les attributs s'y répètent j'ai créer de nouvelles class qui constituent, maintenant, son principal contenu. Mes règles ne sont plus composé que de 1 à 2 attributs. Quand à ma page xhtml elle s'est alourdie du fait que j'utilise plusieurs class pour mes balise.
P.S. L'idée d'éviter que les attributs ne se répètent me vient du validateur css qui me disait que certains se répéter.

L'intérêt d'une bonne feuille de style ne se voit pas sur une seule page (à moins que son contenu change très régulièrement), mais sur un ensemble de pages : c'est là que tu gagnes en réutilisant les mêmes styles pour d'autres contenus. Et si tu changes la feuille de style, hop, les deux sont à jour en même temps.

C'est un peu la même chose avec tes sélecteurs, en les combinant tu es plus précis, et c'est lorsque le contenu de ta page se diversifie que tu y gagnes.

Maintenant, tu es à une étape intermédiaire où ça n'a pas l'air beaucoup plus intéressant effectivement, mais si tu commences à changer certains sélecteurs pour s'appliquer à des éléments plutôt qu'à des classes tu vas voir que tu pourras en enlever quelques unes.

Par exemple tes classes "titre" et "titre2" correspondent sans doute à des balises h1, h2 ou h3 (et si ce n'est pas le cas, tu devrais sans doute les remplacer si ce sont vraiment des titres). Tu peux aussi être amené à utiliser des sélecteurs descendants. Par exemple, disons, un élément h2 qui est dans une "barre" :

Code : Tout sélectionner

div.barre h2 { /* un style particulier */ }

BberXIII81 · Message par **BberXIII81** » 17 juin 2007, 18:23

Je n'ai pas trouvé d'élément auquel translater des attributs d'une class. Donc je vais opter pour la feuille de style en fonction des élément que je pourrais changer dans l'avenir.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

calimo · Message par **calimo** » 17 juin 2007, 21:09

Ce que veux dire benoit, c'est que quand tu as :

Code : Tout sélectionner

.titre2
{
   font-weight: bold;
   color: white;
}

<h2 class="titre2">...</h2>

tu peux remplacer ça par :

Code : Tout sélectionner

h2
{
   font-weight: bold;
   color: white;
}

<h2>...</h2>

(Bien sur c'est un exemple un peu au hasard, impossible de savoir si c'est bien ce que tu as...)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20061201 Firemarsupilami Firefox/2.0.0.4 (Ubuntu-feisty)

BberXIII81 · Message par **BberXIII81** » 17 juin 2007, 23:22

J'avais bien compris, merci, mais "titre" est l'attribut de textes simples et "titre2" celui de <h1> et <h2> en même temps alors je garde ce dernier comme çà au cas où j'en aurais besoin plus tard pour d'autres balise.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Message par **Benoit** » 18 juin 2007, 00:00

Pourquoi pas

Code : Tout sélectionner

h1, h2
{
   font-weight: bold;
   color: white;
}

alors ?

BberXIII81 · Message par **BberXIII81** » 18 juin 2007, 08:58

oui, mais dans l'optique d'avoir besoin de balise h1 ou h2 autrement que blanche ou d'avoir besoin de blanc pour une autre balise, je vais garder le css comme ça, non?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Message par **chinon37** » 18 juin 2007, 09:27

amha, il vaut mieux donné priorité aux titres h1, h2, etc...
avec des "oui, mais je peux en avoir besoin autrement", tu ne les utilises jamais.
Or, ne serait-ce que pour le référencement dans les moteurs de recherches, les titres sont primordiaux. De plus, ils hiérarchisent le contenu du site.

Geckozone

[résolu] un "id" et une "class"

[résolu] un "id" et une "class"

Re: un "id" et une "class", es-ce possib

Qui est en ligne ?