positionierung DIV

Elvis_M16 · 8. August 2007, 10:44

Hallo,
versuche gerade mehrere div's, welche bilder enthalten innerhalb eines div's zu positionieren. wie bekomm ich die dazu, nebeneinander zu stehen?
d.h. bild 1 soll links sein, die bilder 2 und 3 daneben, wobei bild 2 über bild
3 ausgerichtet sein soll...

hier mein vorläufiger code-versuch:

HTML-Quellcode

<style type="text/css">
div#block {
background-color:#d10000;
width: 783px;
padding: 5;
border: none;
}
div#bild1 {
float: left;
border: none;
}
div#bild2 {
margin-left: 27.5em;
padding: 0 1em;
border: none;
}
div#bild3 {
margin-left: 27.5em;
padding: 0 1em;
border: none;
}
</style>
<div id="block">
<div id="bild1">
<img src="001.jpg" width="453" height="307" border="0" />
</div>
<div id="bild2">
<img src="002.jpg" width="317" height="207" alt="" border="0" />
</div>
<div id="bild3">
<img src="003.jpg" width="317" height="94" alt="" border="0" />
</div>
</div>

Alles anzeigen

________

70abc · 8. August 2007, 10:50

Hallo,

füg mal im CSS bei "bild2" und "bild3" auch ein "float:left" ein...

70abc

SoMeGuY · 8. August 2007, 10:53

Bitte benutz die Code-Tags, da das dann übersichtlicher wird. Und schreib was bei deinem Versuch nicht funktioniert.

Wenn du DIV-Bereiche überlappen lassen willst bauchst du die Attribute position und z-index, ein Bespiel findst du (wie immer) hier .

Elvis_M16 · 8. August 2007, 11:34

SeBa schrieb:

Bitte benutz die Code-Tags, da das dann übersichtlicher wird. Und schreib was bei deinem Versuch nicht funktioniert.

Wenn du DIV-Bereiche überlappen lassen willst bauchst du die Attribute position und z-index, ein Bespiel findst du (wie immer) hier .

hab das jetzt mit dem z-index versucht - leider ohne erfolg. das ganze sieht immer noch so aus:
[Blockierte Grafik: http://img2.imagebanana.com/img/4r6w1zds/thumb/bsp.jpg]

70abc · 8. August 2007, 11:49

Nicht die eleganteste Lösung, aber versuch's mal so:

Quellcode

<style type="text/css">
div#block {
background-color:#d10000;
width: 783px;
padding: 5;
border: none;
}
div#bild1 {
float: left;
border: none;
}
div#bilder{
float:left;
}
div#bild2 {
margin-left: 27.5em;
padding: 0 1em;
border: none;
}
div#bild3 {
margin-left: 27.5em;
padding: 0 1em;
border: none;
}
</style>
<div id="block">
<div id="bild1">
<img src="001.jpg" width="453" height="307" border="0" />
</div>
<div id="bilder">
<div id="bild2">
<img src="002.jpg" width="317" height="207" alt="" border="0" />
</div>
<div id="bild3">
<img src="003.jpg" width="317" height="94" alt="" border="0" />
</div>
</div>
</div>

Alles anzeigen

Wichtig dabei: "bild1" und "bilder" müssen von der Breite her auch wirklich in "block" rein passen, sonst hast du zwischen "bild1" und "bilder" einen Zeilenumbruch.

70abc

Elvis_M16 · 9. August 2007, 14:08

Hab's hinbekommen!
Danke für eure Hilfe!

Elvis

positionierung DIV

positionierung DIV

HTML-Quellcode

SeBa schrieb:

Quellcode

Teilen

Benutzer online 1

Tags