28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement de div

Bonjour à tous,
Je suis débutant en CSS et j'essaye de faire quelque chose qui parrait simple mais ...

Je suis parti d'un modèle trouvé sur le site :


<!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">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
html, body {
width: 100%;
height: 100%;
}
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é */
width: 100%;
height: 100%;
position: absolute;
background-color: #99CC99;
}

.header {
height: 100px;
background-color: #99CCCC;
}
.menu {
position: absolute;
left:0;
width: 150px;
height: 300px;
background-color:#CCCCFF;
}
.frame {
margin-left: 150px;
width: auto;
height: 300px;
background-color:#9999CC;
overflow: auto;
}
p {margin: 0 0 10px 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 <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</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>
		  <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>
</body>
</html>


J'aimerais exactement le même comportement, avec simplement le div "partie frame scrollable" collé au bas de la fenêtre. J'ai testé différentes choses mais j'ai plutôt tendance à saccager la mise en page.
A noter que je veux absolument garder le scoll à l'interieur du div violet et non dans la fenêtre principale.

Quelqu'un a-t-il une solution ?
Merci
Modifié par flzox72 (17 Nov 2008 - 17:07)
Bonjour et bienvenu sur le Forum,

Plutôt que de poster une page et de demander un dépannage, je te conseillerai plutôt de poster une capture d'écran du résultat souhaité.

Il sera alors plus simple de t'orienter sur la marche à suivre. Smiley smile
Voici comment je procèderai pour obtenir le résultat escompté :
- suppression du footer
- rajout d'une div à l'intérieur du menu gauche
- positionnement de cette div en absolu calée en bas de ce dernier (bottom : 0;)

Smiley cligne
Hum, j'avoue ne pas bien comprendre.

- Il n'y a pas de footer (la couleur verte qu'on voit en bas est celle du conteneur principal. le menu gauche et le div "frame" ayant une taille fixée on voit le reste du conteneur).

- J'ajoute cette div comment ? Avant, après la liste ou conteneur de la liste du menu ?

- En fait je vois pas l'impact de ces opérations sur le positionnement du div frame. J'ai fait quelques essais mais ça n'a rien changé.

Qu'est ce que je n'ai pas compris ?
En prenant comme base le modèle 11, et en suivant la procdéure décrite, on aboutit au résultat escompté. Smiley cligne

La div est rajoutée en dessous du menu de préférence.
Ah oui mais le modèle 11 se base sur une largeur fixe. Or je souhaite une largeur ET une hauteur dynamique (qui s'adapte à la taille de la fenêtre). C'est pour ça que je suis plutôt parti sur le modèle 12

Si c'est bien ça que tu proposes :

		<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 class="menugauche2">
			<div>
		</div>




.menugauche2{
position:absolute;
bottom : 0px;
}


ça me donne ça :
upload/18504-CSS.jpg

Ici le div "frame" n'est collé aux bords de la fenetre ni à droite ni en bas.
<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 class="menu_bas">contenu du menu en bas</div>
</div>

.menu_bas{
 position : absolute;
 bottom : 0;
 width : 150px;
 background-color:pink;
}

Enfin du coup, je ne comprends pas :
- ce qui pose problème... Smiley sweatdrop
- le résultat attendu Smiley rolleyes
Ah oui effectivement j'ai pas du bien m'expliquer.
Ce que je souhaite c'est que le div frame suive les redimmentionnement de la fenêtre du navigateur. Dans l'exemple que tu m'as donné sa taille est fixe.
C'est pour ça que je voulait partir du model 12 et m'arranger pour que le div frame de hauteur fixe 300px ait une hauteur automatique, comme sa largeur. Mais mon prb est que le scroll disparait du div frame et passe sur l'ensemble de la fenêtre, comme sur le premier shema que j'ai envoyé.
En effet, voilà qui est plus clair !

La seule solution qui me vient à l'esprit est alors d'exprimer la hauteur de la pseudo-frame et du menu en pourcentage.
Ok, c'est pas rigoureusement ce que je voulais, mais ça ira bien comme ça Smiley cligne

Merci pour ta patience et pour la solution.
Sujet clos
Aller à