Ausrichten von Layermenu bei relativem table- (bzw.div-) Layout

[Thea]

Hallo Forum,

ich habe da mal ein Problem: http://www.8ung.at/thea/Schule_v4
Wenn ihr über die Buttons "Die Schule", "Projekte" und "Interaktiv" geht, öffnet sich ein Layermenu. Die Höhe stimmt auch. Ich weiß ebenfalls, wie man diese divs an die richtige Stelle rückt, das ist alles nicht das Problem. Das Problem ist, dass die Tabelle immer zentriert dargestellt wird. Die Positionierung der divs muss aber absolut erfolgen. Bei verschiednen Auflösungen gibt es da natürlich Probleme. Ich hab schon probiert, unterhalb der Navigationszeile eine weitere Zeile einzufügen, die die Höhe Null hat. Hat aber nicht das richtige Resultat gebracht.
Das einzige, was ich noch nicht evrsucht habe, ist, das table-Layout in divs umzuwandeln (was ich sowieso vorhabe) und dann ein div mit der Höhe Null zu definieren, das die Position der Layer-divs angibt. Ich weiß nur nicht, ob man über den z-index auch divs über ein div überlappen lassen kann, in dem die divs eingeschachtelt sind.

Hat jemand vielleicht eine Idee für eine elegante Lösung?

Gruß Thea

[molily]

Hallo, Thea.

ich habe da mal ein Problem: http://www.8ung.at/thea/Schule_v4
Wenn ihr über die Buttons "Die Schule", "Projekte" und "Interaktiv" geht, öffnet sich ein Layermenu. Die Höhe stimmt auch. Ich weiß ebenfalls, wie man diese divs an die richtige Stelle rückt, das ist alles nicht das Problem. Das Problem ist, dass die Tabelle immer zentriert dargestellt wird. Die Positionierung der divs muss aber absolut erfolgen.

Das erreicht kann in der Regel damit erreicht werden, dass die Bereiche, welche relativ absolut zu positionieren sind, in ein Element mit position:relative eingeschlossen werden. Hier würde also naheliegen, die Tabellenzelle mit position:relative auszustatten. Selbiges habe ich ausprobiert und es hat nicht das gewünschte Ergebnis geliefert. Daraufhin bin ich auf folgende Lösung gekommen:

<td style="text-align:right;">

<div style="position:relative;">

<div id="box1" style="visibility:hidden; position:absolute; top:15px; right:248px; margin:0; padding:0;">
<img src="infos.gif" width="62" height="14" border="0" alt=""><br>
<img src="schulverein.gif" width="62" height="14" border="0" alt="">
</div>

<div id="box2" style="visibility:hidden; position:absolute; top:15px; right:158px; margin:0; padding:0;">
<img src="projekte.gif" width="90" height="14" border="0" alt="">
</div>

<div id="box3" style="visibility:hidden; position:absolute; top:15px; right:124px; margin:0; padding:0;">
<img src="gaestebuch.gif" width="62" height="14" border="0" alt=""><br>
<img src="forum.gif" width="62" height="14" border="0" alt="">
</div>

<a href="" onmouseover="document.getElementById('box1').style.visibility='visible'" onmouseout="document.getElementById('box1').style.visibility='hidden'"><img src="schule.jpg" width="62" height="14" border="0"></a><a href="" onmouseover="document.getElementById('box2').style.visibility='visible'" onmouseout="document.getElementById('box2').style.visibility='hidden'"><img src="schueler.jpg" width="62" height="14" border="0" style="vertical-align:middle"></a><a href="" onmouseover="document.getElementById('box3').style.visibility='visible'" onmouseout="document.getElementById('box3').style.visibility='hidden'"><img src="interaktiv.jpg" width="62" height="14" border="0"></a><img src="links.jpg" width="62" height="14" border="0" style="vertical-align:middle"><img src="kontakt.jpg" width="62" height="14" border="0">

</div>

</td>

Für den Test habe ich vorerst auf komplexe JavaScript-Funktionen verzichtet und über das DOM gearbeitet. Hier müsste natürlich noch die das zeitverzögerte Schließen etc. eingebaut werden.

Obige Lösung funktioniert erfolgreich in Opera 6.05 und MSIE 6SP1. Mozilla 1.2b vergrößert die Tabellenzelle um die Höhe der absolut positionierten Bereiche und sieht sie als Inhalt der Tabellenzelle an.

