bonjour à tous 
Voilà, ce que je cherche à faire me semblait pourtant simple, mais faut croire que je ne suis pas doué
. J'ai trouvé plusieurs tutoriaux, mais à chaque fois ça ne correspond pas à ce que je veux...
Cliquez ici pour voir la page concernée.
Ce que je voudrais, c'est que le menu et la partie à droite soient fixes (ce qui est déjà le cas) et que la page, au centre en orange, occupe TOUT l'espace restant, et, enfin, que lorsqu'une personne a un écran un peu plus petit, la partie à droite (en rouge) ne parte pas en-dessous de la page mais reste à droite, quitte à ce qu'on ne la voit pas entièrement...
J'ai souvent bloqué sur ce problème, souvent grugé pour m'en sortir, mais j'aimerais bien avoir une solution correcte... je m'en remets donc à vous
Voilà les codes utilisés :
La page :
Et le CSS :
En vous remerciant par avance
Voilà, ce que je cherche à faire me semblait pourtant simple, mais faut croire que je ne suis pas doué
. J'ai trouvé plusieurs tutoriaux, mais à chaque fois ça ne correspond pas à ce que je veux... Cliquez ici pour voir la page concernée.
Ce que je voudrais, c'est que le menu et la partie à droite soient fixes (ce qui est déjà le cas) et que la page, au centre en orange, occupe TOUT l'espace restant, et, enfin, que lorsqu'une personne a un écran un peu plus petit, la partie à droite (en rouge) ne parte pas en-dessous de la page mais reste à droite, quitte à ce qu'on ne la voit pas entièrement...
J'ai souvent bloqué sur ce problème, souvent grugé pour m'en sortir, mais j'aimerais bien avoir une solution correcte... je m'en remets donc à vous
Voilà les codes utilisés :
La page :
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<head>
<body>
<!-- debut conteneur -->
<div id="conteneur">
<div id="menu">
<ul>
<li>Shopping</li>
<li>Santé / Bien être</li>
<li>Education</li>
<li>Sorties</li>
<ul class="secondaire">
<li>Truc</li>
<li>Chose</li>
</ul>
<li>Loisirs / Sports</li>
<li> Etc... </li>
</ul>
<br>Le menu fait 255 px de largeur.
</div>
<div id="page">
<p>La largeur de la page se redimensionne en fonction de l'écran.</p>
</div>
<div id="droite">
<img src="agendas.jpg"></img>
<p>Ce bloc fait 300 px de largeur.</p>
</div>
<!-- fin conteneur -->
</div>
</body>
</html>
Et le CSS :
html,body { margin:0;padding:0;}
p {margin:0;padding:0;}
h1,h2,h3,h4 {margin:0;padding:0;}
a img {border:none;}
/* ############################ CONTENEUR GENERAL #################################### */
#conteneur{}
/* ######################## MENU ######################## */
#menu {width:255px;background:#eee;float:left;font-family:Arial,Verdana;font-size:13px;}
#menu li {list-style-image: url(puce1.gif);}
#menu .secondaire li {list-style-image: url(puce2.gif);}
/* ######################## PAGE ######################## */
#page {width:auto;float:left;background:orange;}
/* ######################## DROITE ######################## */
#droite{width:300px;float:right;background:red;text-align:center;}
En vous remerciant par avance