Aller au contenu

Héritage class


Ernestine

Sujets conseillés

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é par Ernestine
Lien vers le commentaire
Partager sur d’autres sites

.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 { ... }

@++

Lien vers le commentaire
Partager sur d’autres sites

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é par Ernestine
Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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é par Ernestine
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...