Anbei HTML sowie CSS Code:
HTML Template:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Website</title>
<link href="../lib/code.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]><link href="../lib/ie5.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<div id="logo"></div>
<div id="allwrap">
<div id="kopf">
<div id="topbox">
<div id="oben">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Sitemap</a></li>
<li><a href="">Impressum</a></li>
</ul>
</div>
<div id="unten">
<div id="sprache"></div>
</div>
</div>
<div class="streifen"></div>
</div>
<div class="cleardiv"></div>
<div id="leiste">
<div class="left">
<div class="rootline">Aktuelle Seite: Home</div>
</div>
<div class="right">
<ul>
<li class="print"><a href="#" class="druck">Seite drucken</a></li>
<li class="pdf"><a href="#" class="pdf">Seite als PDF</a></li>
</ul>
</div>
<div class="cleardiv"></div>
</div>
<div id="inhalt">
<div id="links">
<div id="navigation">
<ul>
<li><a href="">Unternehmen</a></li>
<li><a href="">Produkte</a></li>
<li><a href="">Ihre Produktanforderung</a></li>
<li><a href="">Neuheiten</a></li>
<li><a href="">Geschäftsfelder</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</div>
<div id="suchform">
<form action="" method="post">
<input name="" type="text" class="suchfeld" onfocus="if(this.value==defaultValue)this.value='';" value="Suchbegriff eingeben" />
<input name="" type="button" class="suchego" value=">>" />
</form>
</div>
</div>
<div>
<div id="mitte">
<h1>Herzlich willkommen</h1>
<div class="textbild">
<h1>Herzlich willkommen</h1>
</div>
<div class="anker">
<div class="totop"></div>
</div>
<div class="copyleft">
<div class="cleft"></div>
<div class="cleardiv"></div>
</div>
</div>
</div>
<div id="rechts">
<h2>News</h2>
<div class="aktuell"></div>
</div>
<div class="cleardiv"></div>
</div>
</div>
</body>
</html>
CSS:
Code:
/* CSS Document */
* {
margin: 0px;
padding: 0px;
}
html {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
body {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 5px;
font-family: Arial, Helvetica, sans-serif;
}
div.cleardiv {
clear: both;
line-height: 0px;
font-size: 0px;
height: 0px;
padding: 0px;
margin: 0px;
color: #FFF;
}
form {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#allwrap {
padding: 0px 0px 0px 0px;
margin: 0px 10px 0px 0px;
max-width: 980px;
min-width: 780px;
}
* html #allwrap {
width: 980px;
width: expression(
(document.documentElement && document.documentElement.clientHeight) ?
(document.documentElement.clientWidth < 780) ? "780px" : (( document.documentElement.clientWidth > 980 ) ? "980px" : "auto") :
(document.body.clientWidth < 780) ? "780px" : (( document.body.clientWidth > 980 ) ? "980px" : "auto")
);
}
#kopf {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 290px;
background: url(../img/pic.jpg) no-repeat bottom left;
}
#logo {
padding: 8px 0px 0px 20px;
position: absolute;
}
* html #logo {
top: 8;
left: 20;
z-index: 30;
width: 150px;
height: 101px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}
#topbox {
float: right;
font-size: 0.72em;
width: 300px;
/* height: 85px; */
}
#topbox #oben {
padding: 5px 0px 0px 0px;
clear: both;
float: right;
}
#topbox #oben ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#topbox #oben li {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type: none;
display: inline;
}
#topbox #oben ul li a {
padding: 0px 10px 0px 10px;
background: url(../img/pic.gif) repeat-y top right;
text-decoration: none;
color: #333;
}
#topbox #oben ul li a:hover {
text-decoration: underline;
}
#topbox #oben ul li a.aktiv {
text-decoration: underline;
}
#topbox #unten {
padding: 45px 0px 0px 0px;
padding: 20px 0px 0px 0px;
clear: both;
}
* html #topbox #unten {
padding: 45px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}
*+html #topbox #unten {
padding: 23px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}
#topbox #sprache {
float: right;
margin: 0px 0px 6px 0px;
}
#topbox #sprache li {
list-style-type: none;
float: left;
line-height: 20px;
}
#topbox #sprache ul li a {
display: block;
line-height: 20px;
height: 20px;
width: 30px;
font-size: 0px;
text-decoration: none;
color: #FFF;
}
div.streifen {
background: url(../img/pic.png) repeat-x top left;
margin: 0px 0px 0px 0px;
height: 25px;
clear: both;
}
#leiste {
background: url(../img/pic.png) repeat-x top left;
height: 25px;
margin: 4px 0px 30px 0px;
line-height: 25px;
}
#leiste div.left {
padding: 0px 200px 0px 5px;
position: absolute;
max-width: 780px;
min-width: 680px;
}
* html #leiste div.left {
width: 100%;
min-width: 680px;
}
#leiste div.left div.rootline {
padding: 10px 0px 0px 10px;
font-size: 0.66em;
line-height: 25px;
}
#leiste div.left div.rootline span {
padding: 0px 0px 5px 0px;
margin: 0px 4px 3px 4px;
font-size: 14px;
color: #B5B5B5;
}
#leiste div.left div.rootline a {
color: #000;
color: #B5B5B5;
text-decoration: none;
}
#leiste div.left div.rootline a:hover {
text-decoration: underline;
}
#leiste div.right {
width: 186px;
position: relative;
padding: 10px 0px 0px 10px;
margin: 0px 0px 0px 0px;
float: right;
}
* html #leiste div.right {
width: 195px;
}
#leiste ul {
}
#leiste li {
display: inline;
list-style-type: none;
}
#leiste div.right a {
padding: 2px 0px 2px 20px;
font-size: 0.66em;
display: inline;
text-decoration: none;
color: #333;
color: #B5B5B5;
line-height: 25px;
height: 25px;
background: url(../img/pic.gif) no-repeat center left;
}
#leiste div.right a:hover {
text-decoration: underline;
}
#leiste div.right a.druck {
background: url(../img/pic.gif) no-repeat center left;
padding: 2px 5px 2px 20px;
}
#leiste div.right a.pdf {
background: url(../img/pic.gif) no-repeat center left;
padding: 2px 0px 2px 20px;
}
* html #leiste div.right a.druck {
padding: 0px 5px 0px 20px;
}
* html #leiste div.right a {
padding: 0px 0px 0px 20px;
}
#inhalt {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
max-width: 980px;
min-width: 780px;
}
* html #inhalt {
width: 980px;
width: expression(
(document.documentElement && document.documentElement.clientHeight) ?
(document.documentElement.clientWidth < 780) ? "780px" : (( document.documentElement.clientWidth > 980 ) ? "980px" : "auto") :
(document.body.clientWidth < 780) ? "780px" : (( document.body.clientWidth > 980 ) ? "980px" : "auto")
);
}
#links {
width: 195px;
padding: 1px 0px 0px 0px;
position: absolute;
z-index: 2;
font-size: 0.72em;
}
#links h2 {
padding: 0px 10px 8px 10px;
margin: 0px 0px 0px 0px;
color: #666;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
}
#links img {
padding: 0px 0px 0px 20px;
}
#links ul {
padding: 0px 0px 0px 0px;
margin: 0px 5px 0px 10px;
background: url(../img/pic.gif) repeat-x bottom left;
}
#links li {
padding: 1px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type: none;
background: url(../img/pic.gif) repeat-x top left;
}
#links ul li a {
display: block;
padding: 7px 0px 7px 15px;
margin: 0px 0px 0px 0px;
text-decoration: none;
color: #333;
font-weight: bold;
line-height: 12px;
}
#links ul li a:hover {
background-color: #EBEBEB;
}
#links ul li a.aktiv {
display: block;
text-decoration: none;
background: none;
background: url(../img/pic.gif) no-repeat center left;
background-color: #EBEBEB;
}
#links ul li.ifsub {
background-color: #EBEBEB;
padding: 0px 0px 2px 0px;
}
#links ul li.ifsub a.aktiv {
background: url(../img/pic.gif) no-repeat center left;
padding: 7px 0px 7px 15px;
margin: 0px 0px 0px 0px;
}
#links ul li.sub {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type: none;
background-image: none;
}
#links ul li.sub a {
display: block;
padding: 0px 0px 8px 15px;
margin: 0px 0px 0px 0px;
text-decoration: none;
background-color: #EBEBEB;
font-weight: normal;
line-height: 13px;
background-image: none;
}
#links ul li.sub a:hover {
background: none;
background-color: #EBEBEB;
text-decoration: underline;
}
#links ul li.sub a.aktiv {
background-image: none;
text-decoration: underline;
}
#links #suchform {
float: left;
width: 180px;
padding: 10px 0px 10px 10px;
margin: 10px 0px 10px 0px;
margin: 0px;
}
* html #links #suchform {
width: 180px;
}
#links #suchform form {
background-color: #FFE707;
padding: 5px 0px 5px 0px;
}
#links input.suchfeld {
border: 1px solid #666;
width: 140px;
margin: 0px 3px 0px 8px;
padding: 1px 2px 1px 2px;
color: #666;
}
* html #links input.suchfeld {
width: 135px;
}
#mitte {
padding: 0px 185px 0px 200px;
position: absolute;
font-size: 0.73em;
line-height: 19px;
max-width: 600px;
min-width: 400px;
float: left;
}
* html #mitte {
width: 100%;
min-width: 400px;
}
*+html #mitte {
max-width: 600px;
min-width: 400px;
}
#mitte div.textbild {
margin: 0px 20px 0px 25px;
padding: 0px 25px 0px 0px;
background: url(../img/pic.gif) repeat-y top right;
}
#mitte div.textbild div.csc-textpic {
}
#mitte h1 {
padding: 0px 20px 10px 25px;
margin: 0px 20px 0px 0px;
font-size: 1.95em;
line-height: 1.07em;
color: #444;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
background: url(../img/pic.gif) repeat-y top right;
vertical-align: top;
}
#mitte div.textbild h1 {
padding: 0px 0px 12px 0px;
margin: 0px 0px 0px 0px;
font-size: 1.95em;
line-height: 1.07em;
color: #444;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
background-image: none;
vertical-align: top;
}
#mitte div.textbild h2 {
padding: 0px 0px 8px 0px;
margin: 0px 0px 0px 0px;
font-size: 1.4em;
line-height: 1.16em;
color: #444;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
font-weight: bold;
vertical-align: top;
}
#mitte div.textbild ul {
padding: 4px 0px 4px 0px;
margin: 0px 0px 0px 25px;
}
#mitte div.textbild ul li {
padding: 0px 0px 6px 0px;
margin: 0px 0px 0px 0px;
list-style-image: url(../img/ul-li.gif);
}
#mitte div.textbild ol {
padding: 4px 0px 4px 0px;
margin: 0px 0px 0px 25px;
}
#mitte div.textbild ol li {
padding: 0px 0px 6px 0px;
margin: 0px 0px 0px 0px;
}
#mitte div.anker {
margin: 0px 45px 0px 25px;
padding: 0px 0px 0px 0px;
color: #999;
background-color: #FFF;
clear: both;
}
#mitte div.anker div.totop {
padding: 5px 0px 0px 0px;
text-align: right;
float: right;
width: 25%;
}
#mitte div.anker div.totop a {
background: url(../img/pic.gif) no-repeat center left;
padding: 0px 0px 0px 16px;
color: #999;
text-decoration: none;
font-size: 0.98em;
}
#mitte div.anker div.totop a:hover {
text-decoration: underline;
}
#mitte div.copyleft {
margin: 0px 45px 5px 25px;
padding: 0px 0px 10px 0px;
background: url(../img/pic.gif) repeat-x top left;
color: #999;
background-color: #FFF;
font-size: 0.98em;
clear: both;
}
#mitte div.copyleft div.cleft {
padding: 5px 0px 0px 0px;
float: left;
}
#rechts {
width: 185px;
position: relative;
padding: 0px 0px 20px 10px;
margin: 0px;
float: right;
font-size: 0.72em;
line-height: 17px;
}
* html #rechts {
width: 195px;
}
#rechts h2 {
padding: 0px 0px 18px 0px;
margin: 0px 0px 8px 0px;
font-size: 1.5em;
vertical-align: top;
color: #444;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
background: url(../img/pic.gif) repeat-x bottom right;
}
#rechts div a {
color: #333;
background: url(../img/pic.gif) no-repeat bottom left;
padding: 0px 3px 0px 11px;
}
#rechts div img {
margin: 4px 0px 4px 0px;
}