Martin: Doch noch gravierende Probleme mit CSS-Layout :-(

Beitrag lesen

Hallo,

Zunächst möchte ich mich erstmal für die Länge meines Postings entschuldigen, aber kürzer ging es leider nicht.

Ich möchte in einer Tabellenzelle über Javaskript Ebenen tauschen, nur habe ich Probleme mit der Anzeige der DIV-Bereiche für die Ausgabe der Register-Reiter (Navigation).

Die Definition der einzelnen Bereiche sieht folgendermassen aus:

div                {margin: 0px; padding: 0px; border:0px}

div.container      {width: 100%; height: 100%}

div.links_mitte    {clear: both; float: left}
div.mitte_mitte    {...}
div.rechts_mitte   {float: right; text-align: right}
div.links_unten    {clear: both; float: left}
div.mitte_unten    {...}
div.rechts_unten   {float: right}

Hinweis: Bei obiger Definition habe ich für meine Fragen nur die ausrichtenden Elemente notiert.

div.register_1     {position: absolute; top: 0px; z-index: 7; visibility: visible; visibility: show}
div.register_2     {position: absolute; top: 0px; z-index: 6; visibility: hidden;  visibility: hide}
div.register_3     {position: absolute; top: 0px; z-index: 5; visibility: hidden;  visibility: hide}
div.register_4     {position: absolute; top: 0px; z-index: 4; visibility: hidden;  visibility: hide}
div.register_5     {position: absolute; top: 0px; z-index: 3; visibility: hidden;  visibility: hide}
div.register_6     {position: absolute; top: 0px; z-index: 2; visibility: hidden;  visibility: hide}
div.register_7     {position: absolute; top: 0px; z-index: 1; visibility: hidden;  visibility: hide}

div.seitenanfang   {position: absolute; width:29px; height:43px; top:   0px;  right:0px}
div.hochscrollen   {position: absolute; width:29px; height:37px; top:   53px; right:0px}
div.runterscrollen {position: absolute; width:29px; height:37px; bottom:53px; right:0px}
div.seitenende     {position: absolute; width:29px; height:43px; bottom:0px;  right:0px}

Die Einbindung der einzelnen Div-Bereiche für die Ausgabe der Register-Reiter (Navigation) erfolgt folgendermassen:

...
<td>
  <div class="container">
    <div class="register_1">
      ...
    </div>
    <div class="register_2">
      ...
    </div>
    <div class="register_3">
      ...
    </div>
  </div>
  ...
</td>

Problem hierbei ist, dass sich alle Bereiche überlagern, was ihre Position anbelangt, aber auch, dass alle sichtbar sind.
Um die Syntax für IE und NS in einer Definition zu haben, habe ich beide visibility-Eigenschaften aufgenommen.

Das zweite Problem ist, dass das komplette Layout zerrissen wird:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="CSS_definitionen.css">
  </head>
  <body>
    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
      <tr>
        <td width="100%" align="center">
          <table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                <div class="container">
                  <div class="register_1">
                    ...
                  </div>
                  <div class="register_2">
                    ...
                  </div>
                  <div class="register_3">
                    ...
                  </div>
                </div>
                <div class="links_mitte">LM</div>
                <div class="rechts_mitte">
                  <div class="seitenanfang">A</div>
                  <div class="hochscrollen">H</div>
                  <div class="runterscrollen">R</div>
                  <div class="seitenende">E</div>
                </div>
                <div class="mitte_mitte">MM</div>
                <div class="links_unten">LU</div>
                <div class="rechts_unten">RU</div>
                <div class="mitte_unten">MU</div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Ich habe trotzdem auf zwei Tabellen zurückgegriffen, um das CSS-Layout horizontal und vertikal in Bildschirmmitte darzustellen.

Last but not least werden die Div-Bereiche für die Seitennavigation (Sprung zum Seitenanfang, Hochscrollen, Runterscrollen und Sprung zum Seitenende) nicht so angezeigt, wie sie es sollen:

Wie oben bereits skizziert, werden auch diese vier Bereiche in einem Container zusammengefasst.

Ich hoffe sehr, dass Ihr mir weiterhelfen könnt.

Vielen Dank im voraus,
Martin