tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
3315
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 01.04.06 21:58 #1
    Avatar von Danielku15
    Danielku15 Danielku15 ist offline Mitglied Platin
    Registriert seit
    Feb 2004
    Ort
    Österreich
    Beiträge
    731
    Blog-Einträge
    3
    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
     
  2. 02.04.06 09:07 #2
    Maik Tutorials.de Gastzugang
    1. CSS-Modell mit 100%-Höhe und umlaufenden Abstand
      Zitat Zitat von danielku

      [...] 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. [...]
      Code css:
      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

      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.


    2. CSS-Modell mit gleichen Spaltenhöhen
      Zitat Zitat von danielku

      [...] möchte ich, dass der Footer nach unten geschoben wird und sich das Menü der Höhe anpasst. [...]
      HTML-Code:
      <!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.


    3. 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.
     
  3. 02.04.06 18:53 #3
    Avatar von Danielku15
    Danielku15 Danielku15 ist offline Mitglied Platin
    Registriert seit
    Feb 2004
    Ort
    Österreich
    Beiträge
    731
    Blog-Einträge
    3
    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
    Geändert von Danielku15 (02.04.06 um 19:32 Uhr)
     
« Abstand zwischen zwei Absätzen | Anzeigefehler »

Ähnliche Themen

  1. Rand bei Layout null
    Von schlseb im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 2
    Letzter Beitrag: 26.06.09, 18:19
  2. Div bzw td reagiert nicht auf height:10px;
    Von Nord-Süd-Richtung im Forum CSS
    Antworten: 7
    Letzter Beitrag: 27.08.08, 15:36
  3. Ebene 10px hoch anstatt 1px
    Von Kopfballstar im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 17.05.06, 11:06
  4. Linker Rand (5px); ist bei IE 10px, bei FX 5px
    Von exitboy im Forum CSS
    Antworten: 6
    Letzter Beitrag: 24.09.05, 12:55
  5. Tabellen-Layout hat unten einen Rand, der wegsoll!
    Von tribunmaster im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 12.12.04, 15:03