Tabellenzeile automatisch erzeugen

[Mosch5]

Hallo zusammen,

ich habe ein Problem, das ich trotz Googelei nicht lösen konnte. Es wäre nett, wenn mir jemand helfen könnte.

Ein Shop (xt:commerce) generiert eine Produktliste automatisch. Die einzelnen Produktbilder sollen tabellarisch dargestellt werden - 8 Bilder pro Zeile, unendlich viele Zeilen.
Problem: Es gelingt mir nicht, dass ab dem 9. Bild eine neue Zeile erzeugt wird, der Shop listet alle Bilder nebeneinander und das sprengt das Layout.

Im Folgenden findet Ihr den "Rohling" der Tabelle, um die es geht.

<table width="100%" border="0" cellpadding="0" cellspacing="2" style="border-top: 0px solid; border-color: #ffffff;">
 <tr>
 {foreach name=aussen item=module_data from=$module_content}
  <td align="left" style="border-bottom: 0px solid; border-color: #cccccc;">{if $module_data.PRODUCTS_IMAGE!=''}<a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>{/if}
  </td>
  {/foreach}
 </tr>
</table>

Hat irgendjemand von Euch eine Idee, wie man das automatisieren könnte?
Für Eure Hilfe wäre ich sehr sehr dankbar!!!

Besten Dank vorab.

Mosch5

[LX]

Hallo!

Warum muss es denn eine Tabelle sein?

Nimm lieber eine ul-Liste, deren li-Tags Du mittels CSS-float zu einer Struktur machst, die ab einer festen Breite umbricht.

Gruß, LX

[suit]

Warum muss es denn eine Tabelle sein?

der quelltext der xt:commerce-templates ist eine frechheit - da hauts dir die watschen der reihe nach ins gesicht ;) das zu ändern ist eine lebensaufgabe

Nimm lieber eine ul-Liste, deren li-Tags Du mittels CSS-float zu einer Struktur machst, die ab einer festen Breite umbricht.

da stimme ich dir zu, aber siehe oben :D

[Peter Pan]

Hi!

ich habe ein Problem, das ich trotz Googelei

Ja ist denn scho' Ostern?
;)

Dein Template enthält die Definition _einer_ Tabellenzeile und darin wird eine Schleife durchlaufen - also landen die x Bilder in einem neuen td-Element inner  _dieser einen_ Zeile.

Die Schleife sollte vor dem Generieren der Zeile beginnen - mittels Modulo-Operator kannst Du dann ermitteln, ob die aktuelle Anzahl der Bilder größer 8 ist und dann eine neue Zeile erzeugen.
Innerhalb der einzelnen Zeilen verfährst du dann wie bisher - also mit einer zweiten, inneren Schleife - ggf. bis zum Zeilenende fehlende table-data-Elemente müssen dann  noch erzeugt werden, um kein ung(ültig|lückich)es HTML zu bekommen.

off:PP

[Joachim]

Hi,

{foreach name=aussen item=module_data from=$module_content}
  <td align="left" style="border-bottom: 0px solid; border-color: #cccccc;">{if $module_data.PRODUCTS_IMAGE!=''}<a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>{/if}
  </td>
  {/foreach}

jaja, smarty...

Mit Modulo solltest Du weiterkommen, Du musst Dir allerdings am Schluss die Restmenge merken, um fehlende Tabellenzellen aufzufüllen. Den letzten Loop bekommst Du mit
{if $smarty.foreach.aussen.last}

<table>
<tr>
    {foreach name=aussen item=module_data from=$module_content}
        {if $smarty.foreach.aussen.iteration%9 == 0}
            </tr>
            <tr>
        {/if}
        <td>
            {if $module_data.PRODUCTS_IMAGE!=''}
                <a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>
            {/if}
        </td>
    {/foreach}
</tr>
</table>

Mehr gibts da Smarty

Ich schliesse mich allerdings meinen Vorrednern an, dass ein Table eine suboptimale Konstruktion ist- Eine Liste mit gefloateten li's ist besser, siehe meiene Galerie.

Gruesse, Joachim

[Joachim]

Hi,

