Umstieg von Tabellen auf Container

Dieses HOWTO zu Linux oder der Abschnitt davon braucht eine Überarbeitung. Weitere Informationen findest Du hier. Deine Hilfe ist gefragt, das HOWTO zu verbessern. Danach entsorge bitte diese Signierung.

Autor: Yehudi

Einleitung

Zunächst sei erst mal bemerkt, dass beide Möglichkeiten ihre Berechtigungen haben. Seiten wie der http:/www.spiegel.de gestallten immer noch erfolgreich ihre Seite mit Tabellen. Und nach den Massstäben gäbe es auch keine Notwendigkeit eines Umstieges. Die Seite funktioniert hervorragend. Und dort geht es in erster Linie um Informationen. Wer jedoch grafisch mehr aus seiner Seite rausholen will, dem bleibt ein Umstieg nicht erspart. Die meisten neuen Browser unterstürzen zwischenzeitlich CSS volständig. Allein der Internetexplorer tut sich oft schwer. Ein weiterer Punkt des Umstieges von Tabellen auf CSS ist der "Aufgeblähter Quellcode" das gleiche LayOut soll man mit CSS um 40% weniger erzeugen können. Eine Datei mit 5kb lässt sich danach auf 3 kb reduzieren, Bei 100.000 Besuchern spart man 2,4GB per anno für eine Datei.

Unterschied zwischen div und span

Während folgendes ein Absatz erzeugt:

<div class="Text">Text</div>

Erzeugt die span Klasse keinen Absatz:

<span class="Text">Text</span>

Sie kann dazu genutzt werden, um in einer Linie unterschiedliche Klassen unterzubringen.

Das template oder die html-Dokumente ausdünnen

Bevor man sich der Tabellen annimmt, sollte man die ganze Schrift konvertieren. Manche Dinge lassen sich dort in einem Atemzug erledigen. Haben wir bsp. solche Fälle:

<TD><FONT size="-2"  face="Verdana" >Text</FONT></TD>

dann können die ersetzt werden:

<div class="Text">Text</div>

Vorraussetzung die Anordnungen sind alle gleich.

In einer extra-Datei legt man dann Schriftgröße Hintergrund, und Kastengröße fest. Wie man sieht wird der Quelltext dadurch detulich schlanker.

Wann sollte man den Umstieg von Tabellen auf CSS vermeiden?

Wenn wie hier mehrere thumbnails verwendet werden, die mit einer Bildunterschrift in einer Tabelle liegen. Da die thumbnails mal hochkant und mal quer stehen, liegt automatisch eine unterschiedliche Größe vor.

In Tabellenform würde das Ganze so aussehen:

<table cellspacing="2" cellpadding="0" border="0" width="350px">
<tr>
    <td>Bild</td>
    <td>Bild</td>
    <td>Bild</td>
</tr>

<tr>   
     <td>Text</td>
     <td>Text</td>
     <td>Text</td>
</tr>
</table>

Bei CSS hingegen:

<ul id="albumlist">
        <li>Bild Text</li>
	<li>Bild Text</li>
	<li>Bild Text</li>  
 </ul>	

(Der Deutlichkeit halber habe ich die Bildaufrufe weggelassen) Damit wird der Quelltext deutlich kürzer, aber die Verschachtelung ist auch eine andere. Der Text der in der Tabelle in einer neuen Zeile steht wird jetzt neben der Bildinformation aufgerufen.

Runde Ecken

Eine besonderes Feature bei CSS sind die runden Kanten, wie sie die Users des Linux-Clubs, welche das per default eingestellte template nutzen kennen.

Es gibt die Möglichkeit mit Grafiken zu arbeiten, wie hier beschrieben:

• aktuell.de.selfhtml.org
• www.andreas-kalt.de (Danke an tomte für die Links)

Wer das auf die schnelle in seiner Website einfügen will, der geht auf [1] oder www.neuroticweb.com (Danke an tomte für den Link) und gibt dort z.B. folgendes ein:

