div et class

Bonjour,

Question sans doute très conne mais bon, je n'arrive pas à trouver mon
erreur.

J'ai une feuille de style avec une classe définie :

div.menu {
text-align:center;
...
}

puis une sous-classe :

div.menu.droit {
text-align:right;
}

Normalement, je n'ai plus qu'à définir un div dans ma page html qui soit de
class="menu.droit" soit <div class="menu.droit"> pour que mon texte soit
aligné à droite, hors ça ne marche pas; pourquoi, ou est l'erreur?

Merci

Michel

Laforest wrote:

Bonjour,

Question sans doute très conne mais bon, je n'arrive pas à trouver mon
erreur.

J'ai une feuille de style avec une classe définie :

div.menu {
text-align:center;
...
}

puis une sous-classe :

div.menu.droit {
text-align:right;
}

Normalement, je n'ai plus qu'à définir un div dans ma page html qui soit de
class="menu.droit" soit <div class="menu.droit"> pour que mon texte soit
aligné à droite, hors ça ne marche pas; pourquoi, ou est l'erreur?

Merci

Michel

Bonjour !

ça ne marche pas car tu n'utilises pas la syntaxe adéquate.
Il aurait été plus simple que tu mettes directement ton bout de code,
mais on va faire sans.

En admettant que tu aies un div avec du contenu dedans, tu auras
plusieurs possibilités :

soit un class="", soit un id=""

<div class="ma-classe">
<p class="align-droite">
Ceci est mon texte
</p>
</div>

puis en CSS :
..ma-classe {
text-align: center;
}
..align-droite {
text-align: right;
}

Tu remarqueras que j'utilise des "-" et non des "_" dans les noms,
apparemment, les "_" semblent bannis dans les spécifications CSS. (à
vérifier)

Avec une id :

<div id="mon-id">
<p class="align-droite">
Ceci est mon texte
</p>
</div>

puis en CSS :
#mon-id {
text-align: center;
}
..align-droite {
text-align: right;
}

Le fait d'utiliser une id permet d'assigner un nom unique à un élément.
Il ne faut donc l'employer qu'une seule fois par page.
Cela permet également de créer les ancres auxquelles on accède via le
genre d'url suivant : http://www.truc.fr/ma_page.htm#mon-id.
C'est aussi plus clair sémantiquement parlant : nommer chaque partie de
son code permet de mieux organiser ses idées et donc son discours.

Dans le code CSS précédent, on permet à n'importe quel élément de classe
"align-droite" de bénéficier des attributs qui y sont attachés.

Avec le code CSS suivant, seuls les éléments de classe "align-droite"
imbriqués DANS l'élément d'id "mon-id" se verront alignés à droite :

#mon-id {
text-align: center;
}
#mon-id .align-droite {
text-align: right;
}

Voilà... Pour de plus amples infos, tu peux te rendre sur les sites
suivants :
- un article intéressant sur classes et id sur alsacréations :
http://www.alsacreations.com/articles/id_class/
- un autre sur la surenchère des div :
http://www.alsacreations.com/articles/economie/
- Openweb : http://www.openweb.eu.org
- pompage.net : http://www.pompage.net
- et beaucoup d'autres trucs intéressants ici :
http://cssvault.com/resources.php

Voilà, j'espère que ça t'aura aidé un peu.
Bon courage !

Laforest wrote:

Bonjour,

Question sans doute très conne mais bon, je n'arrive pas à trouver mon
erreur.

J'ai une feuille de style avec une classe définie :

div.menu {
text-align:center;
...
}

puis une sous-classe :

div.menu.droit {
text-align:right;
}

Normalement, je n'ai plus qu'à définir un div dans ma page html qui soit de
class="menu.droit" soit <div class="menu.droit"> pour que mon texte soit
aligné à droite, hors ça ne marche pas; pourquoi, ou est l'erreur?

Merci

Michel

Bonjour !

L'erreur se trouve dans la syntaxe (forcément tu vas me dire).

L'idéal aurait été de poster ton code avec, histoire d'avoir une base
commune, mais on va faire sans.

Reprenons ton exemple de texte dans un div.
Tu peux avoir plusieurs cas de figure, des "class" ou un"id" :

/* ------------------------------------------- */
/* ----------- Avec des "class" -------------- */
/* ------------------------------------------- */
<div class="centre-texte">
<p>
Ceci est un texte centré.
</p>
<p class="align-droite">
Ceci est mon texte, il est aligné à droite.
</p>
</div>
<p class="align-droite">
Ceci est un texte aligné à droite.
</p>

(Tu noteras que j'utilise des "-" et pas des "_". D'expérience, les "_"
ne sont pas dans les specs des CSS, mais cela reste à varéifier tout de
même...)

et en CSS :
..centre-texte {
text-align: center;
}
..align-droite {
text-align: right;
}

Ainsi tous les éléments imbriqués dans "centre-texte" et contenant du
texte seront centrés SAUF le texte d'un élément de classe "align-droite".

