28173 sujets

CSS et mise en forme, CSS3

Scroll vertical en milieu de page

Bonjour,

J'ai deux problèmes actuellement que j'aimerais régler avec l'aide des CSS. Dans un premier temps, je vous montre ma page actuelle.

http://archivesda.free.fr/alsa_forum.png

Mon premier problème est que j'aimerais que les cadres "menu" et "texte" soit collé au cadre sfooter_01 (je donnerais le xHTML et le CSS plus bas), et ce bien sur en longueur minimal.

Mon second problème est la suite logique. J'aimerais qu'un texte plus long entraine un scroll vertical dans la page afin que l'utilisateur voit toujours le header, le sfooter_01 et le sfooter_02. Comme un frames, mais en CSS (il me semble que c'est possible.

Maintenant je poste mon xHTML : 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel='stylesheet' href='style.css' />
<title>Caminel</title>
</head>
<!--[if lte IE 6]>
<style type="text/css">
div#conteneur {
	height: 100%;
}
div#menu {
	height:100%;
}
div#text {
	height:100%;
}
</style>
<![endif]-->
<body>
	<div id='conteneur'>
		<div id='header'>
			header
		</div>
		<div id='middle'>
			<div id='menu'>
				menu
			</div>
			<div id='text'>
				text
			</div>
		</div>
		
		<div id='footer'>
			<div id='sfooter_01'>
				sfooter_01
			</div>
			<div id='sfooter_02'>
				sfooter_02
			</div>
		</div>
	</div>
</body>
</html>


Puis voici mon CSS :
 
body {
	height:100%;
	margin:0;
	padding:0;
	background:beige;
}

div#conteneur {
	position:absolute;
	top:0;
	left:50%;
	width:594px;
	margin-left:-297px;
	min-height:100%;
	border:1px solid black;
}

div#header {
	width:100%;
	height:140px;
	background:green;
}

div#middle {
	width:100%;
	background:white;
	min-height:100%;
}

div#menu {
	width:108px;
	background: #996633;
	border-left:4px solid black;
	float:left;
	min-height:100%;
}

div#text {
	width:482px;
	background:gray;
	float:left;
}

div#sfooter_01 {
	width:100%;
	background:yellow;
	height:66px;
}
div#sfooter_02 {
	width:100%;
	background:maroon;
	height:150px;
}

div#footer {
	width:100%;
	height:216px;
	position: absolute;
	bottom: 0;
	left: 0;
}



Merci d'avance à toutes les informations et l'aide que vous pourrez m'apporter, et je m'excuse d'avance, si j'ai pu omettre certains détails dans mon explication.
Sujet clos
Aller à