css debutant, heritage

[olala]

bonjour, je debute et je suis souvent confronte a un cas CSS :

.cadre { width: 273px; text-align: center; color: #B0A77E; padding: 2px; }

.marge35 { margin-left: 35px; }

.marge60 { margin-left: 60px; }

voila, j'ai un container "cadre" qui va me servir souvent.

suivant les pages, la marge de gauche va varier.

actuellement j'ecris :

<div class="marge60><div class="cadre> .....</div></div>

pour une autre page :

<div class="marge35><div class="cadre> .....</div></div>

est ce qu'il y a une methode plus elegante pour declarer cela ?

merci

[Dudu]

Bonjour et bienvenue sur le Hub !

Y'a-t-il une méthode plus élégante, réponse: oui

Il faut savoir que l'avantage des classes est qu'elles peuvent être utilisées conjointement, c'est-à-dire plusieurs classes attribuées au même élément.

Il suffit juste de les séparer d'un espace.

Concrètement, dans le cas présent çà donnerait:

<div class="marge60 cadre">...</div>

<div class="marge35 cadre">...</div>

Tout simplement

C'est une astuce CSS qui permet de 'nettoyer' son code (X)HTML de trop de balises superflues.

Ensuite, quelques petites remarques qui pourront te servir:

- il est relativement déconseillé de nommer des ids ou des classes CSS par des noms qui ressemblent à leur apparence visuelle.

Je m'explique: là, tu as nommé "marge60" une classe qui a pour but de donner une marge de 60 pixels. Imagine maintenant que dans quelque temps, tu décides de changer de design et que ta classe "marge60" devienne une règle qui donne une marge de 45 pixels..

Dans le même genre, on voit souvent des classes avec des noms telles que .bordureorange (c'est un exemple). Si çà se trouve, après redesign, il n'y aura plus de bordure mais un couleur d'arrière-plan.. une couleur verte par exemple.

Donc après pour s'y retrouver c'est pas l'idéal

- trop de <div> tue le <div>. Une erreur courante est d'opposer "design en tableaux" et "design en div". Non ! Le reproche qui est fait aux mises en page en tableaux c'est de manquer de sémantique. Des mises en pages exclusivement faites avec la balise <div> souffrent du même problème.

La sémantique c'est l'art d'utiliser telle balise HTML pour tel élément: il y a plein de balises HTML, il faut s'en servir !

Par exemple, dans ton cas, quel est le contenu que tu vas mettre dans ton <div class="marge35"><div class="cadre"> .....</div></div> ?

Du texte ? sous forme de paragraphe ?

Alors dans ce cas, tu as tout intérêt à utiliser la balise <p> qui est censé englober un .. paragraphe.

Çà donnerait alors <p class="marge35 cadre">...</p> et ce serait déjà beaucoup plus correct

En fait le <div> c'est une balise neutre, une balise qui ne veut rien dire et théoriquement on devrait donc ne pas l'utiliser.

Théoriquement, mais en pratique ce n'est pas si simple: on l'utilise donc.

Mais son utilité reste finalement d'établir les grands 'blocs' qui font composer la page.

Par exemple un <div="header"> pour l'en-tête, un <div="footer"> pour le pied-de-page, un <div="sidebar"> pour le menu de navigation vertical etc..

Idéalement, il ne devrait pas y avoir plus de 5 ou 6 <div> dans une page. Au-délà, c'est le signe d'un code qui ne respecte pas ou peu la sémantique.

- Fais attention aux petites erreurs qui peuvent conduire le navigateur à interpréter ton code bizarrement. Il manque quelques guillemets dans le code que tu donnes.

<div class="marge60"><div class="cadre"> .....</div></div>

<div class="marge35"><div class="cadre"> .....</div></div>

Certains navigateurs 'comprennent' ce que tu as voulu dire et font comme si le guillemet était présent. D'autres ne vont pas le faire et ton beau design apparaîtra complètement ruiné: ce serait dommage

Bon courage, a+

[TheRec]

Bonjour,

Premièrement, lorsque tu spécifie une valeur pour une propriété d'un élément en XHTML, tu dois toujours fermer les guillemets.

<div class="marge60">

  <div class="cadre">...</div>

</div>

Ensuite il faut voir ce que tu souhaites faire de ces cadres... si ton cadre à une fois la fonction de contenir de texte de ton site, une autre fois le menu et une dernière le pied de page...il n'est pas logique d'utiliser le même nom pour ces 3 éléments.

Il vaut mieux faire un copier/coller des valeurs si elles sont les même et si un jour cela vient à changer tu n'auras pas à te demander si en changeant ces propriétés tu va "casser" l'ensemble de ta présentation...tu ne paies pas et n'est pas payé "au nombre de sélecteur", donc tu peux en utiliser plus.

Finalement, lorsque tu nomme une classe, n'y entre pas des informations qui se trouvent être liée à la présentation...car si cela vient à changer un jour tu perdra cette "logique"...si tu changes ta classe margin35 et que tu spécifies une marge de 250px à la place de 35px, tu devras changer ta classe dans la CSS et dans ton code (x)HTML

EDIT : Bon j'ai compris je me tais Grillé... Pourquoi je te vois rarement en mode "réponse..." dans la liste de pseudo Dudu ? Si je t'y voyais je ne commencerais même pas à écrire

[olala]

merci beaucoup

guillemet manquant = faute de copier-coller

sinon je fais un div quand il y a plein de <P> et <UL><OL><LI> dedans sinon je suis perdu ...

Modifié 17 Mai 2006 par olala