Retour à Forum de site web

DIV placement

  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de l’utilisateur
  • Inscription: Juil 18, 2008
  • Messages: 239
  • Loc: Western Australia
  • Status: Offline

Message Janvier 28th, 2009, 3:16 am

Code: [ Select ]
_____________
|            |
|   Div 1    |
|            |
|____________|
|____Div 2___|
  1. _____________
  2. |            |
  3. |   Div 1    |
  4. |            |
  5. |____________|
  6. |____Div 2___|


Im essayant de faire ce qui précède. Div 2 est seulement une zone de texte, deux personnages de haut. Je veux que la div haut en y descend, et le débordement.


Code: [ Select ]
.div1 {
    height:80%;
    overflow: auto;
}
.div2 {

}
  1. .div1 {
  2.     height:80%;
  3.     overflow: auto;
  4. }
  5. .div2 {
  7. }


Mais je veux vraiment quelque chose comme la hauteur msgarea = hauteur de la fenêtre - 100px. Est-ce possible?
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Janvier 28th, 2009, 3:16 am

  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de l’utilisateur
  • Inscription: Juil 18, 2008
  • Messages: 239
  • Loc: Western Australia
  • Status: Offline

Message Janvier 28th, 2009, 3:26 am

Div 2 est maintenant fixé et assis au fond bien, mais je ne peux pas obtenir div 1 à y adhérer.

Code: [ Select ]
#maintext { border: 0; background-color:#EEEEEE; padding-bottom:70px;}
#footer { position: fixed; clear: both; width: 100%; height: 70px; bottom: 0; border: 0; background-color: #e9e9e2; }
  1. #maintext { border: 0; background-color:#EEEEEE; padding-bottom:70px;}
  2. #footer { position: fixed; clear: both; width: 100%; height: 70px; bottom: 0; border: 0; background-color: #e9e9e2; }
  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de l’utilisateur
  • Inscription: Juil 18, 2008
  • Messages: 239
  • Loc: Western Australia
  • Status: Offline

Message Janvier 28th, 2009, 4:04 am

Je ne pense pas que j'ai été très clair avant - voir l'exemple ci-dessous pic.

Image
  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de l’utilisateur
  • Inscription: Juil 18, 2008
  • Messages: 239
  • Loc: Western Australia
  • Status: Offline

Message Janvier 28th, 2009, 4:21 am

Ive a obtenu cela, mais its a bit dodgy.

Code: [ Select ]
#maintext {position: fixed; clear: both; width:auto; background-color:#EEEEEE; top: 50px; bottom: 70px; overflow:auto; left: 0px; right: 4px; padding-left:5px}
#footer {position: fixed; clear: both; width: 100%; height: 70px; bottom: 0; border: 0; background-color: #e9e9e2; left: 0; padding-left: 5px}
  1. #maintext {position: fixed; clear: both; width:auto; background-color:#EEEEEE; top: 50px; bottom: 70px; overflow:auto; left: 0px; right: 4px; padding-left:5px}
  2. #footer {position: fixed; clear: both; width: 100%; height: 70px; bottom: 0; border: 0; background-color: #e9e9e2; left: 0; padding-left: 5px}
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Janvier 28th, 2009, 8:54 pm

Que diriez-vous le code suivant?
HTML Code: [ Select ]
<!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" lang="en" xml:lang="en">
   <head>
      <title>
         Test Document
      </title>
      <style type="text/css">
         * {
            margin: 0;
            padding: 0;
         }
 
         #header {
            position: fixed;
            width: 100%;
            height: 10%;
            background-color: #cecece;
         }
 
         #content {
            position: fixed;
            overflow: scroll;
            width: 100%;
            height: 80%;
            top: 10%;
            bottom: 10%;
         }
 
         #footer {
            position: fixed;
            bottom: 0px;
            width: 100%;
            height: 10%;
            background-color: #cecece;
         }
      </style>
   </head>
   <body>
      <div id="header">
         <p>Header</p>
      </div>
      <div id="content">
         <p>Content</p>
      </div>
      <div id="footer">
         <p>Footer</p>
      </div>
   </body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  4.    <head>
  5.       <title>
  6.          Test Document
  7.       </title>
  8.       <style type="text/css">
  9.          * {
  10.             margin: 0;
  11.             padding: 0;
  12.          }
  13.  
  14.          #header {
  15.             position: fixed;
  16.             width: 100%;
  17.             height: 10%;
  18.             background-color: #cecece;
  19.          }
  20.  
  21.          #content {
  22.             position: fixed;
  23.             overflow: scroll;
  24.             width: 100%;
  25.             height: 80%;
  26.             top: 10%;
  27.             bottom: 10%;
  28.          }
  29.  
  30.          #footer {
  31.             position: fixed;
  32.             bottom: 0px;
  33.             width: 100%;
  34.             height: 10%;
  35.             background-color: #cecece;
  36.          }
  37.       </style>
  38.    </head>
  39.    <body>
  40.       <div id="header">
  41.          <p>Header</p>
  42.       </div>
  43.       <div id="content">
  44.          <p>Content</p>
  45.       </div>
  46.       <div id="footer">
  47.          <p>Footer</p>
  48.       </div>
  49.    </body>
  50. </html>
Fonctionne parfaitement pour moi. J'ai vérifié dans Firefox 2 et MSIE 7...fonctionne parfaitement. La façon dont je l'ai fait, son fluide ainsi.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de l’utilisateur
  • Inscription: Juil 18, 2008
  • Messages: 239
  • Loc: Western Australia
  • Status: Offline

Message Janvier 29th, 2009, 12:40 am

Ayant quelques problèmes avec cette - voir la solution à mon http://www.uwadb.com/chat/

Toujours dans IE6 (qui Im crains que mon uni utilise dans quelques laboratoires d'informatique), le fond div ne restera pas au fond. Toute IE6 pour fixer les pieds de page?

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 6 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 149 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC