Beatnik: Probleme mit 3spaltigem Layout in verschiedenen Browsern

SELF-Forum

Probleme mit 3spaltigem Layout in verschiedenen Browsern

Beatnik
– Informationen zu den Bewertungsregeln

Hi zusammen,

ich habe ein 3 spaltiges Layout, den Code der Bsp.-Datei habe ich unter mein Posting geklebt.
Je nachdem, welchen Browser ihr benutzt, siehts ein wenig anders aus.

Das Problem nun ist folgendes:
Die linke Spalte soll grau hinterlegt sein, die rechte auch. Die mittlere Hauptspalte soll weiss hinterlegt sein, unabhängig, wieviel Inhalt jeweils drinsteht! Sind sie auch ungefähr, aber eben nicht richtig in der Höhe.

Bei jetzigem CSS-Code habe ich in den gängigen Browsern verschiedene Ansichten:

Mozilla 1.72:
-------------
haut die mittlere Spalte über das Layout hinaus. ist richtig kaputt.

Opera 7.23 und IE 6.0:
----------------------
Stellt das Layout richtig dar, erzeugt aber grundsätzlich einen Scrollbalken, weil die Seite sich auf "ziemlich lang" vergrößert.

Hat jemand einen Lösungsansatz für mich?
BITTE KEINE TABELLENSTRUKTUR! Es soll ein reines CSS-Layout sein.

Vielen Dank!!!

Gruss
Beatnik

Hier der Code der Seite:

<html>
<head>
    <style type="text/css">
    /* Definitionen des Body und der Div-Container */
    body {
      text-align:center;
      margin-top: 30px;
      margin-right: 30px;
      margin-bottom: 30px;
      margin-left: 30px;
      }

/* Abstandsdiv */
    #topspace {
        height:40px;
        background-color:#ffffff;
    }

/* Inhaltsbereich (3spaltig) */
    #main {
      width:100%;
      height:100%;
      border: 1px dotted #9D9EB1;
      background-color:#eeeded;
      }

/* Inhaltsbereich (Mitte) */
    #content {
      margin-left: 120px;
      margin-right: 120px;
      padding-right:10px;
      padding-left:10px;
      text-align: left;
      background-color:#ffffff;
      height:100%;
      border-right: 1px dotted #9D9EB1;
      border-left: 1px dotted #9D9EB1;
      }

/* Linke Spalte (grau hinterlegt) */
    #leftbox {
      border-top: 1px dotted #9D9EB1;
      width: 120px;
      float: left;
      }

/* Rechte Spalte (grau hinterlegt) */
    #rightbox {
      border-top: 1px dotted #9D9EB1;
      width: 120px;
      float: right;
      }
    </style>
</head>

<body>
<div id="main">
    <div id="topspace"></div>
    <div id="leftbox">Links</div>
    <div id="rightbox">Rechts</div>
    <div id="content">Mitte</div>
