Jürgen Schwind

viele schöne Sachen ...

juergen-schwind.de » Blog » Tabellenloses HTML-CSS-Layout

PHP5 BBCode

Tabellenloses HTML-CSS-Layout

Heute geht es um die Gestaltung einer Standard-Webseite ohne Tabellen. Für die Blocks werden ausschließlich div-Elemente verwendet die mit IDs oder Klassen versehen werden. Das ist zum einen übersichtlicher und zum anderen ergibt es weniger und saubereren HTML-Code. Die kleineren Dateien lassen sich auch schneller an die Benutzer ausliefern und spart dabei auch nocht wertvollen Traffik. Design-Änderungen und Anpassungen lassen sich im Gegensatz zu Tabellen-Layouts wesentlich schneller und einfacher umsetzen.

Zuerst beginnen wir mit unserem HTML-Grundgerüst das in meiner Vorlage wie folgt aussieht:

HTML-Quellcode:

<body>
 
<div id="frame_container">
 
	<div id="header_container"><div>Title</div></div>
 
   	<div id="breadcrumb_container">
 
	    <ul>
        	<li class="first_element"><a href="#">Main</a></li>
        	<li><a href="#">Page</a></li>
        	<li><a href="#">Location</a></li>
        	<li class="last_element"><a href="#">Current</a></li>
	    </ul>
 
   	</div>
 
	<div id="main_container">
 
    	<div id="main_container_navigation">
 
            <ul>
                <li class="first_element"><a href="#">First-Link</a></li>
                <li><a href="#">Dummy-Link #1</a></li>
                <li><a href="#">Dummy-Link #2</a></li>
                <li><a href="#">Dummy-Link #3</a></li>
                <li class="last_element"><a href="#">Last-Link</a></li>
            </ul>
 
        </div>
 
    	<div id="main_container_content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
        </div>
 
    </div>
 
	<div class="clear_float"></div>
 
	<div id="footer_container"><div>Footer</div></div>
 
</div>
 
</body>

Man sollte noch wissen wie man eine Klasse oder eine ID mit CSS ansprechen kann. Eine ID wird mit #ELEMENTNAME und eine Klasse mit .ELEMENTNAME angesprochen.

Danach erstellen wir einen CSS-Abschnitt im HMTL-Header und füllen diesen mit folgendem Inhalt:

CSS-Quellcode:

<style type="text/css">
<!--
 
/*
 
(c)	Juergen Schwind <info@juergen-schwind.de>
@	27.04.2009
 
	Die Funktionsweise jedes CSS-Element wird einmal erklärt.
	Alle Inhalten können als Grundlage für eigene Projekte verwendet werden.
 
	Getestet mit: Firefox 3, Internet Explorer 7/8, Safari 3, Chrome 1/2 und Opera 9
 
*/
 
* {
	/* Alle Ränder und Aussen- und Innenabstände auf 0 stetzen */
	margin:0;
	padding:0;
	border: none;
}
 
body {
	/* Schrift für den kompletten Body definieren */
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}
 
#frame_container {
	/* Zentriert den Container in die Mitte der Seite */
	margin:0 auto;
	/* Breite auf 600 Pixel setzen */
	width:600px;
	/* Gestrichelter Rand mit der Farbe #ccc und einer Stärke von einem Pixel */
	border:1px dashed #ccc;
	/* Hintergrund definieren */
	background-color:#ddd;
	/* Container 10 Pixel vom oberen Rand wegsetzen */
	margin-top:10px;
}
 
#header_container {
	/* Höhe auf 40 Pixel setzen */
	height:40px;
	background-color:#333;
	/* Schriftfarbe auf #fff (weiß) */
	color:#fff;
	border-bottom:1px dashed #ccc;
}
 
#header_container div {
	font-size:14px;
	/* Text auf zentriert setzen */
	text-align:center;
	/* Schrift mit einem oberen Innenabstand von 12 Pixel setzen */
	padding-top:12px;
 
}
 
#breadcrumb_container {
	height:22px;
	background-color:#555;
	color:#fff;
	border-bottom:1px dashed #ccc;
}
 
#breadcrumb_container ul {
	padding-top:4px;
	/* Entfernt die Punkte vor den Elementen der unsortierten Liste */
	list-style:none;
}
 
#breadcrumb_container ul li {
	/* Innenabstand nach Links */
	padding-left:5px;
	/* Zeigt die Elemente nebeneinander an, beginnend von Links */
	float:left;
}
 
#breadcrumb_container ul li a {
	/* Entfernt die Unterstreichung der Links */
	text-decoration:none;
	color:#ddd;
}
 
#breadcrumb_container ul li a:hover {
	/* Geht man mit der Maus über einen Link so wird die Schrift unterstrichen */
	text-decoration:underline;
}
 
 
#breadcrumb_container ul li:before {
	/* Gibt die Zeichen vor dem li-Element an */
	content:"» ";
}
 
#breadcrumb_container ul li.first_element:before {
	/* Hier wird das Zeichen vor dem ersten li-Element gelöscht */
	content:"";
}
 
#main_container {
	height:40px;
	background-color:#333;
	color:#fff;
	border-bottom:1px dashed #ccc;
}
 
#main_container_navigation {
	/* Setzt den Container an den linken Rand */
	float:left;
	width:150px;
	background-color:#777;
}
 
#main_container_navigation ul {
	padding-top:4px;
	padding-bottom:4px;	
	list-style:none;
}
 
#main_container_navigation ul li a {
	/* Innenabstände: oben rechts unten links */
	padding:2px 0px 2px 6px;
	text-decoration:none;
	color:#ddd;
	/* Macht aus dem ganzen li-Element einen Link und nicht nur aus dem Text des a-Tags */
	display:block;
}
 
#main_container_navigation ul li a:hover {
	text-decoration:underline;
	background-color:#5a5a5a;
}
 
 
#main_container_navigation ul li a:before {
	content:"» ";
}
 
#main_container_content {
	/* Setzt den Container an den rechten Rand */
	float:right;
	width:430px;
	background-color:#999;
	/* Setzt einen Innenabstand von 10 Pixel um den Text im Container */
	padding:10px;
}
 
 
#footer_container {
	height:40px;
	background-color:#333;
	color:#fff;
	border-top:1px dashed #ccc;
}
 
#footer_container div {
	font-size:14px;
	text-align:center;
	padding-top:12px;
 
}
 
.clear_float {
	/* Wird nach einem Float benötigt um die folgenden Container unterhalb des letzten Containers angezeigt werden */
	clear:both;
}
 
-->
</style>

Das ganze zusammen ergibt dann folgendes Tabellenloses-Design:

Browserversion

Viel Spaß beim experimentieren mit der CSS-Design-Datei.

Geschrieben am 28. April 2009

Jürgen Schwind

Über mich

Projekte

Konto

Blog

Tabellenloses HTML-CSS-Layout