Bonjour,
J'ai bien le résultat attendu pour le header et la colonne gauche mais pas pour la droite comme vous pourrez constater en allant voir:
www.brionne-jeunesse.com/0_test/index.php
Le fauille de style:
Cordialement
Modifié par cpalo (18 Feb 2009 - 19:03)
J'ai bien le résultat attendu pour le header et la colonne gauche mais pas pour la droite comme vous pourrez constater en allant voir:
www.brionne-jeunesse.com/0_test/index.php
!-- Commentaire cachant la DTD stricte au yeux de IE, pour permettre au hack "fixed" de fonctionner -->
<!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" lang="fr">
<head>
<title>Le Service Jeunesse, Sport,Culture, Base de Loisirs et Informatique de la Ville de Brionne</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="fr" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" contents="index, follow, noarchive" />
<link rel="stylesheet" href="design/index.css" type="text/css" />
</head>
<body>
<div id="entete">
<div id="banniere">
ZONE FIGEE EN HAUT DE L'ECRAN hauteur fixe: 150px
</div>
<div id="enteteliens">
<a href="...">Accueil</a>
<a href="...">Produits</a>
<a href="...">Catalogue</a>
<a href="...">Forum</a>
<a href="...">Contacts</a>
</div>
<!--Fin du div "entete"-->
</div>
<div id="gauche">
ZONE FIGEE A GAUCHE DE L'ECRAN
<p>Menu gauche de largeur fixe : 200px</p>
<ul class="menugauche">
<li><a href="index.php?page=accueil">Accueil du site</a></li>
<li><a href="index.php?page=presentation">Présentation</a></li>
<li><a href="index.php?page=suite">Suite</a></li>
<li><a href="index.php?page=fin">Dernière page</a></li>
</ul>
<!--Fin du div "gauche"-->
</div>
<div id="droite">
<h2>ZONE QUI DEVRAIT RESTER FIGEE à L'ECRAN</h2>
<!--Fin du div "droite"-->
</div>
<div id="contenu">
<!-- début de l'apparition à l'écran du texte -->
<h3>partie "frame" scrollable </h3>
<?php
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page'];
switch($page)
{
case 'accueil': include ('./contenu/accueil.inc');break;
case 'presentation': include ('./contenu/01_menu.inc');break;
case 'suite':include ('./contenu/02_menu.inc');break;
case 'fin':include ('./contenu/03_menu.inc');break;
}
?>
<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><a href="aide.html">Pour des compléments</a></p>
<p><br />
</p>
<!-- fin de l'apparition à l'écran du texte -->
<!--Fin du div "contenu"-->
</div>
<div class="footer">Footer du site</div>
</body>
</html>
Le fauille de style:
*=======================*/
/* Mise en forme du body */
/*=======================*/
body {
overflow-y: hidden;
margin: 162px 205px 0% 205px ;
padding:0;
}
html > body {overflow-y: auto}
/*============================================*/
/* ID(#) - Mise en forme de la page en DIV - */
/*============================================*/
#contenu {
height: 100%;
overflow: auto
}
#entete {
position: absolute;
top: 0;
left: 0;
width: 110%;
height: 160px;
background-color:#AFB7D3;
border-bottom: solid black 1px ;
text-align:center
}
#banniere {
height: 132px;
width: 100%:
float: left;
margin-left: 3px;
border: 0;
background-image: url(banniere.jpg);
background-repeat: no-repeat;
}
#enteteliens {
}
#gauche {
position: absolute;
top: 160px;
left: 0;
margin-left: 0px;
width: 200px;
height: 100%;
background-color:#FFF7D3;
border-right: solid black 1px}
#droite {
position: absolute;
top: 160px;
right: 0;
margin-right: 0px;
width: 200px;
height: 100%;
background-color:#AFf7D4;
border-right: solid black 1px}
body>#entete {position:fixed}
body>#gauche {position:fixed}
/*=====================================*/
/* CLASS - Mise en forme du Menu gauche - */
/*=====================================*/
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
/*=====================================*/
/* CLASS - Mise en forme des textes - */
/*=====================================*/
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align:justify;
color: #556074;
}
/* Titre */
.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px; color: #ff7800;
font-weight: bold;
border-bottom:#ffc20a dashed 1px;
}
/* Autre textes */
.texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align:justify;
color: #556074;
}
Cordialement
Modifié par cpalo (18 Feb 2009 - 19:03)