Darstellungs-Problem mit modulo

[hannes]

Hallo,
ich möchte gerne, dass beim echo nach drei Ergebnissen ein html-break eingefügt wird. Dabei dachte ich an modulo

  
$rest = $anzahl_thumbs % 3) // $anzahl_thumbs ist bekannt  
while($row = mysqli_fetch_array($res2)) {  
$thO = $row['thumbsOrdner'];  
echo "<img src='".$thO.">";  
}  
if ($rest + 3) {echo "<br>";}							   }  

funktioniert leider nicht.

Hat jemand eine Idee?

[Matthias Apsel]

Om nah hoo pez nyeetz, hannes!

if ($rest + 3) {echo "<br>";}    }

  
Schau ins Handbuch, wie der modulo-Operator aussieht.  
  
Das Element br soll für einen [expliziten Zeilenumbruch](http://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/br) verwendet werden, etwa in Gedichten. Nutze CSS für die Darstellung.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Spann und Spannung](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=S#spann).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[MudGuard]

Hi,

$rest = $anzahl_thumbs % 3) // $anzahl_thumbs ist bekannt

$rest hat jetzt einen der Werte 0, 1, 2

if ($rest + 3)

$rest ist bis hierhin nicht geändert worden, also immer noch 0, 1, oder 2.
3 dazu addiert ist 3, 4 oder 5.

Jeder dieser Werte wird im booleschen Kontext als true ausgewertet.

Abgesehen davon: wäre es nicht sinnvoller, einfach so viele Thumbnails nebeneinander darzustellen, wie in das übergeordnete Element reinpassen?

Der Zeilenumbruch erfolgt dann automatisch ...

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

Abgesehen davon: wäre es nicht sinnvoller, einfach so viele Thumbnails nebeneinander darzustellen, wie in das übergeordnete Element reinpassen?

Nicht unbedingt.

Auf jeden Fall gehört die Anzahl der nebeneinander passenden Elemente aber nicht ins Markup, also nicht per PHP ins HTML; sondern in die Darstellungsschicht, also ins CSS.

Media queries und :nth-child/:nth-of-type wären Mittel der Wahl.

Qapla'

[hannes]

... :nth-child/:nth-of-type wären Mittel der Wahl.

gute Idee!

Vielen Dank

[Gunnar Bittersmann]

@@hannes:

nuqneH

... :nth-child/:nth-of-type wären Mittel der Wahl.

gute Idee!

Eigentlich war „media queries“ der entscheidende Teil.

foo { width: 100% }                               /* mobile first */  
@media (min-width: …) { foo { width: 50% } }      /* 2 nebeneinander */  
@media (min-width: …) { foo { width: 33.333% } }  /* 3 nebeneinander */  
@media (min-width: …) { foo { width: 25% } }      /* 4 nebeneinander */

Dafür braucht man kein :nth-child/:nth-of-type.

Zum Feintuning setze ich ggfs. zusätzlich :nth-child/:nth-of-type ein, um keine Rundungsfehler wirksam werden zu lassen. (Bspw. das letzte Element in einer Zeile nicht links, sondern rechts floaten, damit es wirklich rechtsbündig ist).

Qapla'

[Der Martin]

Hallo,

Zum Feintuning setze ich ggfs. zusätzlich :nth-child/:nth-of-type ein, um keine Rundungsfehler wirksam werden zu lassen. (Bspw. das letzte Element in einer Zeile nicht links, sondern rechts floaten, damit es wirklich rechtsbündig ist).

tust du das wirklich? Dann bekommst du eine Lücke zwischen dem letzten und dem vorletzten Element jeder Zeile. Selbst wenn die einzelnen Elemente keine deutliche Abgrenzung zueinander bzw. zu ihrem Elternelement haben, sieht man zumindest die ungleichen Abstände.
Das sieht dann IMO auch nicht gut aus. Dann lasse ich doch lieber außen etwa Platz übrig ...

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Zum Feintuning setze ich ggfs. zusätzlich :nth-child/:nth-of-type ein, um keine Rundungsfehler wirksam werden zu lassen. (Bspw. das letzte Element in einer Zeile nicht links, sondern rechts floaten, damit es wirklich rechtsbündig ist).

tust du das wirklich? Dann bekommst du eine Lücke zwischen dem letzten und dem vorletzten Element jeder Zeile.

Ja, hab ich schon getan, so auf m.brands4friends.de (nur mit Anmeldung zu sehen). Es geht um Rundungsfehler, d.h. um einen Pixel. Ein Pixel Unterschied im Abstand zwischen vorletztem und letztem Element gegenüber Abstand zwischen übrigen Elementen fällt kaum auf. 1 Pixel Versatz der rechten Kante gegenüber vorigem/nachfolgendem Block auf der Seite schon eher.

Qapla'

[Der Martin]

Hi,

JEs geht um Rundungsfehler, d.h. um einen Pixel. Ein Pixel Unterschied im Abstand zwischen vorletztem und letztem Element gegenüber Abstand zwischen übrigen Elementen fällt kaum auf. 1 Pixel Versatz der rechten Kante gegenüber vorigem/nachfolgendem Block auf der Seite schon eher.

ach so, ich dachte, es ginge beispielsweise um drei Elemente in der Zeile, die lückenlos aneinandersitzen, und ein viertes, das dann auf Abstand sitzt. Du hattest nicht erwähnt, dass du sie mit margin und/oder padding gleichmäßig verteilen willst.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

ach so, ich dachte, es ginge beispielsweise um drei Elemente in der Zeile, die lückenlos aneinandersitzen, und ein viertes, das dann auf Abstand sitzt. Du hattest nicht erwähnt, dass du sie mit margin und/oder padding gleichmäßig verteilen willst.

Mea culpa. Ich wollte ursprünglich Abstände in die MQs einbauen, hab dann aus Gründen der Einfachheit drauf verzichtet. Am Ende fehlte das denn doch.

Qapla'