WebDesign by mts

Von der Tabelle zur Liste

in CSS, von mts

Wie kann man ein Design, das vorher als Tabelle realisiert wurde, mit einer Liste umsetzen.

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ß.

Basis Know-how CSS
Internetmarketing

• Tabellen zum Hören BITV Praxis
• Tabelle für tabellarische Daten laut BITV

Top

8 zu : Von der Tabelle zur Liste