Median: Wie folgende Seitenstruktur realisieren?

Guten Tag,

ich habe vor, für eine Webseite folgende Struktur zu verwenden:

http://taize-forum.de/uni/konzept.GIF

Grundsätzlich scheint mir das mit den SELFHTML-Inhalten machbar.
nur weiß ich nicht, wie ich die Mindesthöhe der 3 Boxen unter der Logo Box hinbekomme. Je nach Umfang des Inhalts soll die Höhe nach unten hin ja offen sein, jedoch auch eine Mindesthöhe bei wenig Inhalt besitzen.

Wie kann ich das umsetzen?

(Der iframe wird wohl auch noch durch eine Box ersetzt)

Gruß
Median

  1. Hallo,

    Ich habe mir ein paar Minuten Zeit genommen und ein Layout gebastelt, wie du es haben möchtest (die Größenangaben kannst du entfernen, wenn du Inhalt eingebaut hast, sie sind nur da, damit man das Layout sieht - genauso wie die Farbangaben).
    HTML:

      
    <?xml version="1.0" encoding="utf-8" ?>  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    <html>  
     <head>  
      <title>Layout</title>  
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
      <link rel="stylesheet" type="text/css" href="style.css" />  
     </head>  
     <body>  
      <div id="container">  
       <div id="header">  
        <div class="iframe"></div>  
       </div>  
       <div id="content">  
        <div class="navi"></div>  
        <div class="info"></div>  
        <div class="main_content">  
         <p>Lorem ipsum dolor sit amet, turpis lorem nec sapien, pellentesque fusce ipsum, maxime a sociosqu, sem eros feugiat pede tempor. Eget ultrices soluta nibh, hac dapibus posuere arcu amet. At praesent amet, augue quam lobortis, bibendum sed nec sit non, torquent risus dolor, nostra nibh massa mauris justo. Et blandit. In vitae habitasse nunc tincidunt massa erat, felis felis laoreet, dolor praesent tincidunt dolor morbi, nunc vivamus felis at nibh. Fusce sit. Amet nullam viverra commodo sagittis, dictum quisque, dictum augue per tortor, cum turpis, magna tempus tincidunt sollicitudin lorem. Sit nam, gravida nisl ex elit morbi, in aspernatur massa faucibus suspendisse consequat dui. Ultricies cursus, feugiat vel sit vel sed in, mauris massa in augue feugiat. Nam lectus dolor vulputate sollicitudin nec nulla....</p>  
        </div>  
       </div>  
      </div>  
     </body>  
    </html>  
    
    

    CSS:

     * {  
      margin: 0;  
      padding: 0;  
    }  
    body {  
      background: lightgray;  
      text-align: center;  
      width: 100%;  
      font-size: 100.1%;  
    }  
    div#container {  
      width: 800px;  
      text-align: left;  
      background: white;  
      min-height: 500px;  
      margin: auto;  
    }  
    div#header {  
      height: 120px;  
      width: 100%;  
      background: green;  
    }  
    div.navi {  
      float: left;  
      width: 8em;  
      background: yellow;  
      height: 10em;  
    }  
    div.main_content {  
      margin-left: 8.2em;  
    }  
    div.info {  
      background: red;  
      width: 6em;  
      height: 15em;  
      float: right;  
    }
    

    Viel Erfolg mit deiner Website,
    Willi

    --
    Mein SelfCode: ie:{ fl:| br:> va:) ls:? fo:| rl:? n4:? ss:| de:> js:| ch:? sh:( mo:? zu:}
    1. Vielen Dank für Deine Mühe, das komplette Paket hätte ich jetzt garnicht erwartet :-)

      Mir als Anfänger mit nicht so viel Freizeit hilft es auf jeden Fall, mich mit dem Theam zu beschäftigen, nachvollziehen am Exempel und etwas fertiges abändern.

      Frohe Festtage
      Median