Grabungen

Installation

Eye:Sonics

TheNonGeek

Text

Stoerbild

Cooperationen

Radio

Kritik

MR for the NonGeek 14 - Uli sagt LiLi mag Listen.

Gott - oh- Gott, da gibt es doch immer noch Leute,die sich mit dem Gruselkabinett der Blockelemente eine tolle Seite bauen wollen.

Dann hagelt und gewittert es die "tables", die "p"'s die was weiß ich. Der Code wird größer und größer ein "nested wrap" jagd den nächten, und schwupps die wupps - wo war nochmal mein Text? Ähhh - der Google Robot zieht auch schon eine finstere Mine, schweißgebadet versucht er dass eine Wort, von Tonnen Code umgeben, zu finden. Ach ja CSS - Ich muss ich ja auch noch alles ein bissken hin und her schieben - ächz - warum will die Spalte nicht wie ich? hight und width und z-index und align und valign und ach, mir wird ganz schwarze vor Augen, jetzt auch noch für Opera - wie war nochmal der Hack mit dem CHarset? - wieso <th>? Ach ja....

Nun, im folgenden Beispiel sind die Ergebnisse auf den ersten Blick nicht so dramatisch, doch schon erheblich. Vor allem bei der Inhaltseingabe zeigt sich die Liste viel übersichtlicher. Das merkt man natürlich erst, wenn man es auch macht. Ts.Ts.

Nun, denkt man das mal weiter, so ist ein drei Spalten LayOut ja meist eingebettet in weitere Layer und Ebenen, wenn man dann mal 2, mal 3 oder auch mal 4 Spalten will, ist man mit Tabellen rasch in einer Code-Lavine (ich sag nur "rowspan" "colspan"), die die schnelle, übersichtliche und suchmaschinenfreundliche Eingabe von Inhalten unmöglich macht. Den Rest müsste ihr euch schon selbst erarbeiten. Ach - ja - die WYSIWYG Geschichten könnt ihr dabei natürlich vergessen! Alles bitteschön in der "CodeView" eures Editors machen.

Doch es gibt auch eine Seite, die wirklich absolut würdig ist, und zu den Klassikern der CSS Sites im Netz zählt - und na klar - sie heisst:

[ A List apart ]

und sei allerwärmstens empfohlen!!

Nimm 'ne Liste - dann - auf der Piste! (oh gott)

Hier der Vergleich eines drei Spalten LayOuts mit Liste und Tabellen:

<style>
/* TabellenStyle*/

.wrapper {
width: 642px;
font-family: "Trebuchet MS";
padding:2px;
}
.header {

border:thin solid #330099;
padding:4px;


}
.column {
border:thin solid #330099;
padding:4px;
width: 190px;
background-color: #F2F2F2;
}
</style>
Tabelle HTML
<table class="wrapper">
<tr>
<td class="header">Spalte1</td>
<td class="header">Spalte2</td>
<td class="header">Spalte3</td>
</tr>
<tr>
<td class="column">Nimm ne Liste auf der Piste <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
<td class="column">Nimm ne Liste auf der Piste <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
<td class="column">Nimm ne Liste auf der Piste <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
</tr>
</table>



Liste HTML



<style>
/* ListenStyle*/

ul
{
width: 654px;
padding:2px;
}

ul li
{
float: left;
width: 200px;
border:thin solid #330099;
margin:1px;
padding:4px;
list-style-type: none;
background-color: #F2F2F2;
}
ul li.header
{
float: left;
width: 200px;
border:thin solid #330099;
margin:1px;
padding:4px;
list-style-type: none;
background-color: #FFFFFF;
}
br
{
clear: left;
}
div.wrapperli
{
font-family: "Trebuchet MS";
}

</style>

<div class="wrapperli">
<ul>
<li class="header">Spalte1</li>
<li class="header">Spalte2</li>
<li class="header">Spalte3</li>
<li >Nimm ne Liste auf der Piste<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
<li>Nimm ne Liste auf der Piste<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
<li>Nimm ne Liste auf der Piste<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
</ul>
</div>