28221 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai créé une page simple structurée en 3 zones:
zone1 : bandeau sur toute la largeur de la page en haut avec height: 8%;
zone2 : idem juste dessous mais avec height: 4%;
zone3 : le reste du bas de la page scrollable.

Question :
Si je mets height: 88%; pour le bas de page, ce qui paraît logique car 8+4+88=100%, le scroll complètement à droite fait disparaître une partie de mon bandeau supérieur, quand on scrolle.
Par contre si je mets height: 82%; c'est mieux car le haut de page reste bien fixe.
Où sont passés les 6% manquants ? (8+4+82=94%)
Je cherche à comprendre. Si quelqu'un peut m'éclairer ?
Modifié le 26 Jan 2005 - 14:04
J'ai mis des margin: 0; pour body,conteneur (en gros, c'est la même chose que body, c'est peut-être inutile) et pour les 3 zones citées plus haut.

Le résultat est le même :
height: 88%; la moitié du bandeau supérieur disparaît,
height: 85%; environ le 1/4 s'évanouit
height: 83%; le bandeau bouge légèrement
et à 82%; c'est bon.

Est-ce que margin: 0; supprime toutes les marges ou faut-il aussi inclure des margin-top et bottom ?

Il y a aussi qq chose qui me paraît bizarre :
Les 2 bandeaux ont apparemment la même hauteur, alors que le 1er est dimensionné height à 8% et l'autre à 4%, n'est-ce pas à cet endroit qu'il pourrait y avoir un problème ?
Je reviens pour apporter une précision supplémentaire,

En fait, pour height: 83%; j'ai 2 barres de scroll accolées à droite de l'écran, celle complètement à l'extérieur sur la hauteur de la totalité de la fenêtre et l'autre correspond à la zone3.
Et pour height: 82%; il ne reste qu'une barre de scroll correspondant à la zone3.
Bonjour,
Mea culpa !!
Dans le conteneur qui correspond en fait à body,
j'avais tapé :
height: 100% et omis le POINT VIRGULE !!
grave erreur, voilà qui remet les points sur les virgules,
(et non pas comme on le dit toujours "les points sur les i" !!)

En tout cas, un grand bravo pour votre site qui est une véritable mine de trésors, auquel je vais me référer très souvent, je le pense.

PS:comment fait-on pour noter [résolu] ?
Administrateur
iakkhos a écrit :

PS:comment fait-on pour noter [résolu] ?

Sur ton premier message, tu as bien deux boutons en haut à droite (un bouton "citer" et un bouton "éditer")
Il te suffit d'éditer, puis de rajouter [Résolu] dans ton titre Smiley smile
Bonne continuation ici Smiley cligne
iakkhos a écrit :

Mea culpa !!
Dans le conteneur qui correspond en fait à body,
j'avais tapé :
height: 100% et omis le POINT VIRGULE !!

Au risque de me répéter :

Un petit détour par Le service de validation CSS du W3C t'aurait sans doute renseigné sur la nature du problème. C'est important de valider son travail régulièrement pour éviter ce genre d'erreur. Smiley cligne On peut valider un fichier local par téléchargement du fichier vers le serveur.