{foreach name=aussen item=module_data from=$module_content}
        {if $smarty.foreach.aussen.iteration%9 == 0}

muss mich hier korrigieren (jaja, nicht Fernsehen schauen _und_ posten)
Besser Modulo 8 am Ende der Schleife prüfen und bei 0 </tr><tr> anhängen - vorausgesetzt es ist nicht der letzte Durchlauf. Der braucht dann aber eh eine Sonderbehandlung, um ggf fehlende Zellen aufzufüllen...

Gruesse, Joachim

[Mosch5]

Hallo zusammen,

erstmal vielen Dank für Eure Hilfe!!!

Ich habe das Problem wie folgt gelöst - funktioniert eigentlich auch hervorragend, jedoch ist beim Browservergleich ein kleines "Ärgernis" aufgetaucht - vielleicht hat nochmal jemand eine Idee.

Im FF, Chrome, Opera sieht alles perfekt aus - alle Bilder stecken in einem überall gleich breiten Gitter. Nur der IE macht Probleme: Er verpasst den Bildern einen Abstand von 1px zum unteren Zellenrand.

Keine Ahnung warum oder wie ich das abstellen könnte!?

Für Eure Hilfe wäre ich Euch erneut sehr dankbar!!!

Hier der Code:

{config_load file="$language/lang_$language.conf" section="index"}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr valign="top">
    <td class="contentsTopics">{$CATEGORIES_NAME}
    </td>
  </tr>
</table>

<table align="left" width="580px" border="0" cellpadding="1" cellspacing="0">
 <tr>
 {foreach name=aussen item=module_data from=$module_content}
  {php} $col++;
  {/php}
  <td align="left" width="72" >{if $module_data.PRODUCTS_IMAGE!=''}<a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>{/if}
  </td>
    {php}

if ($col>=8) {
  $col=0;
  echo '</tr><tr>';
  }
  {/php}
  {/foreach}
 </tr>
</table>

Besten Dank vorab!

Viele Grüße

Mosch5

P.S.: Über den Tabellenkonstruktion von xt:commerce müssen wir nicht philosophieren - so ist es nur der kürzeste Weg zum Ziel ;-)

[EKKi]

Mahlzeit Mosch5,

Im FF, Chrome, Opera sieht alles perfekt aus - alle Bilder stecken in einem überall gleich breiten Gitter. Nur der IE macht Probleme: Er verpasst den Bildern einen Abstand von 1px zum unteren Zellenrand.

Wenn NUR der IE Probleme macht, sieht das sehr nach dem http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug@title=Box-Model-Fehler aus, Du solltest Deine Seiten also validieren.

Hier der Code:

Wenn Du Probleme mit unterschiedlichen Browsern hast, ist ausschließlich HTML (und ggf. clientseitiger Code wie Javascript) relevant (egal ob statisch oder z.B. dynamisch per PHP erzeugt). Absolut sinnfrei ist es jedoch, serverseitigen (PHP-)Code zu posten. Lass das also bitte sein und zeige stattdessen den Code, der im Browser ankommt oder gib einen Link zu einer Beispielseite an.

MfG,
EKKi

[Mosch5]

Hallo Ekki,

besten Dank für Deine Hilfe.
Also beim ausgegebenen Code ist nichts zu sehen, dennoch ist der Abstand da.
Hier kannst Du es Dir ansehen.
Du wirst feststellen, dass der Abstand zwischen der ersten und der zweiten Zeile im IE um einen Pixel größer ist, als im FF.

Besten Dank vorab.

Viele Grüße

Mosch5

[EKKi]

Mahlzeit Mosch5,

Hier kannst Du es Dir ansehen.

Und hier kannst Du Deinen Code validieren.

Du wirst feststellen, dass der Abstand zwischen der ersten und der zweiten Zeile im IE um einen Pixel größer ist, als im FF.

Du wirst feststellen, dass "1 Error, 3 warning(s)" enthalten sind ... und jede Fehleranzahl > 0 sorgt für ungültigen Code, bei dem der Browser erraten muss, was genau Du meinst. Beseitige also erst die Fehler - anschließend kann man gerne über Pixelfehler und sonstiges philosophieren ... :-)

MfG,
EKKi