Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 12.01.2007, 00:27
altes-kind altes-kind ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2006
Beiträge: 15
altes-kind befindet sich auf einem aufstrebenden Ast
Standard Dynamische Layout Breite und Höhe

Hallo,

ich habe folgendes "Konzept" für ein Layout (am besten in eine leere HTML-Datei kopieren - dann ist mein Problem besser verständlich):

Code:
<html>
 <head>
  <title>Layout</title>
  <style>
   #frame {
        margin-top: 20px;
        text-align: center;
        width: 740px;
   }
   #headerLeft {
        border: 1px #000000 solid;
        float: left;
        width: 348px;
   } 
   #headerMiddle {
        border: 1px #000000 solid;
        float: left;
        width: 38px;
   }
   #headerRight {
        border: 1px #000000 solid;
        float: left;
        width: 348px;
        clear: right;
   }
   #contentLeft {
        border: 1px #000000 solid;
        float: left;
        width: 18px;
        height: 300px;
   } 
   #contentMiddle {
        border: 1px #000000 solid;
        float: left;
        width: 698px;
        height: 300px;
   }
   #contentRight {
        border: 1px #000000 solid;
        float: left;
        width: 18px;
        height: 300px;
        clear: right;
   }
   #footerLeft {
        border: 1px #000000 solid;
        float: left;
        width: 348px;
   } 
   #footerMiddle {
        border: 1px #000000 solid;
        float: left;
        width: 38px;
   }
   #footerRight {
        border: 1px #000000 solid;
        float: left;
        width: 348px;
        clear: right;
   }
  </style>
 </head>

 <body>
  <div id="frame">
   <div id="headerLeft">1</div>
   <div id="headerMiddle">2</div>
   <div id="headerRight">3</div>
   <div id="contentLeft">4</div>
   <div id="contentMiddle">5</div>
   <div id="contentRight">6</div>
   <div id="footerLeft">7</div>
   <div id="footerMiddle">8</div>
   <div id="footerRight">9</div>
  </div>
 </body>
</html>
Soweit sogut - nur möchte ich dem Layout allerdings noch eine dynamische Breite und Höhe geben.

Beispiel:
Bereich 5 (contentMiddle) ist der Bereich in dem später der Inhalt der Seite stehen soll. Grundsätzlich soll das Layout 740 Pixel breit sein - wenn in diesem Bereich Nr. 5 aber nun z.B. ein großes Bild eingefügt wird soll sich das Layout automatisch an dessen Größe anpassen.
- Wenn das Bild breiter ist sollen die Bereiche 2 (headerMiddle), 5 (contentMiddle) und 8 (footerMiddle) breiter werden - alle anderen Bereiche sollen allerdings die gleiche Breite behalten.
- Wenn das Bild höher wird soll sich nur Bereich 4 (contentLeft), 5 (contentMiddle) und 6 (contentRight) anpassen.

Wie muss ich das Layout ändern dass die bestimmten Bereiche dynamisch die Größe verändern können, andere Bereich allerdings _immer_ die selber Größe behalten?

Vielen Dank im voraus,

altes-kind
Mit Zitat antworten
Sponsored Links