Über ein Objekt iterieren

Hallo allerseits!

Ich steh gerade etwas auf dem Schlauch... ich versuche mal mein Problem zu schildern:

Ich habe von Hand einen HTML-Mockup erstellt, der eine bestimmte Struktur haben muss, damit die Javascript-Animationen so funktionieren wie vorgegeben. Der Mockup ist unter dieser URL zu finden.

Die Daten ziehe ich aus einer DB und baue daraus einen Baum, der hierarchisch aufgebaut ist:

¦- Kategorie1
¦  ¦- Projekt1
¦  ¦  ¦- Credits
¦  ¦  ¦   ¦- Value
¦  ¦  ¦
¦  ¦  ¦-Sets
¦  ¦     ¦- Set1
¦  ¦         ¦- Images
¦  ¦            ¦- Image1
¦  ¦            ¦- Image2
¦  ¦
¦  ¦- Projekt2
¦  ¦- Projekt3
¦
¦- Kategorie2
   ¦- Projekt1
<!-- und so weiter... -->

Die gewünschte HTML-Struktur hat gewisse Anforderungen:
- die Länge der Projekttitel wird beim Iterieren addiert
- wird eine gewisse Gesamtlänge (45 Zeichen) erreicht, sollen die Projekte auf eine neue "Zeile" (siehe Mockup!)

Die HTML-Struktur sollte dann folgendermassen aussehen:

                <div id="projects">
                    <p class="projects_headline" id="spaces">Spaces</p>
                    <div class="project_titles">
                        <div id="line1_spaces">
                            <div class="project_title" id="titles1_spaces">
                                <a class="title" id="t2">Lichtkissen</a>
                                <a class="title" id="t4">Art Lobby</a>
                                <a class="title" id="t5">Kari</a>
                                <a class="title" id="t7">Dreispitzhalle</a>
                                <a class="title" id="t6">Hull</a>
                            </div>
                            <div class="project_preview" id="previews1_spaces">
                                <img class="preview" id="p2" src="images/images/preview_2.jpg" />
                                <img class="preview" id="p4" src="images/images/preview_4.jpg" />
                                <img class="preview" id="p5" src="images/images/preview_5.jpg" />
                                <img class="preview" id="p7" src="images/images/preview_7.jpg" />
                                <img class="preview" id="p6" src="images/images/preview_6.jpg" />
                            </div>
                            <div class="project_content" id="content1_spaces">
                                <div class="content-item" id="c2">
                                    <!-- Projektbeschreibung und -bilder -->
                                </div>
                                <div class="content-item" id="c4">
                                    <!-- Projektbeschreibung und -bilder -->
                                </div>
                                <div class="content-item" id="c5">
                                    <!-- Projektbeschreibung und -bilder -->
                                </div>
                                <div class="content-item" id="c7">
                                    <!-- Projektbeschreibung und -bilder -->
                                </div>
                                <div class="content-item" id="c6">
                                    <!-- Projektbeschreibung und -bilder -->
                                </div>
                            </div>
                        </div>
                        <div id="line2_spaces">
                            <div class="project_title" id="titles2_spaces">
                                <a class="title" id="t8">Artshop 08</a>
                                <a class="title" id="t9">Cocoon</a>
                            </div>
                            <div class="project_preview" id="previews2_spaces">
                                <img class="preview" id="p8" src="images/images/preview_8.jpg" />
                                <img class="preview" id="p9" src="images/images/preview_9.jpg" />
                            </div>
                            <div class="project_content" id="content2_spaces">
                                <div class="content-item" id="c8">
                                    <!-- Projektbeschreibung und -bilder -->
                                </div>
                                <div class="content-item" id="c9">
                                    <!-- Projektbeschreibung und -bilder -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="projects_headline" id="objects">Objects</p>
                    <div class="project_titles">
                        <div id="line1_objects">
                            <div class="project_title" id="titles1_objects">
                                <a class="title" id="t1">Schlitten</a>
                                <a class="title" id="t3">Artzappening</a>
                            </div>
                            <div class="project_preview" id="previews1_objects">
                                <img class="preview" id="p1" src="images/images/preview_1.jpg" />
                                <img class="preview" id="p3" src="images/images/preview_3.jpg" />
                            </div>
                            <div class="project_content" id="content1_objects">
                                <div class="content-item" id="c1">
                                    <!-- Projektbeschreibung und -bilder -->
                                </div>
                                <div class="content-item" id="c3">
                                    <!-- Projektbeschreibung und -bilder -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Nun kommt der PHP-Teil, der bis zu einem gewissen Punkt das ausgibt, was ich möchte, aber eben nur zu einem gewissen Punkt. Ich habe schön sorgfältig von oben her angefangen, also zuerst über Kategorien, dann über Projekte iteriert unter Berücksichtigung der oben genannten Anforderungen. Der folgende Code erzeugt mir die gewünschte HTML-Struktur noch ohne preview-div und ohne content-div.

