Héritage class

[Ernestine]

Bonjour,

Il y a un truc que je n'arrive pas à faire. Je définis par exemple une classe article dans laquelle je vais définir toutes les propriétés de texte, un truc dans ce genre-là :

.article {
font-size: 12px;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
}

Pour l'utiliser dans une page web, je n'aurai qu'à faire :

<span class="article">Mon texte</span>

Mais maintenant, imaginons que je veuille une classe ayant exactement les mêmes propriétés, mais dont la couleur du texte soit rouge. Je vais bien sûr utiliser l'héritage :

.article .rouge {
color: red;
}

(Arrêtez moi si je me trompe)

Mais maintenant, comment je fais pour appliquer la classe rouge à une balise span

Merci de votre aide,

Ernestine

Modifié 11 Décembre 2004 par Ernestine

[ElMoustiko]

.alerte rouge => ça ne correspond à rien. (tu as édité entre temps )

rouge n'est pas une balise

tu peux faire ceci par contre :

.aleter, .rouge

avec class="rouge"

Mais bon il faut aussi savoir que c'est pas tellement conseillé de nommer les class/id par leur mise en forme (rouge) mais mieux vaut pas leur fonction (important).

Sinon un truc sûrement mieux, c'est de définir 2 class pour ton élément.

<element class="alerte rouge">

Ainsi ton élément aura la class alerte ET la class rouge

Ensuite dans tes styles :

.alerte { ... }
.rouge { ... }

@++

[Ernestine]

Merci !

Je ne savais pas qu'on pouvait définir deux classes pour un élément

A bientôt,

Ernestine

[ElMoustiko]

Fiiiou je devais être complétement à la ramasse moi :

article => aleter => alerte

*ahem*... en plus la double class, ça donne "alerte rouge"

Enfin, j'ai pas dis de con***rie donc tout va bien

[Ernestine]

Ce n'est aps grave

J'ai une nouvelle énigme, qui je pense est plus difficile que la première. Voici la page qui présente une version simplifiée du problème : http://www.blog-ernestine.net/extras/css/liens.html

Deux div, un bleu à gauche et un gris à droite. Le but est que les deux div descendent jusqu'en bas. Or vous le constatez : le div gris ne descend pas jusqu'en bas. Sa hauteur est égale à celle de l'écran, il est incapable de s'allonger d'avantage.

J'ai pourtant fixé sa propriété height à 100%...

Voici la feuille :

html, body {
	padding: 0px;
	margin: 0px;

	}

.principal {
	width: 489px;	
	float:left;
	background-color:#3399FF;
}

.menu {
	margin-left:489px;
	height: 100%;
	background-color:#8F8F81;
}

Merci,

Ernestine

Modifié 11 Décembre 2004 par Ernestine

[Perrine]

Coucou Ernestine,

Chez moi, le div gris prend bien toute la hauteur du navigateur. Le div bleu, quant à lui, prend la hauteur nécessaire pour afficher tout le texte et laisse ensuite un espace blanc.

J'utilise FF et suis en 1600x1200

[Jan]

Azon,

Avec une résolution plus faible, le div gris prend toute la hauteur de l'écran, mais le bleu la dépasse. Le gris descend donc moins bas que le bleu.

Je crois comprendre que le but d'Ernestine serait de faire 2 div de la même hauteur, quelle que soit la résolution d'écran.

[Ernestine]

Salut Azon,

Sans doute parce que ton écran est plus grand que le mien, ou que tu utilises une résolution supérieure.

J'ai rajouté des lignes dans le div bleu, cette fois-ci quel que soit ton écran, tu dois voir que le gris ne descend pas jusqu'en bas.

Ernestine

[Perrine]

Ok

Et pourquoi ne pas mettre le background de la page en gris ? C'est pas très moral comme solution, je ne sais pas ce que tu veux faire après

Sinon, je crois me souvenir avoir lu quelque chose à ce sujet sur alsa ... je suis en train de chercher.

[ElMoustiko]

Qu'est ce que tu veux au final ? 2 colones de même hauteur ?

Si tel est le cas, voici la solution :

http://www.alistapart.com/articles/fauxcolumns/

@++

[Perrine]

J'ai trouvé ça : Height

[Ernestine]

Merci à vous deux,

Cependant, ça ne résoud pas le problème. L'article sur alsa parle des problèmes de height. Et celui de alistapart c'est quand même pas mal du bricolage... utiliser une image de fond pour simuler deux colonnes... Cet article expose bien le problème, mais ce n'est pas une solution envisageable.

C'est quand même bizarre, il doit bien exister une solution...

Modifié 11 Décembre 2004 par Ernestine

[ElMoustiko]

Wé, la solution c'est celle là ! C'est la seule qui fonctionne partout.

Sinon tu as la technique à base de display: table-cell mais qui ne fonctionne pas sous IE.

Certe c'est un peu bidouille, mais ça reste honnete comme méthode, j'ai vu pire comme bidouille, d'autant qu'en général, avec les design des pages, on a souvent besoin d'une image de fond.

[Sylvain Trovalet]

http://blog-and-blues.org/weblog/2004/09/2...hauteurs-en-css

[ElMoustiko]

_AT_Sylvain, cette technique ne fonctionne pas sous IE, et franchement, la dégradation acceptable, n'est pas vraiment acceptable...