Überlappende Ausrichtung von DIVs innerhalb Tabellenzelle

[Enrico]

Hallo,

wie kann ich es bewerkstelligen, dass Registerreiter, die ich zur
Navigation durch meine DVD-Sammlung verwenden möchte, absolut
deckungsgleich (überlappend) innerhalb einer Tabellenzelle
angeordnet werden ?

Die Registerreiter sind verweissensitive Imagemaps und haben alle
die selbe Größe.

Wenn ich in meinem zugehörigen CSS-Sheet "position:absolute" angebe,
dann überlappen sich zwar alle Imagemaps, werden aber nicht innerhalb
der Tabellenzelle - wie beabsichtigt - ausgegeben.

Nehme ich "position:relative", dann überlappen sie nicht und werden,
nacheinander, wie im HTML-Code definiert, angezeigt.

Hier der entsprechende Code der CSS-Datei:

div.register
   {
     position:absolute;
     top:0px;
     left:0px;
     width:1490px;
     height:62px;
     border:0px;
   }

Hier der entsprechende Code der HTML-Datei:

<table border="0" cellpadding="0" cellspacing="0">
     <tr>
       <td colspan="3"><img src="spaltenkoepfe.png" width="1490" height="63"></td>
     </tr>
     <tr>
       <td width="10" background="rahmen_links.png"></td>
       <td width="1470" height="600"></td>
       <td background="rahmen_rechts.png"></td>
     </tr>
     <tr>
       <td colspan="3">
         <div class="register" id="1">
           <img ...>
           <map ...>
         </div>
         <div class="register" id="2">
           <img ...>
           <map ...>
         </div>
         ...
       </td>
     </tr>
   </table>

Wie kann ich mein Vorhaben umsetzen ?

Vielen Dank im Voraus.

Gruß,
Enrico

[Gernot Back]

Hallo Enrico,

Wenn ich in meinem zugehörigen CSS-Sheet "position:absolute" angebe,
dann überlappen sich zwar alle Imagemaps, werden aber nicht innerhalb
der Tabellenzelle - wie beabsichtigt - ausgegeben.

Wahrscheinlich möchtest du genau ein DIV-Element der Klasse "register" in deine Tabellenzelle schachteln, aber nicht mit einer Ziffer als ID (pfui!) und nicht absolut, sondern relativ positioniert und in dieses DIV-Element schachtelst du dann wiederum deine IMG-Elemente absolut-positioniert mit Top- und Left-Wert "0", bei denen es sich wahrscheinlich um teiltransparente GIFs handelt, sodass sie untereinander durchscheinen. Die Imagemap braucht dann nur der letzte Reiter, weil ja sowieso nur der als oberster klickbar ist.

Warum machst du es aber so umständlich? Wieso setzt du nicht einfach alle einzelnen Reitergrafiken (ohne transparente Bereiche, ggf. floatend) normal verlinkt nebeneinander? Wozu brauchst du eigentlich die Tabelle drumherum? Hast du da auch noch tabellarische Daten drin?

Gruß Gernot

[Enrico]

Hallo Gernot,

Du meinst, ich müsste einen DIV-Bereich ("Container") definieren, der dann alle anderen DIV-Bereiche (die nur aus den Imagemaps bestehen) enthält ?

Den "Container"-DIV müsste ich relativ, die einzelnen "Register"-DIVs ansolut zum Container-DIV definieren ?

Die Tabelle drumherum dient mir nur der Ausrichtung der einzelnen Elemente meiner DVD-Verwaltung:

-Zeile oben mit den Spaltenköpfen und Navigation (komplette Imagemap)
-Zeile mitte zur Ausgabe der Filme in Tabellenform
-Zeile unten zur Ausgabe der Registerreiter (Imagemaps)

Ich glaube, hier liegt ein Missverständnis vor:

Alle Registerreiter sind für sich voll funktionstüchtige Imagemaps une enthalten alle 28 Reiter, nur unterscheiden sie sich durch den optisch hervorgehobenen, aktiven Reiter.

Im Register "0" ist der Reiter "Alle Filme" hervorgehoben, im Register "1" der Reiter "#" für Filme, die mit einer Tiffer beginnen, der Reiter "A" für Filme mit dem Anfangsbuchstaben "A" usw., alle übrigen Reiter sind - abgesehen von dem einen hervorgehobenen Reiter - verweissensitiv. Über diese Links möchte ich die Reiter durchwechseln.

Gruß,
Enrico

[Gernot Back]

Hallo Enrico,

Du meinst, ich müsste einen DIV-Bereich ("Container") definieren, der dann alle anderen DIV-Bereiche (die nur aus den Imagemaps bestehen) enthält ?

Den "Container"-DIV müsste ich relativ, die einzelnen "Register"-DIVs ansolut zum Container-DIV definieren ?

Exakt so meine ich das. Ich denke immer noch dass es einen einfacheren Weg ohne Imagemaps mit einzelnen Reitern gibt.

Verlinke hier doch mal zwei Beispiele solcher Reitergrafiken, damit wir sehen können, wie sie aufgebaut sind.

Alle Registerreiter sind für sich voll funktionstüchtige Imagemaps une enthalten alle 28 Reiter, nur unterscheiden sie sich durch den optisch hervorgehobenen, aktiven Reiter.

Du willst also auch noch den Z-Index mit Javascript jeweils tauschen? Mann das ist wirklich umständlich. Es geht viel einfacher, glaub mir!

Gruß Gernot

[Enrico]

Hallo Gernot,

gut, dann habe ich Dich bezüglich der Verschachtelung schon mal richtig verstanden.

Die Grafiken verlinken geht leider nicht, weil ich keinen Webspace habe, sämtliches Material liegt lokal auf meinem Computer.

Ich skizziere sie mal:

|            +--------------
|            | # | A | B |
|            +---+---+---+--
| Alle Filme |
+------------+

+------------+   +---+---+--
| Alle Filme |   | A | B |
+------------+   +---+---+--
             | # |
             +---+

+------------+---+   +---+--
| Alle Filme | # |   | B |
+------------+---+   +---+--
                 | A |
                 +---+

Genau, die Z-Indices möchte ich mit Javascript tauschen, auf Anhieb ist mir keine andere Variante eingefallen.

Es geht viel einfacher, glaub mir!

Welche Variante schwebt Dir vor ?
Was schlägst Du vor ?

Ich muss schon zugeben, dass der Code aller Imagemaps zusammen recht umfangreich ist.

Gruß Enrico