Box an Box als Schlüsselanhänger

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

ich versuche gerade einem Kasten einen weiteren, leicht von ihm verschobenen Kasten optisch quasi als Schlüsselanhänger anzuhängen. Im Ergebnis soll bei Versetzung des ersten Kastens auch der zweite Kasten automatisch mit versetzt werden. Optimal wäre es, wenn der zweite Kasten auch seine Dimensionen automatisch mit dem ersten Kasten ändern könnte.

Die Herausforderung:

  1. Die Inhalte des ersten Kastens dürfen nicht vom zweiten Kasten verdeckt werden.
  2. Die Eigenschaften des ersten Kastens sollten für die Lösung nicht „angerührt“ werden (vielleicht höchstens minimal, aber besser gar nicht)

Für den Firefox ist mir das schon gelungen:

HTML:

 Erstes 
 Zweites 
 Drittes

CSS:

.box { position:absolute; left:200px; top:100px;
 width:400px; height:400px; border:solid 3px black; }

#anhaenger{ height:100%; width:100%; 
 background-color:#bbb;
 margin-bottom:-105%;
 margin-left:5%; margin-top:5%;}


.zeile { border:solid 1px blue;}

Der IE6 will aber einfach nicht… Wer weiß was?

Schöne Grüße,

Mohamed.

#2

Hallo,

  1. Die Inhalte des ersten Kastens dürfen nicht vom zweiten
    Kasten verdeckt werden.

ein Kind-Element wird das Eltern-Element immer verdecken, es sei denn das Kind-Element ist transparent. Aber auch dann würde der Inhalt das Eltern-Element verdecken.

Für den Firefox ist mir das schon gelungen:

bei mir sieht es in beiden Browsern gleich aus.

Gruß, Stephan

#3

dem IE wird´s gehen wie mir :smile:
Dein Beispiel läßt nur wage erahnen was Du willst.
Gib einen Link wo man sich alles im Zusammenhang anschauen kann oder wenigstens eine verständliche Beispielseite.

Gruß, der Rosslauer.de

http://www.dessau-rosslauer.de/upload/up/Bilder/ie.jpg
http://www.dessau-rosslauer.de/upload/up/Bilder/fuch…

#4

Schatten
Hallo Rosslauer,

Deine Screenshots zeigen genau das Problem. Der IE soll einfach das machen, was der FF macht.

Anders gesagt: Der erste Kasten, soll einen Schatten hinter sich her „ziehen“.

Ich habe es jetzt einigermaßen gelöst, mit zwei weiteren Kästen rechts vom ersten Kasten und unterhalb, um das Überstehen zu simulieren…

Schöne Grüße,

Mohamed.

#5

ich sag’s nur ungern, aber in diesem Fall macht leider FireFox etwas falsch. Der „Anhänger“ wird z.T. außerhalb des Elternelements dargestellt, obwohl das position-Attribut nicht angegeben ist und das sollte, wenn man w3c folgt, nicht passieren.
Wenn Firefox diesen Fehler behebt, wird es wie im IE aussehen.

Gruß, Stephan