/* ------------------------------------------- */
/* -------- Avec un "id" et une "class" ------ */
/* ------------------------------------------- */
<div id="mon-id">
<p>
Ceci est un texte centré.
</p>
<p class="align-droite">
Ceci est mon texte, il est aligné à droite.
</p>
</div>
<p class="align-droite">
Ceci est un texte aligné à droite.
</p>

et en CSS :
#mon-id {
text-align: center;
}
..align-droite {
text-align: right;
}

Ici, tu noteras la différence entre id (#) et classe (.).
Donc l'élément "mon-id" centrera le texte de tous les éléments inclus
(sauf contre-ordre par la définition de styles différents comme c'est le
cas ici).

Un "id" est unique, donc tu ne peux l'utiliser qu'une fois par page.
Cela est intéressant de plusieurs façons :
- Il permet un accès par ancre. On y accède par des url de ce type :
http://www.truc.fr/ma_page.htm#mon-id. La personne qui cliquera sur ce
type de lien sera dirigé vers ma_page.htm et le navigateur se déplacera
automatiquement vers l'élément "mon-id" en le mettant (autant que
possible) en haut de page.
- Il est sémantiquement plus intéressant car il permet de structurer ta
page et donc tes idées.

Une variante intéressante de la CSS :
#mon-id {
text-align: center;
}
#mon-id .align-droite {
text-align: right;
}

Dans ce cas, seuls les éléments de classe "align-droite" imbriqués DANS
l'élément d'id "mon-id" seront alignés à droite.
Le style ne s'applique aux éléments de classe "align-droite" que s'ils
se trouvent dans l'élément d'id "mon-id".
(Je sais je me répète, mais je suis pas sûr d'être très clair... )
L'exemple suivant sera plus clair :
<div id="mon-id">
<p>
Ceci est un texte centré.
</p>
<p class="align-droite">
Ceci est mon texte, il est aligné à droite.
</p>
</div>
<p class="align-droite">
Ceci est un texte non aligné à droite, ce qui est un comble
!!!.<br />
Il faudrait ajouter ceci à la feuille de style :
<pre>
.align-droite {
text-align: right;
}
</pre>
</p>

Après bien sûr, pour faire un menu, il est souvent plus approprié
d'utiliser des listes (<ul><li></li></ul>).

des liens à suivre, ce sont des gens qui te veulent du bien :
- un article sur les différences entre id et class sur Alsacréations :
http://www.alsacreations.com/articles/id_class
- un autre sur l'économie de div :
http://www.alsacreations.com/articles/economie/
- l'incontournable Openweb : http://www.openweb.eu.org
- pompage.net : http://www.pompage.net
et tout un tas de choses intéressantes ici :
http://cssvault.com/resources.php

J'espère que ça t'aura aidé.
Bon courage !

Merci,

C'est plus clair.

Merci aussi pour le site qui est très intéressant, j'en profite pour donner
un lien que tu connais peut-être mais que je ne trouve nulle part (même
google ne me le donne pas, tout au moins dans les premières pages car je me
suis lassé), c'est selfhtml : http://actuel.fr.selfhtml.org/index.htm/
qui donne la syntaxe et est très pratique (je n'ai aucune action dans ce
site).

Par contre, puisque je te tiens, peux-tu m'expliquer l'intérêt de span par
rapport à div, j'ai essayé de comprendre, mais bof.


Merci
Michel

Laforest a écrit :

Merci,

C'est plus clair.

Merci aussi pour le site qui est très intéressant, j'en profite pour donner
un lien que tu connais peut-être mais que je ne trouve nulle part (même
google ne me le donne pas, tout au moins dans les premières pages car je me
suis lassé), c'est selfhtml : http://actuel.fr.selfhtml.org/index.htm/
qui donne la syntaxe et est très pratique (je n'ai aucune action dans ce
site).

Par contre, puisque je te tiens, peux-tu m'expliquer l'intérêt de span par
rapport à div, j'ai essayé de comprendre, mais bof.


Merci
Michel


Je peux, je pense

"<span>" est un élément de type "en ligne" alors que "<div>" est un
élément de type "bloc".
Le premier est principalement utilisé pour définir des styles différents
dans un texte. Par défaut, les éléments en ligne ne sont pas retirés
du flux de texte.
Les éléments de type "bloc" sont considérés comme des boîtes contenant
des éléments "en ligne".

Après rien ne t'empêche de dire qu'un div deviendra visuellement en
ligne et qu'un span sera un bloc de texte retiré du flux de texte, mais
tu serais un sacré vicieux, quand même...

Suis-je clair ?

Après rien ne t'empêche de dire qu'un div deviendra visuellement en
ligne et qu'un span sera un bloc de texte retiré du flux de texte, mais
tu serais un sacré vicieux, quand même...

Le vice a son charme

Suis-je clair ?

A peu près

Merci