Spezielles Box-Modell (parents haben alle 100%)

[waXve]

Guten Tag zusammen,
Wie der Titel schon sagt, habe ich ein recht spezielles box modell, und vielleicht kann man das auch besser machen. Ich bin für jede idee offen.

Zu meinem Problem:
In der Angehängte Bilddatei sieht man den Momentanen aufbau meiner Seite. Dazu muss ich sagen, dass der Große Rote kasten (der links un rechts von den grauen eingefasst wird) der Container ist, in dem die eigendliche internetseite angezeigt wird. Die hintergrundfarbe von dem container soll rot sein und der von dem inhalt beige. (man sieht also, wenn der container zu klein ist). Der Footer hat ebenfals einen roten hintergrund, genauso wie die beiden boxen oben links und oben rechts. In dem Textheader ist ein Bild mit einem Text und in dem image header ist ein breiter bild banner.

Das Problem ist jetzt, dass wenn ich dem der Box in der der Inhalt hineinsoll position: absolute; und height: 100%; mitgebe, dass dann die Box nach unten unter den footer hinausragt, und zwar um das stück, was oben von den headern in anspruch genommen wird.

Ich hoffe, ihr habt mein Problem verstanden:

mfg waXve

CSS Code:

html,body 
{
    font-family: Helvetica, Verdana, sans-serif;
    font-size: 100.1%;
    line-height: 1.6em;
    background-color: silver;
    color: black;
    height: 100%;
    margin: 0;
    padding: 0;
}

#container    /* der große rote container */
{
    min-height: 100%;
    padding:0;
    margin: 0px 5em;
    background-color: #990000;
}

#textheader  /* der kleine grüne container oben */
{
    margin: 0px 10.4em;
    background-color: beige;
}

#imageheader  /* der kleine rote header */
{
    margin: 0px;
}

#linksoben      /* die kleine box oben links*/
{
    margin: 0px;
    float: left;
    width: 10em;
    
    text-align: center;
}

#rechtsoben   /* die kleine box oben rechts*/
{
    margin: 0px;
    float: right;
    width: 10.6em;
    
    text-align: center;
}

#navigation   /* die blaue navigationsleiste links */
{
    margin: 0px;
    float: left;
    width: 10em;
    display: block;
    text-align: left;
      text-decoration: none;
      color: silver;
      padding: 0px 0px 0px 0.4em;
}

#rightbox   /* die rechte blaue info leiste */
{
    margin: 0px;
    float: right;
    height: 5em;
    width: 10em;
    color: silver;
    padding: 0px 0px 0px 0.4em;
}

#main            /* Der teil, in den der Inhalt geschrieben werden soll */
{
    margin: 0px 10em;
    background-color: beige;
    background-image: url(inhalt/bilder/background.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 60%;
    background-color: beige;
       padding: 0.7em;
       text-align: justify;
       overflow: auto;
       height: 51.2em;
}

#footer            /* der footer */
{
       text-align: center;
       color: silver;
       font-size: 80%;
       clear: both;
       
       position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    bottom:0;
    
    margin: -10px 6.2em 0px 6.3em;
    
    
    background-color: #990000;
}

und hier der HTML Code (inherhalb des bodys):

<div id="container">
     <div id="linksoben">
     </div>
     <div id="rechtsoben">
     </div>
     <div id="textheader">
          <img src="./inhalt/bilder/textheader.png" alt="textheader" width="100%">
     </div>
     <div id="imageheader">
           <img src="./inhalt/bilder/imageheader.png" alt="Bildbanner" width="100%">
      </div>
      <div id="navigation">
      </div>
      <div id="rightbox">
             rightbox
      </div>
      <div id="main">
             Hier steht ein beliebig langer Text
      </div>
       </div>
       <br style="clear:both;height:0;font-size:0;line-height:0;margin:0;padding:0">
       <div id="footer">
       </div>
</div> <!-- hier geht der container wieder zu -->

 

[mschoening]

Hi,
es fehlt die Bilddatei und wenn ich ehrlich bin habe ich kein einziges Wort deiner Erklärung verstanden. Wenn du mir ein Screenshot des Mockup postest wird es vielleicht deutlicher was du möchtest.

LG,
Max

 

[waXve]

Ich habe jetzt mal position: absolute; und min-height: 100%; gemacht, und das ist das Ergebnis. Ich hoffe es wird jetzt deutlicher

 

[Macropolis]

Schau Dir z.B. mal YAML an - ist zwar ein bisschen Einarbeitung notwendig, aber damit solltest Du Dein Modell stressfrei umsetzen können.

HTH,
Macropolis

 

[waXve]

Danke für die idee. Ich werde mir das bei gelegenheit mal genauer anschauen. Allerdings drängt die Zeit etwas, so dass ich jetzt ein Statisches Layout benutze (ist zwar nicht ganz so schön, erfüllt aber seinen Zweck)

mfg

waXve