Das einzige, was ich noch nicht evrsucht habe, ist, das table-Layout in divs umzuwandeln (was ich sowieso vorhabe)

Das würde ich dir auch vorschlagen, auf diese Weise ist es am einfachsten, auch Mozilla zufriedenzustellen.

und dann ein div mit der Höhe Null zu definieren, das die Position der Layer-divs angibt.

Das wäre dann IMHO nicht mehr nötig.

Ich weiß nur nicht, ob man über den z-index auch divs über ein div überlappen lassen kann, in dem die divs eingeschachtelt sind.

Die Verschachtelung dürfte kein Problem machen, denn wenn die Navigation einen div-Container mit einem rechts floatenden Bereich enthält um das text-align:right ohne Tabellen zu lösen, werden die Untermenüs problemlos zu diesem div mit position:relative positioniert werden können.

Noch einige generelle Anmerkungen zur Seite.

• Die Navigation zu den Unterrubriken funktioniert nicht ohne JavaScript. Deshalb bist du so oder so gezwungen, die Unterrubriknavigationen auf den Unterseiten zusätzlich anzugeben. Möglicherweise kommen auch noch Navigationen dritter oder vierter Ordnung hinzu, um eine Zweitnavigation kommst du also nicht umhin.
  Eventuell könntest du das position:absolute sowie visibility:hidden beim Laden mit JavaScript setzen und die absolut positionierten div-Elemente mit den Untermenüs jeweils direkt auf den jeweiligen Rubrikenlink folgen lassen, dadurch wären die Unterrubriken auch ohne JavaScript sichtbar, das würde aber ein heilloses durcheinander in der Navigation zufolge haben.
• alt-Attribute sind Pflicht.
• Die Schriftgröße ist *viel* zu klein, das ist IMHO intolerabel, da musst du nachbessern, auch und vor allem bei den Grafiken mit Pixelschriftart.
• Die Schriftgröße ist in pt angegeben. Entweder du verzichtest auf Schriftgrößenangaben oder du benutzt Pixel. Dann aber bitte eine lesbare Größe.
• Eine Zementierung des Layouts auf 800x600 Pixel ist unklug. Hier könntest du mit CSS ein an die Bildschirmgröße angepasstes Layout erstellen.
• Alle Inline-Styles würde ich auslagern.
• In der Stylesheet-Datei darf kein Markup auftauchen, das style-Element kannst du also streichen. Dies ist übrigens der Grund, warum Mozilla den Stylesheet ignoriert.
• Falls du das Tabellenlayout weiterführst, wäre es klug, den Verschachtelungsgrad zu minimieren. Unzählige Tabellen sind einfach unnötig und könnten gestrichen oder durch div- oder p-Elemente ersetzt werden.
• Die Tabelle, welche die Navigation enthält, benötigt width:100%. Im Übrigen kannst du diese Tabelle wegrationalisieren, indem du die äußere Layouttabelle mindestens zweispaltig machst und die Kopfzelle mit colspan="2" ausstattest.
• Das Layout ist scheinbar nur auf MSIE getestet. Mozilla und Opera zeigen viele Fehler an.
• Das JavaScript fragt auf Browser ab, hier sollte besser auf Objekte gefragt werden. Besser aber man unterstützt hier Netscape 4 nicht, da selbiger das Layout sowieso nicht adäquat rendert. Stattdessen würde ich empfehlen, ausschließlich mit Microsoft- und DOM-Syntax zu arbeiten.
• Du darfst eine ID nur einmal im Dokument vergeben, dementsprechend musst du die JavaScript-Funktion anpassen. showbox.style.top=9(1|2); dürfte bei obiger Lösung entfallen. Wenn NS4 nicht mehr unterstützt wird, ist keine Differenzierung mehr notwendig.
• Gebe am Besten eine HTML 4.01 Strict-DTD mit SYSTEM-Identifier an und validiere deine Seite gegen sie, um Fehler beheben zu können. Du könntest auch mit XHTML arbeiten, Strict sollte idealerweise angestrebt werden.
• Die Präsentationselemente b und i sollten durch strong und em oder äquivalente Stylesheet-Formatierungen ersetzt werden.

Mathias