Templates
CSS-Template 1: Navigation links mit Footer-Elementen
- Details
- Veröffentlicht am Sonntag, 18. Januar 2009 12:15
- Geschrieben von Jan Pionzewski
An dieser Stelle möchten wir Ihnen ein einfaches Template vorstellen, welches Sie völlig frei für Ihre Webseite verwenden dürfen. Mit diesem Template können Sie eine Webseite erstellen, die aus insgesamt 5 einzelnen Elementen besteht: Header, Navigationsmenü auf der linken Seite, Hauptbereich und zwei Footer-Elementen. Natürlich können Sie das Template Ihren Bedürfnissen anpassen. Ändern Sie dazu einfach die Stylesheet-Angaben im Kopf der Datei.
Template 1: Navigation auf der linken Seite mit Footer-Elementen
Vorschau:
(klicken Sie auf das Bild, um es zu vergrößern)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Design 1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
color: #fff;
}
html, body
{
font: 12px Arial, Helvetica, sans-serif;
margin: 15px;
background: #e9e4de;
}
ul
{
padding-left: 30px;
}
/* Hier beginnt das Design */
div#site
{
margin: 0px auto;
background: grey;
width: 800px;
}
div#site h1#header
{
background: darkred;
height: 100px;
text-align: center;
line-height: 100px;
font-family: "Georgia";
}
div#site div#box1
{
width: 250px;
float: left;
background: darkblue;
}
div#site div#box2
{
margin-left: 250px;
background: lightblue;
}
div#site div#box3
{
background: darkgreen;
height: 50px;
clear: left;
float: left;
width: 400px;
}
div#site div#box4
{
background: green;
height: 50px;
margin-left: 400px;
}
</style>
</head>
<body>
<div id="site">
<h1 id="header">
Design 1
</h1>
<div id="box1">
<h2>Lorem Ipsum</h2>
<ul>
<li>dolor</li>
<li>dolor</li>
<li>dolor</li>
<li>dolor</li>
</ul>
</div>
<div id="box2">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div id="box3">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
</p>
</div>
<div id="box4">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
</p>
</div>
</div>
</body>
</html>
