✔ [Css-Layout] 100% mit 10px Rand

Status
Nicht offen für weitere Antworten.
Danielku15

Danielku15

Erfahrenes Mitglied
Hallo Leute.

Ich sitze seit einer Ewigkeit an diesem Problem: Ich versuche ein CSS-Layout zu gestalten welches so aussieht:
http://www.homepage-hilfe.de/site.png

Wie üblich ist es das Problem mit 100% Höhe. Die komplette Höhe bis zum Rand wäre ja kein Problem. Jedoch will ich einen 10px Rand auf allen Seiten lassen bevor das Design beginnt.

Hier die Abmessungen der Seite die ich versuche hinzubekommen:

Site:
  • 10px Rahmen um das ganze Layout
Banner:
  • 100px Hoch,
  • 100% Breite mit 10px Rand links und rechts
Menü:
  • Direkt unter Banner,
  • 200px Breite,
  • Höhe bis zum Footer
Content:
  • An Banner und Menü anliegend,
  • Breite 100% mit 10px Rand rechts
  • Höhe bis zum Footer
Footer:
  • 10px vom unteren Rand
  • 100% Breite mit 10px Rand links und rechts
Sollte der Inhalt im Content - Div größer werden als die Höhe des Bildschirminhalts, möchte ich, dass der Footer nach unten geschoben wird und sich das Menü der Höhe anpasst.
Ich hab schon alles mögliche probiert aber nicht hinbekommen. Mit floaten, absolut positionieren, viele verschachtelte Container,...

Ich hoffe ihr könnt mir helfen das hinzubekommen.

gruß Daniel
 
  • CSS-Modell mit 100%-Höhe und umlaufenden Abstand
    danielku hat gesagt.:
    [...] Die komplette Höhe bis zum Rand wäre ja kein Problem. Jedoch will ich einen 10px Rand auf allen Seiten lassen bevor das Design beginnt. [...]
    Zum Vergrößern anklicken....
CSS: 
html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
padding: 10px;
}

div.box {
margin: 0;
height: 100%;
border: 1px solid #dfdfdf;
}
Das DIV.box besitzt einen umlaufenden 10px-Abstand zum Browserfensterrand, jedoch muß das Fenster um den oberen und unteren Innenabstand (2 * 10px = 20px) nach unten gescrollt werden, damit der untere Elementrahmen im Viewport erscheint.



  • CSS-Modell mit gleichen Spaltenhöhen
    danielku hat gesagt.:
    [...] möchte ich, dass der Footer nach unten geschoben wird und sich das Menü der Höhe anpasst. [...]
    Zum Vergrößern anklicken....
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}

body {
padding: 10px;
}

div.wrapper {
border: 1px solid #dfdfdf;
margin: 0;
padding: 0;
}

div.outer {
border-left: 200px solid #f7f7f7;
}

div.inner {
width: 100%;
}

div.header {
height: 100px;
border-bottom: 1px solid #dfdfdf;
}

div.content {
border-left: 1px solid #dfdfdf;
margin: 0;
padding: 0;
}

div.menu {
float: left;
width: 200px;
margin-left: -200px;
position: relative;
z-index: 10;
}

div.clear
{
clear: left;
height: 0;
line-height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

div.footer
{
border-top:1px solid #dfdfdf;
}

div.header p, div.menu p, div.content p, div.footer p
{
margin: 0;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="header"><p>header</p></div>

     <div class="outer">
     <div class="inner">
          <div class="menu">
               <p>menu</p>
          </div>

          <div class="content">
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <!--<p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>
               <p>content</p>-->
          </div>

          <div class="clear">&nbsp;</div>
     </div>
     </div>

     <div class="footer"><p>footer</p></div>
</div>

</body>
</html>
In diesem CSS-Modell passen sich die Spalten .menu und .content der jeweils benachbarten Spaltenhöhe an.



  • Eine Verknüpfung der beiden vorgestellten CSS-Techniken führt in den modernen Browsern (Firefox, Mozilla, Netscape, Opera) zu einem Darstellungsproblem (= der Footer wird um die Header-Höhe aus der Box nach unten gedrückt), für das ich (noch) keine Korrekturmöglichkeit herausgefunden / entdeckt habe.

    Anmerkung: die Höhe eines Elements ergibt sich eigentlich durch den Elementinhalt.
 
Hi Michael.
Genau Punkt3 ist eben auch mein Problem. Entweder ist die Seite 100% bis zum Rand oder der Footer rutscht 10px unter den Seiteninhalt und löst eine scrollbare Seite aus.

Meine Idee nun wäre folgende:
Ich erstelle noch einmal einen Container der 100% der Seite ausfüllt und setze ein 10px padding. Dann Setze ich das Modell mit selber Spaltenhöhe in diesen Container und lasse mal die Höhe auf 100% setzen. Theoretisch müsste dann das 10px Padding im Seitencontainer den Abstand zum Seitenende um 10px verkürzen.

Wünscht mir Glück. ;)

[Edit]
Hat nicht funktioniert. Das 10px Padding in den Containern sprengt alle übergeordnete Container mit. Das Experiment dauert an.

gruß daniel
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück