Bonjour tout le monde

J'essaye actuellement de mettre en place l'un des tuto du site, celui comportant 2 zones avec possibilité de scrool (ici).

Si j'ai bien compris la partie de gauche reste fixe, et celle de droite peut être scrollée.

Mon soucis est que quand j'intègre ce code à mon CSS, un scrool apparait même si le contenu n'est pas important (donc scrool inutile).

Ce soucis peut il être ocrrigé dans ce cas? Faut il que je me redirige vers un autre tuto?

Merci pour votre aide.
Salut,

Pour voir ce qui ne marche pas comme tu souhaite par rapport au tuto, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum. Smiley cligne
En l'état, j'ai peur qu'il soit difficile de te renseigner.
Oups désolé, je suis encore un petit jeune, j'ai pas acquis toute les subtilités du forum Smiley lol

Alors dans ma page HTML j'ai ceci :

<div id="centre">
		<div id="gauche">
			Menu possible
		</div>
		<div id="droite">
			Texte principal
		</div>
	</div>


Et pour le CSS j'ai ceci :

html, body {
	height:100%;
	width:100%;
	overflow:auto;
}
#centre {
	padding: 2px 0 0 0;
}
#gauche {
	position:absolute;
	width:150px;
	height:100%;
	padding: 0 0 0 2px;
}
#droite {
	height:100%;
	margin-left:155px;
	overflow:auto;
}
Bonjour,

À titre personnel, je déconseille très fortement ce genre de chose. Le seul moyen fiable et posant peu de problèmes d'accessibilité pour réaliser un site avec des parties fixes est d'utiliser position: fixed.

Vu que le positionnement fixe est implémenté par IE7, il devient intéressant de l'utiliser. Pour IE6, on le dégradera en un simple positionnement absolu (c'est à dire que le bloc en question ne sera pas fixe), en adressant un correctif à IE6 et inférieurs via un commentaire conditionnel.

