Arne: Header, 3 Cols, dynamische DIVs (ohne Faux o.ä. Suche benutzt)

SELF-Forum

Header, 3 Cols, dynamische DIVs (ohne Faux o.ä. Suche benutzt)

Arne
– Informationen zu den Bewertungsregeln

Hallo

Mich verlassen langsam alle guten Geister.. ich weiss einfach nicht mehr weiter.

Ich stehe vor folgendem Problem:
Ich möchte ein Layout mittels DIVs erstellen
+--------------+
|    Header    |
+--------------+
| 1 |   2  | 3 |
|   |      |   |
+---+------+---+

Ungefähr so.. der Header soll eine Breite von 100% und eine Höhe von 60px bekommen - funktioniert.
Die restlichen drei 'Spalten' sollen die restliche Browserhöhe füllen, wobei zusätzlich (1) eine Breite von 162px, (3) eine Breite von 156px und (2) wieder den restlichen Teil des Browsers ausfüllen soll.

Ich habe auch schon etliche Vorschläge aus älteren Threads durchkramt und ausprobiert, jedoch gelingt es mir mein Vorhaben nicht umzusetzen.
Faux Columns gehen auch nicht, da der Abschnitt in der Mitte eine variable Breite haben soll.

Any ideas? Oder ist dies gar nicht umsetzbar - muss ich auf Tabellen oder ein Frameset zurückgreifen?

Grüsse aus der Schweiz

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Header, 3 Cols, dynamische DIVs (ohne Faux o.ä. Suche benutzt)

    Atom Waffel
    – Informationen zu den Bewertungsregeln

    Hallo,

    +--------------+
    |    Header    |
    +--------------+
    | 1 |   2  | 3 |
    |   |      |   |
    +---+------+---+

      
<!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" xml:lang="de" lang="de">  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
  <title></title>  
  <style type="text/css">  

~~~~~~css
  
  /* <![CDATA[ */  
* {  
   margin:0;  
   padding:0;  
   color:#A0A0A0;  
   font-size: 20px;  
}  
body {  
   font-size: 100.01%;  
   text-align:center;  /*Nur zur DEMONSTRATION */  
   padding-top: 20px;  
}  
#container {  
   margin:  auto;     /*Nur zur DEMONSTRATION */  
   width: 100%;  
  
}  
#links {  
   width: 162px;  
   float:left;  
   border: 1px dashed silver;  /*Nur zur DEMONSTRATION */  
   height: 500px;  /*Nur zur DEMONSTRATION */  
   background-color: #eee; /*Nur zur DEMONSTRATION */  
}  
#mitte {  
   width: 100%;  
   margin: 0 156px 0 162px;  
   border: 1px dashed silver;  /*Nur zur DEMONSTRATION */  
   height: 500px; /*Nur zur DEMONSTRATION */  
   background-color: #eee;  /*Nur zur DEMONSTRATION */  
}  
#rechts {  
   width: 156px;  
   float:right;  
   border: 1px dashed silver;  /*Nur zur DEMONSTRATION */  
   height: 500px;  /*Nur zur DEMONSTRATION */  
   background-color: #eee;  /*Nur zur DEMONSTRATION */  
}  
#kopf {  
   width: 100%;  
   border: 1px dashed silver;  /*Nur zur DEMONSTRATION */  
   height: 60px;  
   background-color: #eee;  /*Nur zur DEMONSTRATION */  
}  
  /* ]]> */  

~~~~~~html
  
  </style>  
</head>  
<body>  
<div id="container">  
<div id="kopf">Kopfzeile</div>  
<div id="links">Links</div>  
<div id="rechts">Rechts</div>  
<div id="mitte">Mitte</div>  
</div>  
</body>  
</html>

    Mit freundlichen Grüßen,
    Atom Waffel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Header, 3 Cols, dynamische DIVs (ohne Faux o.ä. Suche benutzt)

      Arne
      – Informationen zu den Bewertungsregeln

      Hallo

      Danke für die Antwort, hat mir sehr geholfen! Damit es aber in FF3 und IE6 funktioniert musste ich noch ein paar Sachen ändern, ganzer Code:

      <!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" xml:lang="de" lang="de">  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
  <title></title>  
  <style type="text/css">  
  /* <![CDATA[ */  
