Jump to content
Sign in to follow this  
Ernestine

Héritage class

Recommended Posts

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

Edited by Ernestine

Share this post


Link to post
Share on other 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 { ... }

@++

Share this post


Link to post
Share on other sites

Merci !

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

A bientôt,

Ernestine

Share this post


Link to post
Share on other sites

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

article => aleter => alerte

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

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

Share this post


Link to post
Share on other 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

Edited by Ernestine

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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...

Edited by Ernestine

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...