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

Encooooore un problème de div et height... - HTML/CSS - Programmation

Marsh Posté le 24-03-2008 à 10:06:12    

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 :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <title>
  6.             Test...
  7.         </title> 
  8.         <style type="text/css" media="screen">
  9.             html, body
  10.             {
  11.                 margin: 0px;
  12.                 padding: 0px;
  13.                 height: 100%;
  14.             }
  16.             .left
  17.             {
  18.                 position: absolute;
  19.                 background-color: red;
  20.                 width: 150px;
  21.                 height: 100%;                 
  22.                 left: 0px;
  23.                 top: 0px;
  24.             }
  26.             .top
  27.             {
  28.                 position: absolute;
  29.                 background-color: green;
  30.                 top: 0px;
  31.                 left:150px;
  32.                 right: 0px;
  33.                 height: 150px; 
  34.             }
  36.             .variable
  37.             {
  38.                 color: white;
  39.                 background-color: purple;
  40.             }
  42.             .contener
  43.             {
  44.                 position: absolute;
  45.                 background-color: blue;
  46.                 top: 150px;
  47.                 left: 150px;
  48.                 right: 0px;
  49.                 bottom: 0px;
  50.             }
  52.         </style>
  53.     </head>
  54.     <body> 
  55.         <div class="left">LeftBar!</div>
  56.         <div class="top">TopBar!</div>
  57.         <div class="contener">
  58.             <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>
  59.             Content...!
  60.             <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>
  61.         </div>
  62.     </body>
  63. </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?

Reply

Marsh Posté le 24-03-2008 à 10:06:12   

Reply

Marsh Posté le 24-03-2008 à 19:43:55    

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 :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <title>
  6.             Test2...
  7.         </title> 
  8.         <style type="text/css" media="screen">
  9.             html, body
  10.             {
  11.                 margin: 0px;
  12.                 padding: 0px;
  13.                 height: 100%;
  14.                 overflow: auto;
  15.             }
  17.             .left
  18.             {
  19.                 float: left;
  20.                 background-color: red;
  21.                 width: 150px;
  22.                 height: 100%;
  23.                 left: 0px;
  24.                 top: 0px;
  25.             }
  27.             .contener
  28.             {
  29.                 background-color: blue; 
  30.                 height: 100%;
  31.                 top: 0px;
  32.                 right: 0px;
  33.             }
  35.             .top
  36.             {
  37.                 background-color: green;             
  38.                 right: 0px;
  39.                 height: 150px; 
  40.             }
  42.             .variable
  43.             {
  44.                 color: white;
  45.                 background-color: purple;
  46.             }
  48.         </style>
  49.     </head>
  50.     <body> 
  51.         <div class="left">LeftBar!
  52.        
  53.             <p>LOREM.</p>
  54.             <p>LOREM</p>
  55.             <p>LOREM</p>       
  56.         </div>
  57.         <div class="contener">
  58.            <div class="top">TopBar!</div>
  59.            <div class="variable">Variable Box: LOREM</div>
  60.             Content...!
  61.             <p>LOREM</p>
  62.             <p>LOREM</p>           
  63.             <p>LOREM</p>
  64.             <p>LOREM</p>           
  65.         </div>
  66.     </body>
  67. </html>


 
Je vous propose de remplacer

LOREM

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

Code :
  1. 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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed