Encooooore un problème de div et height...

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Encooooore un problème de div et height...

kalios

Prout !

Bonjour,

DIV de M... C'est tellement plus simple avec des tables...

J'aimerai faire un caneva en trois parties (gauche, haut, contenu). Le contenu peut être plus ou moins long.

J'ai essayé ceci:

Code :

<!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>
<title>
Test...
</title>
<style type="text/css" media="screen">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
.left
{
position: absolute;
background-color: red;
width: 150px;
height: 100%;
left: 0px;
top: 0px;
}
.top
{
position: absolute;
background-color: green;
top: 0px;
left:150px;
right: 0px;
height: 150px;
}
.variable
{
color: white;
background-color: purple;
}
.contener
{
position: absolute;
background-color: blue;
top: 150px;
left: 150px;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="left">LeftBar!</div>
<div class="top">TopBar!</div>
<div class="contener">
<div class="variable">Variable Box:Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eget orci eu mi interdum sollicitudin. Praesent blandit eros eu lectus. Donec eget turpis. Ut semper dignissim metus. Cras posuere posuere pede. Nullam enim. Etiam non augue. Duis ultrices mattis lectus. Donec sed nulla eget felis viverra luctus. Nunc a ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed congue. Pellentesque libero. Aenean imperdiet imperdiet purus. Donec urna purus, tincidunt nec, dictum ac, condimentum a, nisi. Quisque vestibulum tempus elit. Sed pulvinar. Mauris elementum dui vel quam. Proin diam urna, viverra in, aliquet vel, rutrum eget, massa.</div>
Content...!
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, porttitor bibendum, ullamcorper sed, semper ac, lacus. Proin nisi ligula, fringilla non, ullamcorper eget, vehicula ut, metus. Sed convallis ornare pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed auctor, velit eget adipiscing consequat, lectus libero condimentum est, sed posuere ipsum justo sit amet eros. Quisque non nibh non leo nonummy euismod. In nonummy leo et felis. Nullam pede massa, iaculis luctus, mollis sed, sagittis ut, dui. Aliquam vitae arcu in diam hendrerit euismod. Donec adipiscing tincidunt risus.</p>
</div>
</body>
</html>

Le problème apparaît quand je réduit la taille de la fenêtre. Les ascenseurs apparaissent et lorsque je défile vers le bar, horreur, plus rien ne fonctionne.

Avez-vous une idée lumineuse à proposer?

Publicité

kalios

Prout !

C'est vrai que ce tutorial est super intéressant. J'ai supprimé mes positionnement absolu mais mon problème persiste. Le problème est résolu dans l'exemple d'Alsa avec l'utilisation de "colonnes factices". Dans mon cas, c'est justement un artifice que je souhaite éviter.

Une solution assez élégante est de fixer la propriété

overflow: auto;

au conteneur principal et

overflow: hidden;

pour le body. Le problème est partiellement résolu mais subsiste en si le contenu de la frame de gauche dépasse la hauteur de l'écran...

Disons que j'ai bien avancé en ayant l'impression d'avoir beaucoup reculé...

Voici la nouvelle version:

Code :

<!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>
<title>
Test2...
</title>
<style type="text/css" media="screen">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
overflow: auto;
}
.left
{
float: left;
background-color: red;
width: 150px;
height: 100%;
left: 0px;
top: 0px;
}
.contener
{
background-color: blue;
height: 100%;
top: 0px;
right: 0px;
}
.top
{
background-color: green;
right: 0px;
height: 150px;
}
.variable
{
color: white;
background-color: purple;
}
</style>
</head>
<body>
<div class="left">LeftBar!
<p>LOREM.</p>
<p>LOREM</p>
<p>LOREM</p>
</div>
<div class="contener">
<div class="top">TopBar!</div>
<div class="variable">Variable Box: LOREM</div>
Content...!
<p>LOREM</p>
<p>LOREM</p>
<p>LOREM</p>
<p>LOREM</p>
</div>
</body>
</html>

Je vous propose de remplacer

LOREM

par ce qui suit, cela m'évite de surcharger ce poste innutilement...

Code :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras orci tortor, porttitor bibendum, ullamcorper sed, semper ac, lacus. Proin nisi ligula, fringilla non, ullamcorper eget, vehicula ut, metus. Sed convallis ornare pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed auctor, velit eget adipiscing consequat, lectus libero condimentum est, sed posuere ipsum justo sit amet eros. Quisque non nibh non leo nonummy euismod. In nonummy leo et felis. Nullam pede massa, iaculis luctus, mollis sed, sagittis ut, dui. Aliquam vitae arcu in diam hendrerit euismod. Donec adipiscing tincidunt risus

FORUM HardWare.fr

Programmation

HTML/CSS

Encooooore un problème de div et height...

Sujets relatifs
encodage caractères+problème sécurité	Problème de pointeur objet mère qui pointe sur objet fille
problème de classes qui s'incluent entre elles	Problème bizarre
[URGENT] Probleme de dump mysql	Probleme de connection a une base local via Application
Problème de compatibilité IE et FF ...	[C++]Problème dans mon programme
[resolu(erreur de noob)]Probleme "segment fault"
Plus de sujets relatifs à : Encooooore un problème de div et height...

Page générée en 0.078 secondes