S'il s'agit d'une amélioration ergonomique ou esthétique, le fait de basculer sur un rendu plus classique avec certains vieux navigateurs (IE6 en particulier) ne devrait pas poser de problème. Si c'est par contre une fonctionnalité indispensable (par exemple pour l'interface de tel ou tel outil en ligne), la solution la plus fiable et compatible IE6 reste à mon sens l'utilisation des frames.
Dans ton code source, div#centre n'a pas de hauteur. Du coup, div#gauche et div#droite ont une hauteur égale à 100% de «pas de hauteur déterminée»... ils n'auront donc pas de hauteur déterminée non plus.

Pour donner une hauteur de 100% ou une hauteur minimale de 100% de l'écran à un bloc, il faut que tous les ancêtres de cet élément (y compris body et html) aient une hauteur de 100% (et autant que possible pas de margin, padding ou border, du moins dans le sens de la hauteur).
Ce que je voudrait pouvoir faire en fait c'est avoir la partie de gauche non scrollable (elle aura un contenu suffisemment faible pour ne pas être scrollé), et la partie de gauche scrollable SEULEMENT si le contenu affiché est trop long.
Baldy a écrit :
Ce que je voudrait pouvoir faire en fait c'est avoir la partie de gauche non scrollable (elle aura un contenu suffisemment faible pour ne pas être scrollé), et la partie de gauche scrollable SEULEMENT si le contenu affiché est trop long.

Comme dit ci-dessus, utiliser les frames ou position: fixed. De préférence la seconde solution.
Modifié par Florent V. (25 Apr 2007 - 16:07)
Me revoila avec un nouveau soucis : IE 6 (oui rien d'original).
Mon site d'affiche comme je veux sous Firefox mais evidemment IE fait la gueule. En fait le contenu du DIV droite s'affiche en décalé, comme si le contenu du DIV gauche était au dessus.

Je ne trouve pas de solution pour éviter ça...

Voila le code de la page et du CSS :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Terrains et Villages - le batiment integral</title>
<link rel="stylesheet" type="text/css" href="css/testcss.css" media="screen" />
<link rel="icon" type="image/png" href="favicon.ico" />
	<!-- Javascript Swf Object -->
	<script type="text/javascript" src="flash/js/swfobject.js"></script>
	<!-- Mise en forme CSS -->
	<style type="text/css">
		@import "flash/css/global-flash.css";
	</style>
<SCRIPT LANGUAGE="JavaScript">
function makeArray(n) {
	this.length = n;
	for (var i=1; i<=n; i++) {
		this[i] = ""; 
	}
	return this;
}
var i;
function imagealeatoire() {
	i = Math.floor(2 * Math.random() + 1);
	return image[i];
}
image = new makeArray(2);
image[1]="images/icone1.jpg";
image[2]="images/icone2.jpg";
</SCRIPT>
</head>
<div id="global">
	<div id="header">
		<div id="flashcontent">
			<object data="flash/banniere.swf" type="application/x-shockwave-flash" id="altswf">
				<param name="movie" value="flash/banniere.swf" />
				<param name="quality" value="high" />
				<p id="alternate">
					<span class="title">Flash Player non détecté</span>
					Pour visualiser le contenu de ce site installez la dernière version	du <strong>Flash Player</strong> en cliquant ici :
					<br />
					<a href="http://www.macromedia.com/go/getflash/" title="Télécharger Flash Player"><img src="flash/images/get_flash_player.gif" /></a>
					<br />
					Si cela est deja fait vérifiez dans les options de votre navigateur si il n'est pas désactivé.
					<span class="copyright">© Baldy</span>
				</p>
			</object>
		</div>
		<script type="text/javascript">
		// <![CDATA[
			var so = new SWFObject("flash/banniere.swf", "banniere", "750", "200", "10", "#FFFFFF",true);
			so.addParam("quality", "high");
			so.addParam("menu", "false");
			so.write("flashcontent");
		// ]]>
		</script>
	</div>
	<div id="menu">
		<ul id="liens">
			<li class="lienmenu"><a href="#">Société<span>Présentation de l'entreprise</span></a></li>
			<li class="lienmenu"><a href="#">Activités<span>Nos domaines de compétence</span></a></li>
			<li class="lienmenu"><a href="#">Réalisations<span>Exemples de projets</span></a></li>
			<li class="lienmenu"><a href="#">Moyens<span>Un gage de qualité</span></a></li>
			<li class="lienmenu"><a href="#">Chantiers<span>En cours et à venir</a></span></li>
			<li class="lienmenu"><a href="#">Références<span>Nos partenariats</span></a></li>
			<li class="lienmenu"><a href="#">Contacts<span>Vos possibilités</span></a></li>
			<li class="clr"></li>
		</ul>
	</div>
	<div id="centre">
		<div id="gauche">
			Menu possible<br /><br />
			<center>
				<SCRIPT LANGUAGE="JavaScript">
				document.write("<IMG SRC=" +imagealeatoire() +" WIDTH=140 HEIGHT=200 BORDER=0>");
				</SCRIPT>
			</center>
		</div>
		<div id="droite">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br /><br />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br /><br />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br /><br />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br /><br />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br /><br />
		</div>
	</div>
</div>
<body>
</body>
</html>



html, body {
	height:100%;
	width:100%;
	overflow:auto;
}
body {
	font: 90% "Trebuchet MS", sans-serif;;
	background-image:url(../images/essai.jpg);
	background-repeat: repeat-x repeat-y;
	margin: 0;
	padding: 0;
}
#global {
	width:750px;
	margin: 5px auto 0 auto;
	border: none;
	background-color:#FFFFFF;
}
#header {
	width: 100%;
	height: 210px;
	height: 201px;
	position:relative;
}
#menu {
	width: 100%;
	margin: 0 0 0 0;
	border: none;
}
#liens {
	list-style-type:none;
	margin: 0 auto 0 auto;
	padding: 0;
	width: 707px;
}
li.lienmenu {
	margin-right: 1px;
	float: left;
}
li a {
	display:block;
	padding: 5px;
	width: 90px;
	text-decoration:none;
	color:#FFFFFF;
	text-align:center;
	background-color:#006633;
}
.lienmenu a:hover {
	background-color:#00CC00;
}
li a span {
	display:none;
}
li a:hover span {
	font-size: 9px;
/*	clear:both;*/
	display:block;
	margin-top:5px;
	position:absolute;
	margin-left:10px;
	background-color: #009966;
	padding:3px;
	white-space: nowrap;
	border:1px dotted #996699;
	cursor:pointer;
}
.clr {
	clear:both;
}
#centre {
	padding: 2px 0 0 0;
	background: url(../images/fond_centre.jpg) repeat-y;
}
#gauche {
	position:fixed;
	width:150px;
	height:100%;
	padding: 0 0 0 2px;
}
#droite {
	height:100%;
	margin-left:155px;
	overflow:auto;
}
[/i][/i]