Hannes : Layoutproblem - min-height, aber komplette Seite ausfüllen

SELF-Forum

Layoutproblem - min-height, aber komplette Seite ausfüllen

Hannes
– Informationen zu den Bewertungsregeln

Hi zusammen,

ich steh grad voll auf dem Schlauch und bekomm das nicht hin. Ich habe folgendes Problem. Ich möchte eine Webseite in 4 gleich große Teile einteilen mit einem Balken in der Mitte. Dies habe ich auch so geschafft, aber jetzt kann ich das Fenster zusammenschieben und es verhaut mein Layout. Ich hab das schon mit min-height probiert, aber das will nicht wie ich. Es soll hat immer die gesamte Seite ausgefüllt sein bis zu einer Mindestgröße bei der das Layout nicht mehr verkleinert wird und man scrollen muss.

Desweiteren möchte ich in die Teile Inhalte setzen die jeweils zur Mitte ausgerichtet sind und sich mitbewegen. Ich hatte da mal was drin, aber es blieb fix.

Kann mir vielleicht jemand helfen ? Das wäre wirklich super...

Vielen Dank,
Hannes

Hier der Source Code (HTML / CSS):

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="sheet/style.css"/>
</head>
<body>
 <div class="oben">
  <div class="links">
   Links
  </div>
  <div class="rechts">
   RECHTS
  </div>
 </div>

<div class="mitte">
 MITTE
 </div>

<div class="unten">
  <div class="links">
   LINKS
  </div>
  <div class="rechts">
   RECHTS
  </div>
 </div>
</body>
</html>

*********************************************

/* CSS Document */
html, body {
 background-color: #FFFFFF;
 margin:0 0 0 0;
 padding:0;
 text-align: center;
 font-family:helvetica, sans-serif;
 height:100%;
 }
/*PAGE LAYOUT*/
.oben {
 height:47%;
 }

.oben .links {
 background-color: #FFFFFF;
 float:left;
 width:50%;
 min-height:200px;
 }

.oben .rechts {
 background-color: #C8E7FF;
 float:right;
 width:50%;
 height:100%;

}

.mitte {
 background-color: #85A9BA;
 color: #FFFFFF;
 height:12px;
 padding:10px;
 }

.unten {
 height:50%;
 }

.unten .links {
 float:left;
 background-color: #D6D6D6;
 width:50%;
 height:100%;
 }

.unten .rechts {
 background-color: #FFFFFF;
 float:right
 height:100%;
 }

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Layoutproblem - min-height, aber komplette Seite ausfüllen

    Hannes
    – Informationen zu den Bewertungsregeln

    Hier die richtige css... jetzt gibt es keine Überlappung, aber es schiebt sich zu weit zusammen.

    /* CSS Document */
    html, body {
     background-color: #FFFFFF;
     margin:0 0 0 0;
     padding:0;
     text-align: center;
     font-family:helvetica, sans-serif;
     height:100%;
     }
    /*PAGE LAYOUT*/
    .oben {
     height:47%;
     }

    .oben .links {
     background-color: #FFFFFF;
     float:left;
     width:50%;
     height:100%;
     }

    .oben .rechts {
     background-color: #C8E7FF;
     float:right;
     width:50%;
     height:100%;

    }

    .mitte {
     background-color: #85A9BA;
     color: #FFFFFF;
     height:12px;
     padding:10px;
     }

    .unten {
     height:50%;
     }

    .unten .links {
     float:left;
     background-color: #D6D6D6;
     width:50%;
     height:100%;
     }

    .unten .rechts {
     background-color: #FFFFFF;
     float:right
     height:100%;
     }

    /*ELEMENTS*/

    #logo {
     position:relative;
     float:right;
     padding-top:220px;
     padding-right:10px;
     }

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln