# Forum -> Liste



## Alice (3. Mai 2014)

Hallo.

Ich überlege mir aktuell wie ich am besten meine Foren-Startseite (Forum-Liste) gestalten sollte. Ich möchte die Foren nicht "klassisch" untereinander anordnen, sondern nebeneinander.

*1. Möglichkeit:* Klassische Tabellen
Nicht mehr Zeitgemäß.

*2. Möglichkeit:* Ul -> Li -> Float
Das würden die meisten Browser unterstützen.

*3. Möglichkeit:* Ul -> Li -> Tabelle (CSS)
Das würden einige Browser nicht unterstützen.

*4. Möglichkeit:* DIV -> Tabelle (CSS)
Das würden einige Browser nicht unterstützen.

1.) Welche Variante würdet ihr bevorzugen?
2.) Weitere Möglichkeiten?


----------



## SpiceLab (3. Mai 2014)

Die zweite, weil in ihrer HTML-Struktur auch ohne weiteres verschachtelbar.

Neben der *float*-Eigenschaft gibt's da noch *display:inline* und *display:inline-block*, um (Block-)Elemente nebeneinander auszurichten.


----------



## Alice (3. Mai 2014)

Kannst Du mir ein Beispiel zeigen?


----------



## SpiceLab (3. Mai 2014)

Alice hat gesagt.:


> Kannst Du mir ein Beispiel zeigen?


Wofür genau?


----------



## Alice (3. Mai 2014)

Na wie das mit display:inline und display:inline-block aussehen müsste. 

Aktuell hab ich es so und bin nicht zufrieden.


```
<ol>
   <li>
      <ol>
         <header>Foren Header 1</header>
         <li>Sub-Forum</li> (50% und Float Left)
         <li>Sub-Forum</li> (50% und Float Left)
         <li>Sub-Forum</li> (50% und Float Left)
         <li>Sub-Forum</li> (50% und Float Left)
      </ol>
      <ol>
         <header>Foren Header 2</header>
         <li>Sub-Forum</li> (50% und Float Left)
         <li>Sub-Forum</li> (50% und Float Left)
         <li>Sub-Forum</li> (50% und Float Left)
         <li>Sub-Forum</li> (50% und Float Left)
      </ol>
      <ol>
         <header>Foren Header 3</header>
         <li>Sub-Forum</li> (50% und Float Left)
         <li>Sub-Forum</li> (50% und Float Left)
         <li>Sub-Forum</li> (50% und Float Left)
         <li>Sub-Forum</li> (50% und Float Left)
      </ol>
   </li>
</ol>
```

Die Inhalte in den Foren lassen sich nur sehr schwer positionieren und man muss es wirlich für jeden Browser einzeln tun.


----------



## SpiceLab (3. Mai 2014)

Alice hat gesagt.:


> Na wie das mit display:inline und display:inline-block aussehen müsste.


Wenn's weiter nichts ist 

```
li {display:inline-block}
```


----------



## Alice (3. Mai 2014)

```
<ol>
   <li>
      <ol style="width:100%;list-style:none;">
         <li style="width:50%;display:inline-block;list-style:none;padding:0;margin:0;">Sub-Forum</li>
         <li style="width:50%;display:inline-block;list-style:none;padding:0;margin:0;">Sub-Forum</li>
         <li style="width:50%;display:inline-block;list-style:none;padding:0;margin:0;">Sub-Forum</li>
         <li style="width:50%;display:inline-block;list-style:none;padding:0;margin:0;">Sub-Forum</li>
      </ol>
   </li>
</ol>
```

So sollte es aussehen:
Sub-Forum Sub-Forum
Sub-Forum Sub-Forum

So sieht es aus:
Sub-Forum
Sub-Forum
Sub-Forum
Sub-Forum

Bin nicht der erste der das entdeckt...

http://stackoverflow.com/questions/13879927/css-issue-why-4-25-is-not-100


----------



## SpiceLab (3. Mai 2014)

Alice hat gesagt.:


> Bin nicht der erste der das entdeckt...
> 
> http://stackoverflow.com/questions/13879927/css-issue-why-4-25-is-not-100


Und weiter? Die Lösungen werden dort doch auch genannt.


----------



## Alice (3. Mai 2014)

Ja, sind mir aber zu "dirty". 

Das sind doch keine Lösungen...


----------



## SpiceLab (3. Mai 2014)

Alice hat gesagt.:


> Ja, sind mir aber zu "dirty".
> 
> Das sind doch keine Lösungen...


Soso, *float:left* ist "dirty"


----------



## Alice (3. Mai 2014)

Das habe ich wohl überlesen.

Muss das dann nicht auch wieder gecleart werden?


----------



## SpiceLab (3. Mai 2014)

