Forum -> Liste

Alice

Erfahrenes Mitglied
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?
 
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.
 
Zuletzt bearbeitet:
Na wie das mit display:inline und display:inline-block aussehen müsste. :)

Aktuell hab ich es so und bin nicht zufrieden.

HTML:
<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. :rolleyes:
 
HTML:
<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
 
Zurück