* {  
   margin:0;  
   padding:0;  
}  
  
#container {  
   margin:  0px;     /*Nur zur DEMONSTRATION */  
   width: 100%;  
  
}  
  
#links {  
   width: 162px;  
   float:left;  
   border: 1px dashed silver;  /*Nur zur DEMONSTRATION */  
   height: 500px;  /*Nur zur DEMONSTRATION */  
   background-color: #eee; /*Nur zur DEMONSTRATION */  
}  
  
#mitte {  
   margin: 0 156px 0 162px;  
   border: 1px dashed silver;  /*Nur zur DEMONSTRATION */  
   height: 500px; /*Nur zur DEMONSTRATION */  
   background-color: #eee;  /*Nur zur DEMONSTRATION */  
}  
  
#rechts {  
   width: 156px;  
   float:right;  
   border: 1px dashed silver;  /*Nur zur DEMONSTRATION */  
   height: 500px;  /*Nur zur DEMONSTRATION */  
   background-color: #eee;  /*Nur zur DEMONSTRATION */  
}  
  
#kopf {  
   border: 1px dashed silver;  /*Nur zur DEMONSTRATION */  
   height: 60px;  
   background-color: #eee;  /*Nur zur DEMONSTRATION */  
}  
  
  /* ]]> */  
  </style>  
</head>  
<body>  
<div id="container">  
<div id="kopf">Kopfzeile</div>  
<div id="links">Links</div>  
<div id="rechts">Rechts</div>  
<div id="mitte">Mitte</div>  
</div>  
</body>  
</html>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Header, 3 Cols, dynamische DIVs (ohne Faux o.ä. Suche benutzt)

        Arne
        – Informationen zu den Bewertungsregeln

        Was mir gerade eben erst aufgefallen ist -> die Höhe der DIVs beträgt fix 500px.. gibt es eine Möglichkeite den ganzen restlichen Bildschrim nach unten zu füllen?

        'türlich.. body auf 100%, container auf 100% und die drei entsprechenden DIVs, ABER dann wird immer die ganze Browserhöhe genommen und somit erscheint ein Scrollbar, gibt es eine Möglichkeit dies zu umgehen?

        Das idealste wäre ja eine Möglichkeit die restliche Höhe anzugeben können, aber * und auto funktionieren nicht

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Header, 3 Cols, dynamische DIVs (ohne Faux o.ä. Suche benutzt)

          Atom Waffel
          – Informationen zu den Bewertungsregeln

          Hallo,

          Was mir gerade eben erst aufgefallen ist -> die Höhe der DIVs beträgt fix 500px..

          du hast auch nicht gesagt das es anders sein soll^^ du wolltest nur 3 spalten mit 100%
          aber es könnte funktionieren wenn du mit padding einen abstand setzt absolut positinierst und dann 100% nimmst.

          Mit freundlichen Grüßen,
          Atom Waffel

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Header, 3 Cols, dynamische DIVs (ohne Faux o.ä. Suche benutzt)

    Atom Waffel
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich will noch hinzufügen:

    CSS valid,
    HTML valid

    Mit freundlichen Grüßen,
    Atom Waffel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Header, 3 Cols, dynamische DIVs (ohne Faux o.ä. Suche benutzt)

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo Arne

    Ich stehe vor folgendem Problem:
    Ich möchte ein Layout mittels DIVs erstellen
    +--------------+
    |    Header    |
    +--------------+
    | 1 |   2  | 3 |
    |   |      |   |
    +---+------+---+

    Sollen das jeweils umschließende Border sein, oder sollen die Bereiche farblich oder lediglich durch einseitige Linieen voneinander abgegrenzt sein?

    ..., da der Abschnitt in der Mitte eine variable Breite haben soll.

    Nur das wäre kein Problem (altes einfaches Beispiel).

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln