Design extensible particulier (Css)
Résolu
Aetiops
-
Aetiops -
Aetiops -
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.
A voir également:
- Design extensible particulier (Css)
- Meilleur site de vente entre particulier - Guide
- Stb refsw design ✓ - Forum Téléviseurs
- Annuaire espagne gratuit particulier ✓ - Forum telephonie fixe
- Signature électronique gratuite pour particulier - Accueil - Confidentialité
- Whatsapp répondre à un message en particulier - Guide
2 réponses
Salut
voila un exemple de 2 colonnes , menu a gauche 200px fixe ,
a droite corps flexible
a+
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+
inutile dans le css du menu !!
mais ce soir je sais pas pourquoi mais je ne peux plus modifier mes message sur le forum ??
donc retire le ;-))