28173 sujets

CSS et mise en forme, CSS3

Page redimensionnable mais pas les blocs autour...

bonjour à tous Smiley smile

Voilà, ce que je cherche à faire me semblait pourtant simple, mais faut croire que je ne suis pas doué Smiley decu . J'ai trouvé plusieurs tutoriaux, mais à chaque fois ça ne correspond pas à ce que je veux... Smiley decu

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 Smiley cligne

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 Smiley smile
Bonjour Clemdups,

Le problème vient du fait que tes trois blocs sont flottants et en largeur fixe. Or, les flottants passent à la ligne dès qu'ils n'ont plus l'espace nécessaire en largeur pour se loger.

Une solution pour ton problème consisterait à avoir une partie centrale non flottante, comme sur l'exemple suivant : page fluide avec trois colonnes.
Merci bien !
C'est pas tout à fait exactement ce que je voulais, mais c'est très bien quand même Smiley smile
Encore merci !
Sujet clos
Aller à