28221 sujets

CSS et mise en forme, CSS3

[Résolu] Configuration conteneur et body SVP ?

Bonjour à tous,

Par soucis de clarté de mon script, je me pose la question suivante: Est-il nécessaire de répèter la définition de couleur (
background-color:#88b9de;
) et la définition d'alignement du texte (
text-align: left;
) dans ".conteneur" élément parent et "body" élément enfant ?

Exemple:
.conteneur { /* définition du bloc conteneur (parent du bloc body) */
[#]background-color:#88b9de;
margin-left: auto;
margin-right: auto;
width: 995px; /* largeur obligatoire pour être centré */
[#]text-align: left; /* on rétablit l'alignement normal du texte */
}

body { /* définition du bloc body (enfantt du bloc conteneur) */
[#]background-color:#88b9de;
margin: 0px;/* sans marges, la page sera collée aux bords */
[#]text-align: left; /* on rétablit l'alignement normal du texte */
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 12px; /* on définit la taille de police de base dans la page */
}

[#]Ce code ne suffirait-il pas ?:

.conteneur { /* définition du bloc conteneur (parent du bloc body) */
[#]background-color:#88b9de;
margin-left: auto;
margin-right: auto;
width: 995px; /* largeur obligatoire pour être centré */
[#]text-align: left; /* on rétablit l'alignement normal du texte */
}

body { /* définition du bloc body (enfantt du bloc conteneur) */
margin: 0px;/* sans marges, la page sera collée aux bords */
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 12px; /* on définit la taille de police de base dans la page */

Merci de vos éclaicissements. Smiley smile Smiley biggrin
Modifié le 25 Nov 2004 - 12:26
Administrateur
a écrit :
(parent du bloc body)

Salut,
Euh y'a comme un problème : le seul parent possible de <body> est la balise <html> Smiley confus
Tu ne peux pas mettre un autre bloc qui contiendrait le body. A quoi ressemble ton code HTML ?

Sinon pour répondre à la question :
- la couleur de fond ne s'hérite pas
- l'alignement du texte s'hérite (donc inutile de le répéter aux descendants)
Bonjour ATLONIA

Pourquoi mets-tu body dans un conteneur ???
on va voir ce que disent les pros, mais je ne suis pas certain que ce soit correct.

... et conteneur dans body prendrait en héritage les définitions de body.
Pardon Raphael,

J'ai oublié de préciser qu'il s'agissait d' morceau de ma feuille de style externe "style.css". Quand à mon centrage, je suis effectivement au courant, étant en 1024 je lui ai donné les dimentions en pixels pour ne pas avoir la barre de défilement en bas d'écran.

Dominique,

C'est body qui est dans conteneur dans mon exemple, je pensait donc qu'il en était enfant, et que par consèquent il en prendrait l'héritage, mais peut-être que je fait fausse route. Un peut d'éclaicissement me ferait du bien.
Raphael a écrit :
le seul parent possible de <body> est la balise <html> Smiley confus
Tu ne peux pas mettre un autre bloc qui contiendrait le body.


L'erreur est sans doute là. Essayqe simplement avec qqch comme
XHTML
...
<html>
    <body>
        <div id="content">
            ...
        </div>
    </body>
</html>


Ca devrait donner de meilleurs résultats.

Pour l'héritage, text-align s'herite donc bien (pas besoin de le spécifier à chaque fois), alors que background-color non.
Modifié le 25 Nov 2004 - 12:05
- Ce qu'a voulu dire Raphaël, c'est que, si ton site doit être accessible à tous, il faut qu'il soit affichable dans une configuration 800x600, sinon les internautes dans cette configuration verront une barre de défilement horizontale, ce qui est très désagréable pour la visite du site.

- Ce qu'on te disait au dessus, c'est que body doit obligatoirement être avant conteneur, c'est body qui doit contenir le conteneur et pas l'inverse Smiley cligne
Modifié le 25 Nov 2004 - 12:08
OK Dominique,

Je vais rectifier, mais dois-je quand même répéter mes définitions de couleur et d'alignement, ou simplement les spécifier dans "conteneur" ou "body", si oui à quel endroit ?

Merci.
Raphael a écrit :
Sinon pour répondre à la question :
- la couleur de fond ne s'hérite pas
- l'alignement du texte s'hérite (donc inutile de le répéter aux descendants)

Myself a écrit :
Pour l'héritage, text-align s'herite donc bien (pas besoin de le spécifier à chaque fois), alors que background-color non.


Donc, si l'alignement de texte s'hérite, il n'est pas utile de le repeter dans ton CSS. avec le code que je donnais en exemple, la propriété text-align du body s'appliquera aussi au div.content.
A contrario, background-color ne s'hérite pas pourrait devoir être repetée... quoique... Si je ne me trompe pas, le background-color par défaut est transparent, donc si body et div.content sont supposés avoir la même couleur, ben le résultat sera le même.
Modifié le 25 Nov 2004 - 12:23
Un autre détail, si je peux me permettre, tu déclares une "font" en taille fixe, les mal-voyants ne pourront pas utiliser l'option d'agrandissement des textes sur ton site Smiley cligne
Sujet clos
Aller à