class name: seitenrand background color: ffffff foreground color: e7e7e7

herraus kommt dann folgender Quelltext:

<style type="text/css">
 .seitenrand{
 display:block;
 }
 .seitenrand *{
 display:block;
 height:1px;
 overflow:hidden;
 background:#e7e7e7;
 }
 .seitenrand1{
 border-right:1px solid #f4f4f4;
 padding-right:1px;
 margin-right:3px;
 border-left:1px solid #f4f4f4;
 padding-left:1px;
 margin-left:3px;
 background:#ededed;
 }
 .seitenrand2{
 border-right:1px solid #fcfcfc;
 border-left:1px solid #fcfcfc;
 padding:0px 1px;
 background:#ebebeb;
 margin:0px 1px;
 }
 .seitenrand3{
 border-right:1px solid #ebebeb;
 border-left:1px solid #ebebeb;
 margin:0px 1px;
 }
 .seitenrand4{
 border-right:1px solid #f4f4f4;
 border-left:1px solid #f4f4f4;
 }
 .seitenrand5{
 border-right:1px solid #ededed;
 border-left:1px solid #ededed;
 }
 .seitenrand_content{
 padding:0px 5px;
 background:#e7e7e7;
 }
 </style>
 <div>
 <b class="seitenrand">
 <b class="seitenrand1"><b></b></b>
 <b class="seitenrand2"><b></b></b>
 <b class="seitenrand3"></b>
 <b class="seitenrand4"></b>
 <b class="seitenrand5"></b>
 </b> <div class="seitenrand_content">
 <!-- Your Content Goes Here -->
 </div>
 <b class="seitenrand">
 <b class="seitenrand5"></b>
 <b class="seitenrand4"></b>
 <b class="seitenrand3"></b>
 <b class="seitenrand2"><b></b></b>
 <b class="seitenrand1"><b></b></b>
 </b>
 </div>

• http://www.html.it/articoli/nifty/index.html

Danke an für den Link an Monika vom WP.de-Team

Runde Ecken für die Sidebar

Wer bei WordPress die Sidebar mit CSS gestalten möchte stößt hier auf ein gesondertes Problem, es bedarf einiger Anpassung, um die runden Ecken wie hier einzupassen.

In der Datei sidebar.php ist folgendes oben über

<div id="sidebar"> einzufügen:
		<br />
 <div id="container">
 <b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
 </b>

unten unter dem letzten </div> dann noch:

<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b> </div>

In den Stylesheet ist zwischen /* Begin Sidebar */ und /* End Sidebar */ alles durch:

/* Begin Sidebar */

#sidebar
{
        background: #e7e7e7;
	padding: 10px 0 10px 0;
	padding-left: 22px;
	margin-left: 521px;
	width: 240px;
	}
 
.rtop, .rbottom {
       display:block
       }
    
.rtop *, .rbottom *{
       display: block; 
       height: 1px; 
        overflow: hidden,
        background:#e7e7e7;
	padding-left: 22px;
	margin-left: 521px;
	width: 240px;
	}
	
.r1{
        background:#e7e7e7;
	padding-left: 22px;
	margin-left: 526px;
	width: 230px;;
	}
	
.r2{
        background:#e7e7e7;
	padding-left: 22px;
	margin-left: 524px;
	width: 234px;;
	}
	
.r3{
        background:#e7e7e7;	
	padding-left: 22px;
	margin-left: 523px;
	width: 236px;}
	
 .r4{
        height: 2px;
        background:#e7e7e7;
	padding-left: 22px;
	margin-left: 522px;
	width: 238px;
	}
	
 #sidebar form {
	margin: 0;
	}
 
 /* End Sidebar */

Es ist darauf zu achten, dass die Hintergrundgrafik welche im Ursprungszustand den Hintergrund der Sidebar darstellt bearbeitet wird, um den gewünschten Effekt zu erzielen. In meinem Fall habe ich das grau der Grafik an der Stelle gegen weiß ersetzt.

Zurück zu Webdesign