✔ Wie richte ich ein Div richtig an einem Div aus?

[Andre_d]

Hallo zusammen,

ich habe ein kleinen Chat mit Ajax realisiert. Nun habe ich vor, diesem Chat ein paar Options hinzuzufügen. Diese Options sollen, wenn man den Link für die Einstellungen klickt, in einem weiteren Div auf der Rechten seite meine Chats (welcher in einem Div angezeigt wird) erscheinen.

Wie richtet man so etwas aus? Mein Chat befindet sich auf der Hauptseite, leider nicht immer 100%ig auf der selben Höhe. Weis nicht ob diese Info wichtig ist.

Hier noch ein kleines Bild, um es noch einmal grafisch auszudrücken, was ich vorhabe:

http://www.dziko-online.de/infodiv.png

Hat jemand eine Idee? Ich hoffe, dass dies hier das richtige Forum für meine Problematik ist!

Freue mich auf Antwort,

viele Grüße
André

 

[Maik]

Hi,

das scheint mir hier doch eher eine CSS-Frage zu sein

<div id="wrapperBox">
     <div id="chatBox">
          <h1>chatBox</h1>
     </div>
     <div id="infoBox">
          <h1>infoBox</h1>
     </div>
</div>

#wrapperBox {
width:800px;
margin:0 auto;
}
#chatBox {
width:600px;
float:left;
background:red;
}
#infoBox {
margin-left:600px;
background:blue;
color:white;
}

... wäre eine Möglichkeit.

mfg Maik

 

[Andre_d]

Ach siehste, ich wollte erst es im CSS Forum posten, da ich aber an die Dynamik hierbei gedacht hatte, hab ich mich letzten Endes für dieses Forum entschieden *g*

Aber genauso meinte ich das ja, ich bedanke mich für dieses klasse Beispiel, werde ein wenig rumexperimentieren!

Schönen Abend noch!

viele Grüße
André

 

[Andre_d]

So bei diesem Thema ist mir doch noch eine Frage aufgekommen.

Und zwar habe ich es so wie oben beschrieben gelöst. Ich lasse per klick mittels Prototype/aculous den Bereich für die Infobox hinter das chatfenster morphen.

nun habe ich aber das Problem, dass wenn ich (als Beispiel) eine Grafik in dieser InfoBox eingebaut habe, diese dann hinter den Chat "schiebe" bzw. "verschwinden" lasse, die (in diesem Falle) unter den Chat geraten und dort angezeigt werden, und nicht auch hinter dem Chat verschwinden.

Hat da jemand einen Rat oder Tipp? Warscheinlich auch eher wieder CSS, aber da ich ja mit Prototype arbeite, passt es noch gut hier hinein denke ich.

Freue mich auf Antwort!

viele Grüße
André

 

[Maik]

Hi,

deiner Umschreibung nach klingt das so, wie wenn die Grafik breiter als die Info-Box wäre, weshalb sie in der Floatumgebung nach unten umgebrochen wird.

Eine zweite Möglichkeit wäre dieses Konzept, in dem das umschliessende DIV #wrapperBox relativ, und darin #infoBox absolut positioniert wird:

#wrapperBox {
position:relative;
width:800px;
margin:0 auto;
}
#chatBox {
width:600px;
background:red;
}
#infoBox {
position:absolute;
top:0;
right:0;
width:200px;
background:blue;
color:white;
}

Vielleicht hilft dir das weiter.

mfg Maik

 

[Andre_d]

Hallo Maik,

nee die Grafik ist nicht größer, es muss auch nicht unbedingt eine Grafik sein, Text wird ebenfalls nicht hinter den Chat geschoben.

Habe das Problem aber ausfindig machen können. Ich musste mit z-index die einzelnen Ebenen setzen. Sprich mein Chat hat z-index:2 und die Infobox z-index:1 so hat es funktioniert!

 

[Maik]

Das nächste Mal zeig besser deinen Quellcode, oder nenn den Link zur Seite, damit es nicht wieder zu Mißverständnissen kommt. Vielen Dank

mfg Maik