Alice hat gesagt.:


> Das habe ich wohl überlesen.
> 
> Muss das dann nicht auch wieder gecleart werden?


Mitunter ja.


----------



## SpiceLab (3. Mai 2014)

Siehe Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?


```
<ol>
   <li>
      <ol class="clearfix">
         ...
      </ol>
   </li>
</ol>
```


----------



## Alice (3. Mai 2014)

Also ich mache was falsch.

Bloß was?

http://jsfiddle.net/5YeW9/1/


----------



## SpiceLab (4. Mai 2014)

Alice hat gesagt.:


> Also ich mache was falsch.
> 
> Bloß was?
> 
> http://jsfiddle.net/5YeW9/1/


Grundsätzlich machst du nichts falsch. In der Browseransicht passt doch alles zusammen.

Wenn du aber mal dein "Clearing" mit meinem empfohlenen Post vergleichst, sollte dir schon auffallen, dass dort von keinem inhaltsleeren *<div style="clear:both"></div>* die Rede ist, das den jeweiligen Umfluß am Ende abbricht, sondern es mit Hilfe des Pseudoelements *:after* im unmittelbaren Elternelement erledigt wird - in deinem Markup entspricht das den *<ol>*-Elementen der zweiten Listenebene. Beachte hierzu auch den Code-Snippet in meiner letzten Antwort.

Dein CSS lässt sich übrigens vereinfachen, schlanker gestalten: http://jsfiddle.net/spicelab/Ha2n2/


----------



## Alice (4. Mai 2014)

Ich kriege es irgendwie nicht hin. Hab nen knoten im Kopf.

http://jsfiddle.net/Ha2n2/3/


----------



## SpiceLab (4. Mai 2014)

Alice hat gesagt.:


> Ich kriege es irgendwie nicht hin. Hab nen knoten im Kopf.
> 
> http://jsfiddle.net/Ha2n2/3/


Dem neuen (erweiterten) Markup zufolge soll nun *<div class="Forums_LV1_Wrapper">...</div>* nebeneinander ausgerichtet werden - im CSS wendest du es aber auf die Klasse *.Forums_LV1_List* an.


----------



## Alice (4. Mai 2014)

Ja stimmt...

Hab es nun genauso gemacht wie Du es beschrieben hast. Nur der IE8 erkannt das Clearing nicht. Der IE6 schon. Komisch oder?

Hab da aber noch ein Problem.

Grundaufbau:


```
<ol>
   <li>
      <ol>
         <li>
         </li>
      </ol>
   </li>
</ol>
```

Ich habe dem Li aus der 1. Ebene ein Border rechts und links gegeben. Das Li aus der 2. Ebene hat einen Border unten und eine Breite von 25%, damit sich jeweils 4 Boxen in einer Reihe bilden.

Im Internet-Explorer sind aber die 2px (1px links und 1px rechts) vom Li aus der 1. Ebene zuviel. Er werden nur 3 Boxen in Reihe gebildetet.

Wie könnte man das lösen?


----------



## SpiceLab (4. Mai 2014)

Alice hat gesagt.:


> Hab es nun genauso gemacht wie Du es beschrieben hast. Nur der IE8 erkannt das Clearing nicht. Der IE6 schon. Komisch oder?


Beachtest du tatsächlich noch immer IE6?! In deinem Thema Welche Browser ignorieren? klang das zum Schluß ganz anders.

IE8 hat mir in der Vergangenheit nie Probleme mit der genannten "Clearing"-Methode bereitet. 



Alice hat gesagt.:


> Hab da aber noch ein Problem.
> 
> Ich habe dem Li aus der 1. Ebene ein Border rechts und links gegeben. Das Li aus der 2. Ebene hat einen Border unten und eine Breite von 25%, damit sich jeweils 4 Boxen in einer Reihe bilden.
> 
> Im Internet-Explorer sind aber die 2px (1px links und 1px rechts) vom Li aus der 1. Ebene zuviel. Er werden nur 3 Boxen in Reihe gebildetet.


Dieses Problem kann ich im aktuellen IE11 nicht reproduzieren, aber auch nicht über die Entwicklertools in den Vorgängerversionen.


----------



## Internetagentur (5. Mai 2014)

ul / li wird atm bevorzugt würde ich sagen.


----------



## Alice (7. Mai 2014)

Wie? He? Was?


----------



## SpiceLab (7. Mai 2014)

Internetagentur hat gesagt.:


> ul / li wird atm bevorzugt würde ich sagen.





Alice hat gesagt.:


> Wie? He? Was?



atm = at the moment

Liste von Abkürzungen (Netzjargon)


----------



## Alice (7. Mai 2014)

Achso...

