Design extensible particulier (Css)
Résolu
Bonjour,
je rencontre un problème dans le développement de mon site web.
J'aimerais créer un site web avec un menu sur la gauche a valeur fixe. (ex : 200px;) et j'aimerais que le corps soit à la droite de ce menu mais que celui si soit avec une valeur extensible pour qu'il s'adapte a l'écran. En résumé, quand par exemple on diminue la fenêtre, le menu conserve sa taille mais le contenu rétrécit et prend en permanence la totalité restante de la page web.
Quelqu'un a une idée ?
merci d'avance
Cordialement, Lilian.
Ps : "Wikipédia" et "Le site du zéro" utilisent cette méthode.
je rencontre un problème dans le développement de mon site web.
J'aimerais créer un site web avec un menu sur la gauche a valeur fixe. (ex : 200px;) et j'aimerais que le corps soit à la droite de ce menu mais que celui si soit avec une valeur extensible pour qu'il s'adapte a l'écran. En résumé, quand par exemple on diminue la fenêtre, le menu conserve sa taille mais le contenu rétrécit et prend en permanence la totalité restante de la page web.
Quelqu'un a une idée ?
merci d'avance
Cordialement, Lilian.
Ps : "Wikipédia" et "Le site du zéro" utilisent cette méthode.
2 réponses
-
Excellent !! ça marche, je connaissais pas la balise overflow, très pratique !!
Merci beaucoup ;)
Bonne soirée. -
ContributeurSalut
voila un exemple de 2 colonnes , menu a gauche 200px fixe ,
a droite corps flexible<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> RAD ZONE Webcreation </title> <meta http-equiv="corps-type" corps="text/html; charset=utf-8" /> <style type="text/css" media="screen"> /*<![CDATA[*/ html{ padding:0px; margin:0px; } body{ background:#e1ddd9; font:12px Verdana,Arial,SunSans-Regular,Sans-Serif; color:#564b47; padding:0px 20px; margin:0px; } p,pre,h2{ padding:10px; margin:0px; } h2{ font-size:14px; padding-top:10px; text-transform:uppercase; color:#564b47; background:transparent; } #menu pre,#menu pre,#menu h2{ color:#D7FFFF; } pre{ color:#564b47; font:11px Courier,Monaco,Monospace; background:transparent; } #menu{ position:absolute; width:200px; left:20px; background:#808080; margin:0px; } #corps{ margin-left:200px; background:#DEEBED; overflow:auto; } /*]]>*/ </style> </head> <body> <div id="menu"> <h2> Menu </h2> <pre> #menu{ position:absolute; width:200px; left:20px; background-color:#gray; color: padding:0px; margin:0px; } </pre> </div> <div id="corps"> <h2> Corps </h2> <pre> html{ padding:0px; margin:0px; } body{ background-color:#e1ddd9; font-size:12px; font-family:Verdana,Arial,SunSans-Regular,Sans-Serif; color:#564b47; padding:0px 20px; margin:0px; } #corps{ margin-left:200px; background-color:#DEEBED; overflow:auto; } </pre> </div> </body> </html>
a+
