Von der Tabelle zur Liste

Die Tabelle als Vorlage für die Liste.
Die Tabelle als Vorlage für die Liste.

Auf Forum von WP tauchte die Frage auf, wie man dieses Design, das als Tabelle realisiert worden war, mit einer Liste umsetzen kann. Wenn man mit der Maus über eine „Category“ kommt, sollte diese eine andere Hintergrundfarbe haben.

Das ganze sollte nachher in einer verschachtelten Liste erscheinen.

So eine verschachtelte Liste sieht so aus:

<ul>
      <li>
           <ul>
                 <li>
                 </li>
           </ul>
     </li>
</ul>

Da man jedes dieser Elemente mit CascadingStyleSheet Angaben direkt ansprechen kann, hat man sehr viele Gestaltungsmöglichkeiten.

Diese erhöhen sich nochmals da innerhalb der li Tags Links stehen sollen und eine Überschrift.

Um sich die Arbeit zu erleichtern [ und weil dies in der Software WordPress meist so genannt wird 😉 ] kann man da noch ein div mit einer id geben.

Etwa so:


<div id="sidebar">
<ul>
      <li><h2>Category</h2>
           <ul>
                 <li>Category 1 
                 </li>
           </ul>
     </li>
</ul>
</div><!--id sidebar end-->

Achtung: Es gibt sehr viele Lösungen, ich stelle nur eine vor.

Mein Konzept:

  1. Da in der Vorlage keine Zeichen vor den Einträgen sind, nehme ich die der Liste auch weg.
  2. Die „Leerzeile fürs Aussehen“, die derzeit gelb ist, wird ein Rahmen.
  3. Den Links gebe ich ein display block und width damit die ganze Breite den „hover“ Effekt hat.
  4. Ich nehme an, dass die Breite, die zur Verfügung steht, 200px sind.
  5. Den „Hover Effekt“ erzeuge ich mit den Pseudoklassen für Links.
  6. In der zweiten Liste setze ich alle margins und paddings auf Null, damit es keine „Einrückungen“ gibt.

Die Zeichen vor den Einträgen wegnehmen:

#sidebar ul li {
list-style-type: none;
list-style-image: none;
}
#sidebar ul li  ul li{
list-style-type: none;
list-style-image: none;
}

Die Leerzeile fürs Aussehen wird ein Rahmen:


#sidebar ul li ul li{
border-bottom: 2px solid #ffcc00;
}

In der zweiten Liste alle margin und paddings auf Null:


#sidebar ul li ul {
margin:0;
padding:0;
}
#sidebar ul li ul li {
margin:0;
padding:0;
}

In der zweiten Liste allen li Tags eine fixe [fluide] Breite geben, wegen des Rahmens.

Achtung: Diese 12.5em sind auszutesten, da „em“ von der generell vorgegebenen Schriftgröße abhängen.

#sidebar ul li ul li{
width:12.5em;
}

Den Links gebe ich ein „width“ von 200px und nutze die Pseudoklassen für den Hover Effekt:

#sidebar a{
display:block;
width:200px;
}

Die Pseudoklassen für den HoverEffekt:


#sidebar a:link{
color:#000;
background-color:#93b7b7;
}
#sidebar a:visited{
color:#759494;
background-color:#93b7b7;
}
#sidebar a:focus{
color:#ff0000;
background-color:#93b7b7;
}
#sidebar a:hover{
color:#000;
background-color:#759494;
}
#sidebar a:active{
color:#fff;
background-color:93b7b7;
}

und aus 😉

So sieht die verschachtelte Liste aus:Vom Tabellenlayout zur Liste.

Und hier kannst Du Dir die Style Sheet Angaben ansehen: Style Sheet für die Liste.

Viel Spaß.

mts

Ebenfalls informativ und lesenswert

8 Kommentare zu “Von der Tabelle zur Liste

  1. OMaximus

    Und was genau soll der Voteil einer solchen Umsetzung als Liste haben? Wofür gibt es denn dann Tabellen …

    Welches eigentliche Ziel der Steller dieser Frage beabsichtigte, weiß ich nicht, da der Link oben down ist.

  2. mts

    Tabellen nutzt man für tabellarische Daten und nicht für eine Navi –außer man hat seit dem Jahr 1997 nichts mehr dazu gelernt 😉

  3. chio

    Man/frau kann auch mehrspaltige Tabellen mit ’s machen. Erfordert etwas Rechnerei, aber geht.

    Eigentlich ist es nur mehr ein kleiner Schritt zur Seite, die nur mehr aus und besteht:
    Jeden durch ersetzen, alles dazwischen durch , usw. Bis hin zu

    Bilder? <li style="background: url..)
    fett?
    (müsste ich genauer schauen, wie das geht)

    Ab HTML5 kann man dann sogar auf die

    <a>
    

    verzichten, da dürfen dann auch ein

    href 
    

    haben.

    Semantisch korrekt? Sowieso: Alles ist Liste! Steht ja alles untereinander!

  4. mts

    habs gern repariert, mag deine Kommentare gern hier lesen chio

    sind immer wieder eine Bereicherung -inhaltlich und so 😉

  5. Krawatteneisbär

    Danke für den Artikel. Kann ich die Listen auch horizontal anordnen?
    Das geht ja im Gegensatz zu Tabellen ganz einfach mit nur einer Zeile.
    Danke für eine Antwort!

    edit von mts: das ist doch kein Name lieber Krawatteneisbär 😉

  6. mts

    ja kannst Du – gib der Liste ein display inline oder float all die li und das ul nach Links

    lg

  7. Kytoma

    Das Problem für mich ist das sehr große Tabellen mit div ewig in der Umsetzung dauern. Ein ist ruckzuck umgesetzt wenn der Editor über die Automatik-Funktion verfügt.