Da ich den IE6/IE7 nicht mehr berücksichtige, könnte ich ja auch "display:table;" verwenden.


```
<ol>
      <li>
         <div>
            <h2>Forum Title 1</h2>
         </div>
         <div class="TABLE">
            <div class="TABLE_ROW">
               <div class="TABLE_CELL"> 
                  <div class="TABLE_CELL">Sub-Forum 1 Grafik</div>
                  <div class="TABLE_CELL">Sub-Forum 1 Titel</div>
               </div>
               <div class="TABLE_CELL"> 
                  <div class="TABLE_CELL">Sub-Forum 2 Grafik</div>
                  <div class="TABLE_CELL">Sub-Forum 2 Titel</div>
               </div>
               <div class="TABLE_CELL"> 
                  <div class="TABLE_CELL">Sub-Forum 3 Grafik</div>
                  <div class="TABLE_CELL">Sub-Forum 3 Titel</div>
               </div>
               <div class="TABLE_CELL"> 
                  <div class="TABLE_CELL">Sub-Forum 4 Grafik</div>
                  <div class="TABLE_CELL">Sub-Forum 4 Titel</div>
               </div>
            </div>
            <div class="TABLE_ROW">
               <div class="TABLE_CELL"> 
                  <div class="TABLE_CELL">Sub-Forum 5 Grafik</div>
                  <div class="TABLE_CELL">Sub-Forum 5 Titel</div>
               </div>
               <div class="TABLE_CELL"> 
                  <div class="TABLE_CELL">Sub-Forum 6 Grafik</div>
                  <div class="TABLE_CELL">Sub-Forum 6 Titel</div>
               </div>
               <div class="TABLE_CELL"> 
                  <div class="TABLE_CELL">Sub-Forum 7 Grafik</div>
                  <div class="TABLE_CELL">Sub-Forum 7 Titel</div>
               </div>
               <div class="TABLE_CELL"> 
                  <div class="TABLE_CELL">Sub-Forum 8 Grafik</div>
                  <div class="TABLE_CELL">Sub-Forum 8 Titel</div>
               </div>
            </div>
         </div>
      </li>
      <li>
         ... Weitere Foren (Kategorie)
      </li>
   </ol>
```

Sieht jetzt etwas durcheinander aus. Aber rein vom aussehen finde ich es schöner. Die Tabellen-Zellen passen sich wunderschön an usw.

Würde etwas gegen diese Methode sprechen? Wenn ja: Was? Oder lieber bei der "klassischen" Variante bleiben?

Alternative:


```
<ol>
      <li>
         <ol>
            <div>
               <h2>Forum Title 1</h2>
            </div>
            <li>
               <div> 
                  <div>Sub-Forum 1 Grafik</div>
                  <div>Sub-Forum 1 Titel</div>
               </div>
               <div> 
                  <div>Sub-Forum 2 Grafik</div>
                  <div>Sub-Forum 2 Titel</div>
               </div>
               <div> 
                  <div>Sub-Forum 3 Grafik</div>
                  <div>Sub-Forum 3 Titel</div>
               </div>
               <div> 
                  <div>Sub-Forum 4 Grafik</div>
                  <div>Sub-Forum 4 Titel</div>
               </div>
               <div> 
                  <div>Sub-Forum 5 Grafik</div>
                  <div>Sub-Forum 5 Titel</div>
               </div>
               <div> 
                  <div>Sub-Forum 6 Grafik</div>
                  <div>Sub-Forum 6 Titel</div>
               </div>
               <div> 
                  <div>Sub-Forum 7 Grafik</div>
                  <div>Sub-Forum 7 Titel</div>
               </div>
               <div> 
                  <div>Sub-Forum 8 Grafik</div>
                  <div>Sub-Forum 8 Titel</div>
               </div>
            </li>
         </ol>
      </li>
   </ol>
```


----------



## SpiceLab (7. Mai 2014)

Viele Wege führen nach Rom - die Entscheidung liegt jetzt ganz bei dir


----------



## Alice (7. Mai 2014)

Mein Problem ist:


```
<ol>
      <li>
         <div>
            ... Foren
         </div>
      </li>
   </ol>
```


```
<div>
      <div>
         ... Foren
      </div>
   </div>
```

Bei den CSS-Tabellen möchte ich auf jeden Fall bleiben.

Nur welche Struktur wäre...
   a) SEO technisch
   b) Programmiertechnisch
   c) HTML technisch
... besser? Und vorallem: Warum?


----------



## SpiceLab (7. Mai 2014)

Keines dieser (fast identischen) Markups sticht hier mit einem besonderen Vor- oder Nachteil heraus.

Mach' aus der Mücke keinen Elefanten, und entscheide dich einfach für eine Variante.

Fertitsch.


----------

