Bonjour,
j'ai utilisé differentes solutions sur ce forum et j'ai toujours le meme problème
Je souhaite avoir un header demeurant fixe ( banniere et liens ) en ayant le contenu qui soit scrollable, donnant l'impression d'une frame.
Cela fonctionne jusqu'au moment où j'arrive à la fin du contenu scrollable et là le header se déplace vers le haut.
et la feuille de style
le div id conteneur c'est parce que j'avais essayé au épart avec un conteneur englobant tout
Merci de m'apporter une piste pour régler ce pb sur lequel j'avoue buter
j'ai utilisé differentes solutions sur ce forum et j'ai toujours le meme problème
Je souhaite avoir un header demeurant fixe ( banniere et liens ) en ayant le contenu qui soit scrollable, donnant l'impression d'une frame.
Cela fonctionne jusqu'au moment où j'arrive à la fin du contenu scrollable et là le header se déplace vers le haut.
<!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>Page avec entete fixe</title>
<link href="./design/entexte_fixe.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="entete">Placez ici le contenu de id "entete"
<div id="entetebanniere">
<img src="images/logo.jpg" class="logo" alt="logo" />
<h1>Bienvennue sur notre site</h1>
</div>
<div class="enteteliens">
<a href="...">Accueil</a>
<a href="...">Produits</a>
<a href="...">Catalogue</a>
<a href="...">Forum</a>
<a href="...">Contacts</a></div>
</div>
<div id="frame">Placez ici le contenu de id "frame"
<div id="menu">Placez ici le contenu de id "menu" <br></br>recherche et menu scrollable en même temps que la partie contenu</div>
<div id="contenu">Placez ici le contenu scrollable de id "contenu"
<h1>Mon site web</h1>
<h2>Comment je l'ai construit en CSS et sans tableaux</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc velit. Suspendisse pellentesque laoreet neque. Donec id mauris. Morbi neque odio, lobortis at, sagittis tincidunt, congue in, nulla. Suspendisse non leo. Nunc nisl. Nulla sit amet mauris eu odio dignissim ornare. Nam vulputate lectus suscipit nulla. Etiam urna ipsum, molestie ut, fermentum in, faucibus vel, nulla. Nam varius, purus vitae posuere elementum, purus erat dapibus turpis, quis imperdiet felis lacus a est. Pellentesque sed nibh. Sed pede est, mattis nec, laoreet eu, bibendum ac, ipsum. Donec nonummy, mauris vel dignissim imperdiet, est pede tincidunt felis, ut facilisis odio ipsum tincidunt urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ut nunc. Quisque volutpat facilisis nisi. Vestibulum sodales, diam vel aliquet lobortis, lorem nulla ullamcorper arcu, in ultrices nibh enim nec augue. Nunc sit amet justo. Proin nec erat sit amet velit porta tristique.
</p>
<p>Suspendisse non orci. Vestibulum cursus quam a felis. In fermentum turpis non felis. Proin nonummy sodales pede. Nulla quis nunc. Proin venenatis velit a dui. Ut faucibus rhoncus nulla. Morbi pulvinar elit a erat. In porttitor, turpis vitae molestie pulvinar, diam mi egestas libero, ut vestibulum magna dui ut felis. Sed erat nisl, sollicitudin sed, tincidunt et, lacinia ut, velit. Aliquam accumsan.
</p>
<p>Aenean sem risus, molestie nec, fermentum et, lacinia sit amet, erat. Nam condimentum elit ut nibh. Nullam mollis, elit at ultricies pharetra, nisi elit pretium neque, ac cursus purus enim non urna. Nam aliquam orci vitae sapien dignissim cursus. Integer sed leo. Integer odio tortor, fermentum tincidunt, volutpat vel, pharetra ut, dolor. Aliquam interdum. Mauris lorem. Praesent vitae nisl a felis aliquam porttitor. Nunc mattis fringilla pede. Praesent ac urna. Pellentesque mattis bibendum mi. Sed molestie venenatis erat. Duis dapibus. Vestibulum varius mollis sem. Nulla nec tellus ac sapien varius mattis. Phasellus mollis diam in nibh.
</p>
<p>Morbi laoreet ultrices tellus. Praesent quis nunc sit amet diam congue sodales. Nunc ante velit, egestas eu, lobortis nec, dapibus a, odio. Praesent non sapien. Suspendisse cursus, est ac varius tincidunt, erat ipsum pulvinar erat, et accumsan lectus purus et nunc. Suspendisse potenti. Proin odio enim, sagittis a, egestas eget, rutrum in, quam. Nullam in massa eget tellus tincidunt volutpat. Donec aliquet molestie diam. Suspendisse luctus pede ac nisl. Mauris purus lorem, ornare in, imperdiet eget, lobortis quis, urna. Praesent ultrices erat sed velit. Aliquam laoreet, nibh quis ultricies porttitor, dui quam ultrices risus, et eleifend ligula turpis et elit. Integer est.
</p>
<p>Praesent ipsum metus, vehicula ut, bibendum id, accumsan quis, ligula. Phasellus ante lorem, rhoncus in, vulputate nec, ultrices a, purus. Sed sit amet diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse tincidunt cursus orci. Sed condimentum, massa non vulputate imperdiet, nulla justo scelerisque nulla, sit amet congue felis ante id ante. Proin lobortis tellus vitae dolor. Sed elit ipsum, pretium vitae, tempor iaculis, pellentesque et, lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean et ante. Vestibulum dui diam, ullamcorper faucibus, pretium ac, condimentum sed, nisl. In ut sapien. Quisque convallis ante quis sem. Fusce quam arcu, ullamcorper nec, rhoncus ac, rhoncus sed, pede. Vestibulum in tellus in nibh rhoncus gravida. Quisque condimentum vulputate urna. In aliquet lacus ultrices purus. Pellentesque semper nunc ut mi. Suspendisse potenti. Pellentesque massa justo, scelerisque vitae, ultrices a, luctus sit amet, velit.
</p>
<p>Vivamus odio. Cras eu quam. Praesent mattis, est quis suscipit sollicitudin, nisi nulla adipiscing sapien, non aliquet neque purus a est. Etiam quis diam blandit magna sagittis sollicitudin. Aliquam erat volutpat. Donec quis justo. Phasellus eleifend accumsan enim. Fusce neque elit, imperdiet ac, fermentum et, aliquam sit amet, leo. Nulla placerat diam sed urna. Cras nulla. Integer gravida condimentum urna. Quisque tristique bibendum lectus. Nullam mollis, mauris eu lacinia sagittis, velit tellus ultricies nulla, non pulvinar erat urna vel nibh. Maecenas libero. Etiam sapien risus, lacinia et, vulputate vel, gravida eget, magna. Suspendisse potenti. Nunc elementum. Cras mattis molestie turpis.
</p>
<p>Sed id ipsum ut mi fringilla tempor. In pharetra risus vel mi. Etiam congue, nulla vel tincidunt bibendum, tellus ante congue mauris, sit amet vulputate tortor augue vitae ligula. Suspendisse potenti. Pellentesque ut arcu eget nibh aliquet fringilla. In hac habitasse platea dictumst. Suspendisse viverra. Sed nisi. Phasellus venenatis. Nulla iaculis quam a diam. Duis tempor justo eu orci. Nullam in est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in felis. Aenean iaculis mollis est. Nunc quis nibh. Nam arcu ante, lacinia ut, nonummy euismod, gravida in, urna. Curabitur ante magna, suscipit ac, convallis cursus, hendrerit quis, pede.
</p>
<p>Mauris magna nisi, venenatis eu, cursus id, fringilla sit amet, massa. Suspendisse non lectus id augue semper interdum. Sed semper. Aliquam sit amet sapien. Vivamus eget mauris. In ut dui. Cras vel lacus non tortor tristique porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris nonummy consequat nulla. Nam sit amet arcu. Mauris nec tortor vel dolor rhoncus egestas.
</p>
<p>partie "frame" scrollable </p>
</div>
</div>
</body>
</html>
et la feuille de style
body {
margin: 0;
background-color: #FFF; /*couleur de fond blanche*/
text-align: center; /*pour corriger le bug de centrage IE*/
}
#conteneur {
/*le conteneur global du site qui sera centré*/
width: 770px;
margin-right: auto;
margin-left: auto;
text-align: left; /* on rétablit l'alignement du texte*/
}
#entete {
float: left;
width: 100%;
height: 100px;
background-color: #9C9;
}
#frame {
float: left;
width: 100%;
height: 500px;
background-color: #FFC;
overflow:auto;
}
#menu {
float: left;
width: 200px;
height: 500px;
background-color: #99FF99;
}
#contenu {
margin-left: 200px;
}
le div id conteneur c'est parce que j'avais essayé au épart avec un conteneur englobant tout
Merci de m'apporter une piste pour régler ce pb sur lequel j'avoue buter