DIV schiesst über Box hinaus, warum?

stamfix

Hallo zusammen,

hab nur ne kleine Frage. Wenn ihr euch mein Code anschaut, dann weiss man eigentlich schon was ich will. Ich will eigentlich nur wissen, warum die eine DIV Box mit dem Text BILDGROSS immer rausschiesst. Hab schon viel versucht, aber irgentwie komm ich nicht drauf. Der untere Teil mit "Beschreibung Beschreibung Beschreibung Beschreibung ......." soll nach unten gedrückt werden.

PHP

<div style="position:relative; top:50px; left:200px; width:900px; border:solid 10px #00F">


<div style="border:solid 8px #999; width:800px;">
<div style="border:solid 3px #0FF;width:80px; height:55;">BILD1</div>
<div style="border:solid 3px #666;width:80px; height:55;">BILD2</div>
<div style="border:solid 3px #0FF;width:80px; height:55;">BILD3</div>
<div style="border:solid 3px #666;width:80px; height:55;">BILD4</div>
<div style="border:solid 3px #0FF;width:80px; height:55;">BILD5</div>
<div style="border:solid 3px #666;width:80px; height:55;">BILD6</div>
<div style="border:solid 3px #0FF;width:80px; height:55;">BILD7</div>
<div style="border:solid 3px #666;width:80px; height:55;">BILD8</div>
<div style="border:solid 3px #0FF;width:80px; height:55;">BILD9</div>
<div style="border:solid 3px #666;width:80px; height:55;">BILD10</div>


<div style="border:solid 2px #F00;width:600px; height:900px; position:absolute; top:0px; left:150px;">BILDGROSS</div>
</div>


<div style="border:solid 5px #C90;">Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung </div>
</div>

Alles anzeigen

Dodo

Zitat von stamfix

Hallo zusammen,

Hallo auch, und willkommen im Forum

Zitat von stamfix

Ich will eigentlich nur wissen, warum die eine DIV Box mit dem Text BILDGROSS immer rausschiesst.

Wie meinst du "rausschießen"? Horizontal? Vertikal? Anders?

Zitat von stamfix

Der untere Teil mit "Beschreibung Beschreibung Beschreibung Beschreibung ......." soll nach unten gedrückt werden.

Meinst du margin-top?

Bei deinem Problem wäre ein Link oder wenigstens ein Screenshot hilfreich.

stamfix

Hallo. Mit rausschiessen meine ich, das die DIV Box mit "BILDGROSS" in der Höhe nach unten rausschiesst. Wenn Du meinen Code im Editor einfügst und via Browser liesst, dann siehste was ich meine.
Hab aber sicherheitshalber nochmal ein Screen gemacht. Der rote DIV Rahmen, schiesst nach unten raus. Der untere Teil mit Beschreibung, soll eigentlich weiter nach unten gedrückt werden

Dodo

Das liegt daran, dass du absolute Positionierung verwendest.
Du hast zwei Möglichkeiten:

1) Dem Div mit der Beschreibung folgende Angaben geben:
position:aboslute;
top:904px;

2) (hier die bessere Methode) Ein fließenden Layout mit "float" aufbauen.

stamfix

Der DIV Box die absolute Position geben geht leider nicht, da es variabel sein soll. HIntergrund ist folgender, ich will eine Afterbuy eBay Bildergalerie bauen. Wo jetzt Bild 1 - 10 steht, soll später durch Afterbuy Variablen ersetzt werden, so das an der Stelle auch das Bild erscheint.
Das ganze wird mit IF Abfragen gemacht, sprich, nur wenn Bild 10 in Afterbuy vorhanden ist, soll auch Bild10 angezeigt werden. Bild1-10 sind die Thums am Ende, mit Mouseover soll dann das BILDGROSS ausgetauscht werden. Und da die Bilder nicht immer alle die gleiche höhe haben, sollte der untere Bereich, also die Beschreibung, sich jedesmal an die neue Höhe anpassen. Hab das mit Float gerade versucht, doch irgentwie will das auch nicht so ganz.

Dodo

Vielleicht hilft dir das hier:

http://www.thestyleworks.de/tut-art/layout_div_2.shtml

Grevas

HTML

<div style="position:relative; top:50px; left:200px; width:900px; border:solid 10px #00F"><div style="border:solid 8px #999; width:800px;"><div style="border:solid 2px #F00;width:600px; height:900px; float:right; ">BILDGROSS</div><div style="width: 200px;"><div style="border:solid 3px #0FF;width:80px; height:55;">BILD1</div><div style="border:solid 3px #666;width:80px; height:55;">BILD2</div><div style="border:solid 3px #0FF;width:80px; height:55;">BILD3</div><div style="border:solid 3px #666;width:80px; height:55;">BILD4</div><div style="border:solid 3px #0FF;width:80px; height:55;">BILD5</div><div style="border:solid 3px #666;width:80px; height:55;">BILD6</div><div style="border:solid 3px #0FF;width:80px; height:55;">BILD7</div><div style="border:solid 3px #666;width:80px; height:55;">BILD8</div><div style="border:solid 3px #0FF;width:80px; height:55;">BILD9</div><div style="border:solid 3px #666;width:80px; height:55;">BILD10</div></div><div style="clear: both;"></div> </div> <div style="border:solid 5px #C90;">Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung </div></div>

oder noch besser:

HTML

<style>.clear { clear: both; }#main { position:relative; top:50px; left:200px; width:900px; border:solid 10px #00F; }#wrapper { border:solid 8px #999; width:800px; }#bigpic { border:solid 2px #F00;width:600px; height:900px; float:right; }#images { width: 200px; }#images div { border:solid 3px #0FF;width:80px; height:55; }#images div.second { border-color: #666; }#footer { border:solid 5px #C90; }</style>...<div id="main">  <div id="wrapper">    <div id="bigpic">BILDGROSS</div>    <div id="images">      <div>BILD1</div>      <div class="second">BILD2</div>      <div>BILD3</div>      <div class="second">BILD4</div>      <div>BILD5</div>      <div class="second">BILD6</div>      <div>BILD7</div>      <div class="second">BILD8</div>      <div>BILD9</div>      <div class="second">BILD10</div>    </div>    <div class="clear"></div>    <div id="footer">Beschreibung Beschreibung  Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung  Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung  </div>  </div></div>

Tags