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

SELF-Forum

Doch noch gravierende Probleme mit CSS-Layout :-(

Martin
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Doch noch gravierende Probleme mit CSS-Layout :-(

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    div.register_1     {position: absolute; top: 0px; z-index: 7; visibility: visible; visibility: show}

    visibility wird auf visible gesetzt.
    Anschließend wird versucht, visibilty auf den ungültigen Wert show zu setzen - dieser wird ignoriert und durch den initial-Wert (inherit - also vermutlich visible) ersetzt.

    div.register_2     {position: absolute; top: 0px; z-index: 6; visibility: hidden;  visibility: hide}

    visibility wird auf visible gesetzt.
    Anschließend wird versucht, visibilty auf den ungültigen Wert hide zu setzen - dieser wird ignoriert und durch den initial-Wert (inherit - also vermutlich visible) ersetzt.

    Problem hierbei ist, dass sich alle Bereiche überlagern, was ihre Position anbelangt, aber auch, dass alle sichtbar sind.

    Logisch, sie sind ja auch alle an der selben Position. Bzgl. Sichtbarkeit siehe oben.

    Um die Syntax für IE und NS in einer Definition zu haben, habe ich beide visibility-Eigenschaften aufgenommen.

    Das ist genau der Fehler.
    Der Netscape (zumindest in aktuellen Versionen) wird das obenbeschriebene Verhalten zeigen. Andere Browser, die CSS korrekt interpretieren, ebenfalls.
    Und uralte Netscape-Versionen werden Probleme wegen der Unterstriche in den Klassennamen haben und die Regeln komplett ignorieren.

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

    Wenn Du das mit Tabelle machen willst - wofür brauchst Du da zwei Tabellen? Eine reicht vollkommen.

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Doch noch gravierende Probleme mit CSS-Layout :-(

      Andreas
      – Informationen zu den Bewertungsregeln

      Hallo MudGuard,

      Erstmal danke für Deine Hilfe.

      Bzgl. Sichtbarkeit siehe oben.

      Problem erkannt, Problem gebannt :-)
      Die Anzeige bezüglich der Sichtbarkeit funktioniert nun.

      wofür brauchst Du da zwei Tabellen? Eine reicht vollkommen.

      Die äussere Tabelle mit 100% x 100%, die innere, damit der Div
      "mitte_mitte" das Layout nicht auf die ganze Bildschirmbreite zieht (die Breite wird durch Tabellen-Reiter bestimmt, die ich nicht feststellen kann, da sie aus Grafiken und reinem Text bestehen).

      Nun wäre nur noch zu klären, warum das Layout als solches zerissen wird...

      Einen Link kann ich Dir leider noch nicht anbieten, da ich die Homepage offline entwerfe.

      Dann wäre alles optisch soweit perfekt.

      Andreas

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Warst Du auf dem Standesamt?

        MudGuard Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        Andreas

        Vorhin hießest Du noch Martin.
        Wußte gar nicht, daß die Standesämter auch am Wochenende offen haben und daß Namensänderungen jetzt so einfach sind...

        cu,
        Andreas

        --
        MudGuard? Siehe http://www.Mud-Guard.de/
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Warst Du auf dem Standesamt?

          Martin
          – Informationen zu den Bewertungsregeln

          Hi,

          Ich habe keineswegs meinen Namen geändert, sondern mich nur auf Deine Namensänderung berufen :o)

          cu,
          Andreas

          Martin

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Warst Du auf dem Standesamt?

            Fabian Transchel Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo,

            Ich habe keineswegs meinen Namen geändert, sondern mich nur auf Deine Namensänderung berufen :o)

            Das verstehe ich jetzt nicht. Wo hat MudGuard seinen Namen geändert?

            Grüße aus Barsinghausen,
            Fabian

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Warst Du auf dem Standesamt?

              MudGuard Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hi,

              Ich habe keineswegs meinen Namen geändert, sondern mich nur auf Deine Namensänderung berufen :o)
              Das verstehe ich jetzt nicht. Wo hat MudGuard seinen Namen geändert?

              Ich versteh's auch nicht - ich benutze seit Jahren den selben Nick und unterschreibe eigentlich auch immer mit meinem Vornamen.

              cu,
              Andreas

              --
              MudGuard? Siehe http://www.Mud-Guard.de/
              Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln