Problem bei Verschachtelung von Divs
JonnyOhneha
- css
0 JonnyOhneha1 Marc
Ich habe ein Problem mit der Verschachtelung von Divs! Ich arbeite an einer Fotogallerie mit mehreren Alben, die je nach Album die nötigen Bilder ausgibt - was auch bestens funktioniert.
Allerdings will ich das Ganze auch noch in einem "großen" Div-Container und die Gallerie auf der Seite zentrieren zu können! Und hier fangen die Probleme an:
Das ist der Code des PhP-Skripts:
<div class="gallery">
<?php
include $pfad."Infos.txt";
for($i=10; $i<=$piczahl+10; $i++){?>
<div class="thumb"><img src=<?php echo """.$pfad."Thumbs/Thumb".$i.".jpg""; ?>></div>
<?php
}?>
</div>
der Quell-Code im Browser sieht dann wie folgt aus:
<div class="gallery">
<div class="thumb"><img src="..."></div>
<div class="thumb"><img src="..."></div>
<div class="thumb"><img
<div class="thumb"><img src="..."></div>
<div class="thumb"><img src="..."></div>
</div>
</div>
insofern also noch alles eigentlich so, wie ich es mir vorgestellt habe.
Hier noch die entsprechenden Style Sheets:
DIV.thumb{
float:left;
margin: 10px;
}
DIV.gallery{
border:4px solid black;
width: 410px;
height: auto;
margin: 0px 10px 0px 10px;
text-align:center;
}
Das Ergebnis ist aber nicht unbedingt das, was ich erwartet habe:
http://www.oxp.de/view/pic/39798/med_713186.jpg
Der "Hauptcontainer" wird also auf einen Bereich mit 0px Höhe reduziert - und die eigentlich enthaltenen Elemente werden außerhalb angezeigt.
Das Ganze treibt mich echt schon in den Wahnsinn! Ich habe schon alles versucht, was mir eingefallen ist - aber ich verstehe nicht, wo der Fehler liegt! Ich bin noch ziemlich frisch, was CSS und HTML angeht und wäre wirklich dankbar, wenn mir jemand helfen könnte!
Was auch noch interessant ist:
wenn man Text in den Div-Container einfügt, und zwar so:
<div class="gallery">
<?php
include $pfad."Infos.txt";
for($i=10; $i<=$piczahl+10; $i++){?>
<div class="thumb"><img src=<?php echo """.$pfad."Thumbs/Thumb".$i.".jpg""; ?>></div>
<?php
}?>
text
</div>
wird der absurderweise sehr wohl im DIV-Container angezeigt.
http://www.oxp.de/view/pic/39798/med_713187.jpg
Hallo zusammen,
Ich habe ein Problem mit der Verschachtelung von Divs! Ich arbeite an einer Fotogallerie mit mehreren Alben, die je nach Album die nötigen Bilder ausgibt - was auch bestens funktioniert.
Allerdings will ich das Ganze auch noch in einem "großen" Div-Container und die Gallerie auf der Seite zentrieren zu können!
der Quell-Code im Browser sieht dann wie folgt aus:
<div class="gallery">
<div class="thumb"><img src="..."></div>
<div class="thumb"><img src="..."></div>
<div class="thumb"><img
<div class="thumb"><img src="..."></div>
<div class="thumb"><img src="..."></div>
</div>
</div>
Wozu die vielen Divs um jedes Bild?
insofern also noch alles eigentlich so, wie ich es mir vorgestellt habe.
Hier noch die entsprechenden Style Sheets:DIV.thumb{
float:left;
margin: 10px;
}DIV.gallery{
border:4px solid black;
width: 410px;
height: auto;
margin: 0px 10px 0px 10px;
text-align:center;
}Das Ergebnis ist aber nicht unbedingt das, was ich erwartet habe:
http://www.oxp.de/view/pic/39798/med_713186.jpg
Eine echte Seite mit Quelltext wäre besser...
Der "Hauptcontainer" wird also auf einen Bereich mit 0px Höhe reduziert -
Das stimmt nicht.
und die eigentlich enthaltenen Elemente werden außerhalb angezeigt.
Du solltest Dich mal mit der grauen Theorie von floats auseinandersetzen - wieso floatest Du div.thumb überhaupt?
Das Ganze treibt mich echt schon in den Wahnsinn! Ich habe schon alles versucht, was mir eingefallen ist - aber ich verstehe nicht, wo der Fehler liegt!
RTFM! - Zum Beispiel das hier: < http://css-technik.de/css-examples/219_9/>
Ich bin noch ziemlich frisch, was CSS und HTML angeht und wäre wirklich dankbar, wenn mir jemand helfen könnte!
Ich denke, wenn Du die floats verstanden hast, wirst Du sehen, dass sie dir in diesem Fall nicht weiterhelfen (jedenfalls nicht auf den Contanier mit der Klasse thumbs bezogen)
Viele Grüße,
Marc.
Stimmt^^ Danke, für den Tip - die div.thumbs kann ich weglassen - wieso habe ich die überhaupt eingefügt!? Wie gesagt: HTMl-Neuling!
Die Seite ist leider noch nicht online, deshalb kann ich sie auch nicht herzeigen!
Aber es funktioniert jetzt, so wie ich es wollte, also danke! und danke für den link!