PHP-Code:

                <div id="projects">
                <?php

                $length = 0;
                $limit = 45;
                $loop = 1;

                // loop through categories
                foreach ($projects_tree as $category)
                {

                ?>
                    <p class="projects_headline" id="<?php echo strtolower($category->Category_Name_DE); ?>"><?php echo $category->Category_Name_DE; ?></p>
                        <div class="project_titles">
                            <div id="line<?php echo $loop . '_' . strtolower($category->Category_Name_DE); ?>">
                                <div class="project_title" id="titles<?php echo $loop . '_' . strtolower($category->Category_Name_DE); ?>">
                <?php
                    // loop through projects
                    foreach ($category->Projects as $project)
                    {
                        // add project title length
                        $length = $length + strlen($project->Title_DE);

                        if ($length - $limit < 0)
                        {
                        ?>
                                    <a class="title" id="t<?php echo $project->ID_Project; ?>"><?php echo $project->Title_DE; ?></a><img class="preview" id="p<?php echo $project->ID_Project; ?>" src="<?php echo base_url(); ?>/images/images/preview_<?php echo $project->ID_Project; ?>.jpg" />
                        <?php

                        }

                        else
                        {
                            // reset line length
                            $length =  0 + strlen($project->Title_DE);
                            $loop++;
                        ?>
                                </div>
                            </div>
                            <div id="line<?php echo $loop . '_' . strtolower($category->Category_Name_DE); ?>">
                                <div class="project_title" id="titles<?php echo $loop . '_' . strtolower($category->Category_Name_DE); ?>">
                                    <a class="title" id="t<?php echo $project->ID_Project; ?>"><?php echo $project->Title_DE; ?></a><img class="preview" id="p<?php echo $project->ID_Project; ?>" src="<?php echo base_url(); ?>/images/images/preview_<?php echo $project->ID_Project; ?>.jpg" />
                        <?php

                        }
                    }

                    // reset total length and loop count
                    $length =  0;
                    $loop = 1;

                    ?>
                                </div>
                            </div>
                        </div> <!-- end class="project_titles" -->
                    <?php
                }

                ?>
                </div>

Bei diesen zwei Elementen (preview und content) habe ich grosse Mühe. Ich müsste quasi innerhalb des foreach-Blocks nochmals über dasselbe Array iterieren können. Wie muss ich oben stehenden PHP-Code ändern, damit ich am Schluss dieselbe HTML-Struktur habe wie beim Mockup? Also mit einem Preview-Container, der alle Vorschaubilder der Projekte auf derselben Zeile enthält, sowie einem Content-Container, der alle Projekt-Beschreibungen und -bilder der zugehörigen Projekte auf derselben Zeile enthält.

Seh ich den Wald vor lauter Bäume nicht oder habe ich die falsche Herangehensweise gewählt?

Falls mir hier jemand auf die Sprünge helfen könnte, wäre ich sehr sehr dankbar!

Beste Grüsse,
Greg

Also ich an deiner Stelle würde zu aller erst diese DIV-Suppe in den Abfluss schütten, und mal vernünftiges HTML generieren.

Bitte den Code umbrechen.