✔ Problem mit Smarty um jeweils eine Zeile durchgehend mit 3 Bildern aufzufüllen.

[Despoiler]

Hallo und gleich zu Beginn, vielen Dank für eure Hilfe.

Ich darf mal wieder ein kleines Problem mein Eigen nennen.

Und zwar habe ich versucht meine 3D Gallery mit Hilfe von Smarty etwas umzubauen. Das klappt auch alles wunderbar, die Bilder erscheinen und es befinden sich immer 3 Bilder in einer Zeile. Genauso wie ich es wollte.

Jedoch werden mir bereits nach der 3. Zeile nur noch zwei Bilder in der Zeile angezeigt. Danach geht es wieder richtig mit 3 weiter. Dann folgt nur noch eines.

Ich habe einen Screenshot mit angehangen.

Hier mein Code, zuerst der aus der portfolio.php

$images = mysql_query("SELECT * FROM images ORDER BY ID DESC"); 

while($row = mysql_fetch_assoc($images)) {  
	$data[] = $row;
}

$smarty->assign('data',$data);
$smarty->display("header.tpl");
$smarty->display("portfolio.tpl");
$smarty->display("footer.tpl");

portfolio.tpl

<div class="container_images">
{foreach from=$data item=dat}
	<div class="cont_single">
		<div class="left"><img src="{$dat.Thumbnail}" /></div>
		<div class="img_title"><img src="{$dat.ImageText}" /></div>
		<div class="img_desc text_small"><span class="intro">.:</span> Ein Beispieltext zur Beschreibung.</div>
	</div>
{/foreach}
</div>

CSS

.container_images		{width:732px; float:left;}
.cont_single			{float:left; width:239px; margin-right:5px;}
.left				{float:left;}
.img_title			{width:239px; margin-top:10px; margin-bottom:5px; float:left;}
.img_desc			{width:239px; margin-top:5px; margin-bottom:5px; float:left;}

 

[nepda]

Deine CSS-Berechnungen sind sehr exakt (sollte nach meinem Wissen funktionieren). In deinem Fall würde ich einfach mal versuchen ein paar Pixel Spielraum zu lassen. Ich weiß nicht ob das hilft, evtl. aber ein Versuch wert

 

[djbergo]

toll jetzt darf ich mein Beitrag wieder editieren ^^ Genau das wollt ich auch schreiben.

Nimm am besten 10x und 10y Pixel als Bufferzone.

 

[Despoiler]

Hallo nepda, hallo djbergo!

Ich habe euren Ratschlag ausprobiert, es bleibt leider beim alten.
Ich frage mich nur, warum er richtig beginnt und dann einfach eine Zelle auslässt.

Genauso wenig verstehe ich, warum er die Bilder rechtsbündig ausrichtet zumal ich ja float:left benutze.

Vielleicht sollte ich doch lieber Tabellen benutzen! ;-] neeee

 

[djbergo]

nene bleib mal lieber bei deinem Jetzigen.

Also so weit ich weiß wird immer eine Zeile ausgelassen, wenn die breite zu 100% ausgenutzt wird und dahinter ein leerzeichen steht. Also z.b.  

Oder aber du hast den rand iwie zu klein fixiert, was aber eig. laut deinem Quellcode nicht sein kann.

Probiers einfach mal aus.

Sonst würd mir jetzt nichts einfallen, was es sein kann.

 

[Despoiler]

OK djbergo, ich bleibe bei meinen div's!

Ich bin jetzt mal Stück für Stück vorgegangen und habe jede Zelle mal einzeln rausgelöscht, nur um zu sehen was passiert.

Bis ich zu der hier kam:

<div class="img_title"><img src="{$dat.ImageText}" /></div>

Soabld ich diese weglasse zeigt er alles richtig an.
Was hab ich gemacht. Ich habe sie mal um die Werte width und height erweitert.

<div class="img_title"><img src="{$dat.ImageText}" width="239" height="34"/></div>

Und siehe da, es wird alles richtig angezeigt. Sehr sehr komisch...
Das ist doch normalerweise egal, oder?

 

[djbergo]

im normalfall schon.

Die höhe und breite gibt man im regelfall nur an um:

1. Das Bild zu verkleinern
2. Die Seite schneller laden zu lassen bei großen Bildern, sodass erst die Seite geladen wird und dann das Bild
3. Um bei xhtml das Template nicht zu zerstören.

Ich denke mal, dass du irgendwo in deiner Style Datei einen Fehler hast.

 

[Despoiler]

Neeeee ich hab da keinen Fehler drin

Jedenfalls hast du mich erst darauf aufmerksam gemacht, was ich jetzt versucht habe. Fettes Merci dafür!

Jetzt kann ich mal weiter basteln! Dankeschön und einen ruhigen letzten Weihnachtsfeiertag!