yop,
j'ai un petit souci avec ce que je suis en train de faire : j'ai repris un des exemples du dessus et j'essaie de rajouter une marge de 20px sur le côté droit, juste après le scroll mais la cellule ne se met pas où il le faudrait
voici le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>4 zones avec scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #fff; /*couleur de fond blanche*/
}
.conteneur { /*le conteneur global du site, qui sera centré */
position: relative;
width: 800px;
margin: 0 auto;
}
.header {
height: 180px;
background-color: #99CCCC;
}
.menu {
position: absolute;
left:0;
width: 200px;
height: 400px;
background-color:#CCCCFF;
}
.frame {
margin-left: 200px;
width: 580px;
height: 400px;
background-color:#9999CC;
overflow: auto;
}
.marge {
margin-left: 780px;
width: 20px;
height: 400px;
background-color:#00FF33;
}
.footer {
height: 20px;
background-color: #99CC99;
}
p {
margin: 0 0 5px 0;
}
.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;
}
-->
</style>
</head>
<body>
<div class="conteneur">
<div class="header">contenu du header de taille fixe : 750px</a>
</div>
<div class="menu"><p>menu gauche de largeur fixe : 150px</p>
<ul class="menugauche">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
</ul>
</div>
<div class="frame">
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
<p>partie "frame" scrollable </p>
</div>
<div class="marge">x </div>
<div class="footer">contenu du footer de taille fixe :
750px </div>
</div>
</body>
</html>
pour avoir ce que j'ai à la base, il faut supprimer la partie .marge, mettre 600 au lieu de 580 dans la partie frame, et virer la ligne div class= marge.
une idée de comment résoudre ça ?
de plus, je voudrais mettre des images survolées dans le menu à la place du texte. Est-ce que je dois mettre un tableau dans cette cellule pour y arriver ?
Merci d'avance
---------------
sauvez un arbre, mangez un castor...