28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Je voudrais faire une mise en page css comme dans l'image de preview


Avec comme particularité:

header: Collé en haut width:100%
footer: Collé en bas width:100%

menu: width: minimale(idéalement) ou 200px
Hauteur: ecran - (footer + header)


contenu: width: maximum;
hauteur: comme le menu
overflow: scroll

J'arrive a un resultat correct en utilisant du javascipt, mais je suis sur qu'il existe un moyen de le faire en css...

Merci d'avance Smiley biggrin upload/10016-css.GIF
Modifié par vincedev (18 Dec 2006 - 09:25)
Bonjour vincedev et bienvenue parmi nous, Smiley smile

Tu trouveras ton bonheur dans les gabarits de mise en page css, proposés sur ce site et qui offrent une structure de base solide pour débuter.

Celui conviendrait pour une largeur fixe, celui-là pour une largeur fluide, c'est à dire adaptable à la résolution du visiteur.

Tu trouveras sur ce site une multitude de ressources que je te conseille de découvrir avant de te lancer. Le forum te permettra ensuite de poser des questions sur des problèmes de compréhension ou d'adaptation particulière.

Bonne continuation.
Smiley biggrin
Merci Vero pour ta repponse aussi rapide, en fait j'ai déjà fait le tour des gabarits proposé ici, et mon probleme n'est pas tellement la largeur mais la hauteur du menu et du contenu que je voudrait fluide... et je n'ai rien trouvé (ici ou ailleurs) pour definir une hauteur qui s'adapte à la taille du navigateur...
vincedev a écrit :
Merci Vero pour ta repponse aussi rapide, en fait j'ai déjà fait le tour des gabarits proposé ici, et mon probleme n'est pas tellement la largeur mais la hauteur du menu et du contenu que je voudrait fluide... et je n'ai rien trouvé (ici ou ailleurs) pour definir une hauteur qui s'adapte à la taille du navigateur...

Tu peux utiliser la méthode des colonnes factices.
Il est beaucoup plus difficile de fixer des hauteurs, effectivement, ou plus exactement, le web n'est pas un média paginé.
La hauteur des éléments s'adaptera à leur contenu et une scrollbar verticale permettra de lire l'ensemble de la page.

Ensuite, il y a des astuces pour fixer le pied de page en bas de l'écran, pour avoir un élément qui prend toute la hauteur , etc.

Aussi, je te conseille de partir des gabarits proposés puis de les modifier en fonction de ton objectif.

En cas de difficultés, il serait plus simple que tu mettes en ligne la page qui te pose soucis.
Smiley cligne
Modifié par Vero (18 Dec 2006 - 10:44)
a écrit :
Par contre, si tu voulais un en-tête et un pied de page toujours visibles, c'est une autre paire de manches (et, à dire vrai, il n'y a pas de solution miracle pour ce cas de figure).


Domage, c'est ce genre de chose que je voulais... je crois bien que je suis obligé de mettre un peu de JS la-dedans, en tout cas merci à tous de votre aide. Ce forum est tres réactif c'est cool Smiley biggrin
Modifié par vincedev (22 Dec 2006 - 08:42)