</div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Probleme mit 3spaltigem Layout in verschiedenen Browsern

    Alexander Brock
    – Informationen zu den Bewertungsregeln

    Hallo,

    Bei jetzigem CSS-Code habe ich in den gängigen Browsern verschiedene Ansichten:

    Mozilla 1.72:

    haut die mittlere Spalte über das Layout hinaus. ist richtig kaputt.

    Das liegt daran, dass du als Höhe 100% angegeben hast,
    das ist "eine Browserfensterhöhe"

    <html>

    Wo ist der Doctype?

    <head>
        <style type="text/css">
        /* Definitionen des Body und der Div-Container */
        body {
          text-align:center;
          margin-top: 30px;
          margin-right: 30px;
          margin-bottom: 30px;
          margin-left: 30px;

    Das kann man auf margin: 30px;
    kürzen.

    }

    /* Abstandsdiv */

    Warum gibst du nicht einfach dem body
    margin-top: 72px; ?

    background-color:#ffffff;

    Das geht auch so: #fff;

    Warum gibst du die Einheiten nicht in em oder % an?
    Damit hättest du ein skalierbares Layout.

    Gruß
    Alexander Brock

    --

    SelfCode: sh:( fo:) ch:? rl:( br:> n4:? ie:{ mo:} va:) de:> zu:| fl:{ ss:( ls:[ js:(
    http://emmanuel.dammerer.at/selfcode.html
    Deshalb können Pinguine nicht fliegen:
    Was nicht fliegt kann auch nicht abstürzen
    <img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
    http://againsttcpa.com
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Probleme mit 3spaltigem Layout in verschiedenen Browsern

      Beatnik
      – Informationen zu den Bewertungsregeln

      Hi Alexander,

      erstmal danke für Deine Anmerkungen, mit den meisten liegst Du sehr richtig. Aber mit meinem größten Problem bringt mich das noch nicht weiter ... ich versuch es noch einmal ein bisschen präziser zu formulieren:

      Mozilla 1.72:

      haut die mittlere Spalte über das Layout hinaus. ist richtig kaputt.

      Das liegt daran, dass du als Höhe 100% angegeben hast,
      das ist "eine Browserfensterhöhe"

      Aber genau da liegt das Problem: Wenn ich da keine Höhe angebe, wird die Hintergrundfarbe immer nur soweit gefüllt, wie der DIV-Container mit Inhalt gefüllt ist.

      Hier noch einmal so präzise wie möglich das Problem:

      • Ich möchte alle drei Spalten mit bestimmten Hintergrundfarben dafiniert
          haben (Links grau, Mitte weiss, Rechts grau)
      • Ich hätte gerne, dass alle Spalten, egal, wie viel Inhalt darin ist, die
          definierte Hintergrundfarbe von oben bis unten tragen
          -> so wie es jetzt ist (siehe neuer Code), ist es suboptimal. So
             funktionierts nur, wenn die mittlere die inhaltlich längste ist

      Finds echt haarig. Habe schon alles mögliche ausprobiert und das "hintergründliche" Füllen von Spalten sollte doch nun eigentlich kein Problem darstellen. Stelle ich mich in dieser Frage vielleicht etwas doof an? Habe ich einen grundsätzlichen Konstruktionsfehler im Spaltenlayout?

      <html>

      Wo ist der Doctype?

      Vergessen. Hab ihn jetzt eingesetzt.

      <head>
          <style type="text/css">
          /* Definitionen des Body und der Div-Container */
          body {
            text-align:center;
            margin-top: 30px;
            margin-right: 30px;
            margin-bottom: 30px;
            margin-left: 30px;

      Das kann man auf margin: 30px;
      kürzen.

      Danke, das lag an verschiedenen Varianten, die ich hier ausprobiert habe, die nicht so symmetrisch waren.
      Hatte ich noch nicht gesäubert ...

      }

      /* Abstandsdiv */

      Warum gibst du nicht einfach dem body
      margin-top: 72px; ?

      Weil das Layout genauso aussehen soll. Innerhalb der außeren gerstrichelt/gepunkteten Borders soll über den beiden Seitenspalten noch etwas hinein. Deswegen komme ich über den body nicht ran.

      background-color:#ffffff;

      Das geht auch so: #fff;

      Danke, ja.

      Warum gibst du die Einheiten nicht in em oder % an?
      Damit hättest du ein skalierbares Layout.

      Das hat auch einen Grund. Horizontal soll es bis auf einen kleinen Rand immer skalierbar sein. Allerdings soll in der mittleren Spalte ein Banner von 468x60 laufen. Das tut es bei 800x600 Screens (vorgegebene Minimal-Voraussetzung) aber ohne Layout-Verschiebungen nur, wenn ich die beiden Seitenspalten auf max. 120px laufen lasse. Nur dann ist in etwa genug Platz in der Mitte. Jedenfalls ist _mir_ hier keine andere Lösung eingefallen, die funktioniert hat.

      Gruss und danke schon im Voraus für Eure Hilfe
      Beatnik

      --
      Hier noch einmal der Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html>

      <head>

      <title>3-spaltiges Layout (Test)</title>

      <style type="text/css">
          /* Definitionen des Body und der Div-Container */
          body {
            text-align:center;
            margin: 30px;
            /* height:85%; */
            }

      /* Abstandsdiv */
          #topspace {
              height:40px;
              background-color:#fff;
          }

      /* Inhaltsbereich (3spaltig) */
          #main {
            width:100%;
            border: 1px dotted #9D9EB1;
            background-color:#eeeded;
            }

      /* Inhaltsbereich (Mitte) */
          #content {
            margin-left: 120px;
            margin-right: 120px;
            padding-right:10px;
            padding-left:10px;
            text-align: left;
            background-color:#fff;
            border-right: 1px dotted #9D9EB1;
            border-left: 1px dotted #9D9EB1;

      }

      /* Linke Spalte (grau hinterlegt) */
          #leftbox {
            border-top: 1px dotted #9D9EB1;
            width: 120px;
            float: left;
            }

      /* Rechte Spalte (grau hinterlegt) */
          #rightbox {
            border-top: 1px dotted #9D9EB1;
            width: 120px;
            float: right;
            }
          </style>
      </head>

      <body>
      <div id="main">
          <div id="topspace"></div>
          <div id="leftbox">Links<br />&#160;<br />&#160;</div>
          <div id="rightbox">Rechts</div>
          <div id="content">Mitte</div>
      </div>
      </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Probleme mit 3spaltigem Layout in verschiedenen Browsern

        Alexander Brock
        – Informationen zu den Bewertungsregeln

        Hallo,

        • Ich möchte alle drei Spalten mit bestimmten Hintergrundfarben dafiniert
            haben (Links grau, Mitte weiss, Rechts grau)
        • Ich hätte gerne, dass alle Spalten, egal, wie viel Inhalt darin ist, die
            definierte Hintergrundfarbe von oben bis unten tragen

        Dazu ist mir noch eingefallen, dem #main einen weißen Hintergrund
        und nur #leftbox, #rightbox die graue Hintergrundfarbe.

        Stelle ich mich in dieser Frage vielleicht etwas doof an? Habe ich einen grundsätzlichen Konstruktionsfehler im Spaltenlayout?

        Nö, das sieht ganz gut aus, ich würde allerdings das Stylesheet in eine
        eigene Datei packen.

        Gruß
        Alexander Brock

        --

        SelfCode: sh:( fo:) ch:? rl:( br:> n4:? ie:{ mo:} va:) de:> zu:| fl:{ ss:( ls:[ js:(
        http://emmanuel.dammerer.at/selfcode.html
        Deshalb können Pinguine nicht fliegen:
        Was nicht fliegt kann auch nicht abstürzen
        <img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
        http://againsttcpa.com
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln