Hallo zusammen.
Habe heute abend ein wenig an einem Template gebastelt und möchte es gerne hier zur weiteren Verwendung veröffentlichen. Es ist noch nichts großes und kann gerne auch hier weiter entwickelt werden.
In diesem Bereich möchte ich nun hin und wieder kleine Templates vorbereiten, die dann von allen Benutzt werden können und(!) ich würde mich freuen, wenn dieses Templates hier als Grundlage für eine Verfeinerung bzw. Erweiterung verwand werden. Die Ergebnisse können dann hier auch wieder für andere zur Verfügung gestellt werden, so das sich hier bald eine solide Basis bilden kann!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Titel der Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Generator" content="Editor" />
<meta name="Author" content="e-phy | webhilfe.info" />
<meta name="robots" content="index,follow" />
<meta name="description" content="Die Seitenbeschreibung. max 256 Zeichen" />
<meta name="keywords" content="Die Keywords, max 256 Zeichen" />
<meta name="language" content="de" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css" media="all">
body{
margin: 0px;
padding: 0px;
background-color: #cccccc;
font-family: verdana, arial, sans-serife;
font-size: 100%;
}
#container{
margin: 0px auto;
background-color: #FFFFFF;
width: 760px;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
}
h1{
font-size: 130%;
width: 100%;
margin: 0;
padding: 0;
color: white;
}
h2{
font-size: 120%;
background-color: #666600;
color: white;
margin: 0; padding: 5px;
}
h3{
font-size: 100%;
background-color: #666600;
color: white;
margin: 0; padding: 2px;
}
h4{
font-size: 85%;
background-color: #666600;
color: white;
margin: 0; padding: 1px;
}
p{
padding: 5px;
margin: 0;
font-size: 85%;
}
#menu{
float: left;
width: 150px;
font-size: 75%;
}
#menu ul{
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 0px;
}
#menu ul li{
width: 100%;
background-color: #663300;
}
#menu ul li a:link{
display: block;
padding: 5px;
border-left: 5px solid #663300;
color: white;
text-decoration: none;
}
#menu ul li a:hover{
background-color: white;
border-left: 5px solid #333300;
color: black;
}
#header{
background-color: #666633;
padding: 20px;
margin: 0;
}
#inhalt{
float: right;
width: 610px;
background-color: #CCCC99;
}
#footer{
clear: both;
background-color: #333300;
color: white;
font-size: 75%;
padding: 5px;
text-align: right;
}
#footer a:link, #footer a, #footer a:visited{
color: #CCCC33;
text-decoration: none;
border-bottom: 1px dotted #CCCC33;
}
#footer a:hover, #footer a:focus{
border-bottom: 1px solid white;
color: white;
}
img{
margin: 5px;
border: 2px solid white;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Titel der Homepage</h1>
</div>
<div id="menu">
<ul>
<li>
<a href="index.htm">Startseite</a>
</li>
<li>
<a href="index.htm">Link 1</a>
</li>
<li>
<a href="index.htm">Link 1</a>
</li>
<li>
<a href="index.htm">Link 2</a>
</li>
<li>
<a href="index.htm">Link 3</a>
</li>
<li>
<a href="index.htm">Link 4</a>
</li>
<li>
<a href="index.htm">Kontakt</a>
</li>
<li>
<a href="index.htm">Impressum</a>
</li>
</ul>
</div>
<div id="inhalt">
<h2>Ãœberschrift 1</h2>
<p>
Hier kommt der Inhalt deiner Seite hin. Hier kannst du dann so viel Text schreiben, wie die Tastatur hergibt. Sollte
es dennoch einmal zu einem Fehler kommen, so das mal eine Taste nicht mehr geht, dann kannst du das ja anderweitig
durch Hilfsmittel lösen.
</p>
<h3>Ãœberschrift 2</h3>
<p>
Hier darf auch noch weiterer Text geschrieben werden. Ist zwar nichts besonderes, aber dennoch sollte es für den Anfang eine
gute Basis geben.
</p>
<h4>Ãœberschrift 3</h4>
<p>Eine Homepage die ist lustig, eine Homepage die ist schön... Tralla lalallla allala lalalla</p>
<img src="bild.jpg" alt="Beispielbild" style="width: 100px; height: 150px;" />
<p>Eine Homepage die ist lustig, eine Homepage die ist schön... Tralla lalallla allala lalalla</p>
<p>Eine Homepage die ist lustig, eine Homepage die ist schön... Tralla lalallla allala lalalla</p>
<p>Eine Homepage die ist lustig, eine Homepage die ist schön... Tralla lalallla allala lalalla</p>
<p>Eine Homepage die ist lustig, eine Homepage die ist schön... Tralla lalallla allala lalalla</p>
<p>Eine Homepage die ist lustig, eine Homepage die ist schön... Tralla lalallla allala lalalla</p>
</div>
<div id="footer">
Dieses Homepage wurde erstellt von: e-phy | © by <a href="http://www.webhilfe.info/board">webhilfe.info</a>
</div>
</div>
</body>
</html>
Im Anhang findet ihr die Index-Datei mit eingebundenem CSS-Code
index.htm (Größe: 4,64 KB / Downloads: 35)
![[Bild: signatur_fotoblog.jpg]](http://lh6.google.com/image/e.phy05/RjeJC9rbNII/AAAAAAAAAs8/SATAq9a1tg0/signatur_fotoblog.jpg)
