Ausgabe ändern: Kategorien neben- statt untereinander

Klari22 · 2. Oktober 2009, 12:35

HuHu,

Unzwar habe ich ein kleines script mit Smarty realisiert, bin mit der Ausgabe aber noch nicht ganz zufrieden.

Unzwar sieht es so aus:

Kategorie:
-- Thema
-- Thema

Kategorie 2:
--Thema
--Thema

Gerne hätte ich es

Kategorie: Kategorie 2:
-- Thema -- Thema
-- Thema -- Thema

Kategorie 3: Kategorie 4:
-- Thema -- Thema
-- Thema -- Thema

Also anstatt die Kategorien untereinander, immer 2 nebeneinander. bsp: gameserveradmin.de/artikel/
Komme aber nicht weiter.
Habt ihr da evtl eine Lösung?

Hier mein HTM Code

Quellcode

{foreach from=$CATDATA item=category}
<div class="title"><a href="index.{$EXT}?mode=kbcat&cat_id={$category.ID}">{$category.title}</a></div>
<div class="description">{$category.description}</div> <br />
{/foreach}

Torben Brodt · 4. Oktober 2009, 16:41

Lass die Div Container floaten (float:left)
und gib dem umgebenden Container eine feste Breite.

Dann hast du folgende Anordnung
1 2
3 4
5 6

oder willst du lieber...
1 4
2 5
3 6

Dann kommst du nicht umher die Anzahl an Einträgen zu zählen. Und beim erreichen der Hälfte einen neuen Container zu beginnen.

Klari22 · 16. November 2009, 18:17

Leider wird dadurch alles verzogen und sieht unschön aus. Selbst mit CSS lässt sich da nix anpassen

Dominic · 17. November 2009, 13:35

Doch Doch - das geht schon. Zeig mal bitte den Quellcode (CSS und smarty tpl)

Gruß,
Nick

Klari22 · 19. November 2009, 11:56

Huhu,

Also das Smarty Tamplate

Quellcode

{foreach from=$CATDATA item=category}
<div class="kbbase_cat_title"><a href="index.{$EXT}?mode=kbcat&cat_id={$category.ID}">{$category.title}</a></div>
<div class="kbbase_cat_description">{$category.description}</div><br />
{/foreach}

Und der CSS Code

Quellcode

.kbbase_cat_title {
font-size:14px;
font-weight:bold;
text-decoration:underline;
}
.kbbase_cat_description {
font-size:10px;
}

Dominic · 19. November 2009, 14:30

Quellcode

{foreach from=$CATDATA item=category}
<div style="float:left; width:45%;">
<div class="kbbase_cat_title"><a href="index.{$EXT}?mode=kbcat&cat_id={$category.ID}">{$category.title}</a></div>
<div class="kbbase_cat_description">{$category.description}</div>
</div>
{/foreach}

Das sollte ein guter Ansatz sein. Eventuell musst du noch ein paar CSS-Eigenschaften anpassen/hinzufügen aber das sollte es dann auch sein.

Klari22 · 21. November 2009, 11:43

HiHo,

Es klappt perfekt.
Ich hatte alle div floaten lassen und nen extra div um die foreach gelegt mit eier festen breite.

Ausgabe ändern: Kategorien neben- statt untereinander

Ausgabe ändern: Kategorien neben- statt untereinander

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Benutzer online 1

Tags