28221 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis en train de créer un site et j'aimerai avoir quelque conseils pratiques pour faire ma mise en page en CSS.
En effet, j'aimerai pouvoir effectuer ma mise en page comme sur l'image jointe.

upload/363-CSSbesoin.jpg

Je m'explique un peu (c'est pas évident Smiley cligne ), il y a plusieurs zone dans mon site :

En haut l'en-tête fixe en hauteur mais étirable en largeur.
Le menu à gauche : fixe en largeur mais étirable en longueur.
Le contenu (blanc à droite) : Etirable en hauteur et prend le reste de la page moins le menu, il prend en fait la totatilité de la page.
Le bas de page : hauteur fixe et étirable en largeur.

J'espère que vous avez compris ce que je voulais essayer de faire.

J'ai bien sûr attaquer ma feuille de style mais dès que je définie des zones en 100% j'obtiens un page bien plus grande que l'affichage du navigateur alors que le contenu lui n'es pas plus grand.

Merci d'avance

TD
salut,

j'ai plus ou moins cherché à faire la même chose, en fait reproduire ce que je faisais en utilisant des tableaux pour la mise en page, et à en croire les différents intervenants lu ici et là, y'a pas franchement de solutions standards pour faire çà...

Maintenant je m'exprimais peut-être mal...

je vais suivre ton post avec intérêt .... Smiley smile
Tu as raison, C'est comme si on faisait un tableau en 100% pour prendre toute la page en hauteur et en largeur.

J'ai l'impression que les CSS ne gère pas super bien les 100%. Smiley biggrin
Perso je vois pas où est la difficulté : un "faux column" de Dan cederholm et menu gauche en float et un footer en clear: left;
Avant de manier les tutos que l'on trouve sur Alsacréations, sur A List Apart, et autres il me semble utile de bien saisir les bases du positionnement grâce aux css, des adresses moins "tuto" sont également disponibles sur Openweb:
http://openweb.eu.org/articles/initiation_flux/
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/

Par le même auteur (Laurent Denis) que ces initiations aux différents positionnements on lira avec utilité cette solution différente du faux column en particulier pour les hauteurs de colonnes et qui me parait allez dans le bon sens, puisque permettant de trouver des solutions en css à des problèmes qui font parfois échouer au début dans la pratique du positionnement et de la mise en écran css:
Des colonnes de même hauteur en css
Modifié le 15 Nov 2004 - 22:03