Sven: Zwei DIVs nebeneinander ausrichten

Hallo zusammen.

Ich möchte zwei DIVs (D1 und D2) verschiedentlich nebeneinander ausrichten. D2 ist dabei unsichtbar und wird durch MouseOver sichtbar. Beide DIVs sind in einem dritten DIV (D3) enthalten. D2 soll jeweils bündig an D1 liegen - Ecke an Ecke.

Möglich soll also sein:

  • D2's obere, linke Ecke an D1's unterer, linken Ecke
  • D2's obere, rechte Ecke an D1's unterer, rechten Ecke
  • D2's untere, linke Ecke an D1's unterer, rechten Ecke
  • D2's untere, rechte Ecke an D1's unterer, linken Ecke
  • usw.

Es ergeben sich also 8 Positionen. Ich hab es schon mit float und clear versucht, was aber nicht geklappt hat. Je nachdem was ich versucht habe verrückte der Seiteninhalt beim sichtbar werden von D2 oder D2 erschien irgendwo relativ zur Seite.

Hier noch die bisherigen Parameter der DIVs:

D3: nichts
D1: clear:left;
D2: position:absolute; display:none; z-index:X; (

Es soll mehrere dieser DIV-Kombinationen geben, weshalb ich hier mit z-index arbeite, damit sich die erscheinenden DIVs überlagern können.

Ich bin dankbar für jede Hilfe!

  1. In etwa so:

    <ol>
        <li>
            <div>div 1</div>
            <div>div 2</div>
        </li>
        <li>
            <div>div 1</div>
            <div>div 2</div>
        </li>
    </ol>

  2. Hallo Sven!

    Ich möchte zwei DIVs (D1 und D2) verschiedentlich nebeneinander ausrichten. D2 ist dabei unsichtbar und wird durch MouseOver sichtbar.

    Also funktioniert das Ganze nur mit Javascript!?

    Beide DIVs sind in einem dritten DIV (D3) enthalten. D2 soll jeweils bündig an D1 liegen - Ecke an Ecke.

    Möglich soll also sein:
    Es ergeben sich also 8 Positionen.

    Also soll das Ganze so aussehen!?:

    ┌-D3------------------------┐
    |┌-------┐┌-------┐┌-------┐|
    ||       ||       ||       ||
    ||   1   ||   2   ||   3   ||
    ||       ||       ||       ||
    |└-------┘└-------┘└-------┘|
    |┌-------┐┌-------┐┌-------┐|
    ||       ||       ||       ||
    ||   4   ||  D1   ||   5   ||
    ||       ||       ||       ||
    |└-------┘└-------┘└-------┘|
    |┌-------┐┌-------┐┌-------┐|
    ||       ||       ||       ||
    ||   6   ||   7   ||   8   ||
    ||       ||       ||       ||
    |└-------┘└-------┘└-------┘|
    └---------------------------┘

    wobei D2 jetzt wahlweise an einer der Positionen von 1-8 erscheinen soll!?

    Wenn ich dich also richtig verstanden habe, dann kannst du doch D2 einfach per Javascript positionieren. D3 wäre dann überflüssig.

    Ich hab es schon mit float und clear versucht, was aber nicht geklappt hat. Je nachdem was ich versucht habe verrückte der Seiteninhalt beim sichtbar werden von D2 oder D2 erschien irgendwo relativ zur Seite.

    Was hast du versucht (Code)?

    Hier noch die bisherigen Parameter der DIVs:

    D3: nichts
    D1: clear:left;
    D2: position:absolute; display:none; z-index:X; (

    Das ist so für sich alleine ziemlich nichtssagend. Wen oder was "cleared" bspw. D1? Und vermutlich soll D2 auch nicht immer in der linken oberen Seitenecke kleben? Hier wäre eine genauere Erläuterung, bzw. dein gesamter bisheriger, relevanter Quellcode angebracht.

    Es soll mehrere dieser DIV-Kombinationen geben, weshalb ich hier mit z-index arbeite, damit sich die erscheinenden DIVs überlagern können.

    Was für Kombinationen? Wann, wie und wodurch kommen diese "Kombinationen" zustande? Die möglichen Positionen waren ja noch (vermutlich) klar - wieso jetzt auf einmal "Überlagerung"? Und wer oder was soll sich wie, wann und wo überlagern können?

    Gruß Gunther