CSS - Datei
/* Start Character Encoding */
@charset "ISO-8859-1";
/* Ende Character Encoding */
html {
background-color: #d0cccc;
}
body {
width: 1024px;
margin: auto;
height: 100%;
font-family: Arial, Helvetica, Sans Serif;
font-size: 0.8em;
background-color: #ffffff;
}
/***************************************************************/
/* Start Header */
#header {
width: 1024px;
height: 120px;
background-color: #ffffff;
background-image: url(../images/header.jpg);
background-repeat:no-repeat;
background-position:left;
vertical-align: middle;
}
#header h1 a {
text-decoration: none;
text-indent: -10000px;
display: block;
width: 1024px;
height: 120px;
background-image: url(../images/header.jpg);
background-repeat:no-repeat;
background-position:left;
}
/* Ende Header */
/***************************************************************/
/***************************************************************/
/* Start Navigation */
.nav {
width: 1024px;
background-color: #000000;
padding-top: 10px;
padding-bottom: 10px;
margin-right: 0px;
}
a.nav:link, a.nav:visited {
color: #ffffff;
text-decoration: none;
font-weight: bold;
background: #000000;
padding: 10px;
margin-right: 5px;
border-right-style: solid;
border-right-color: #000000;
border-right-width: 2px;
border-left-style: solid;
border-left-color: #000000;
border-left-width: 2px;
height: 100%;
}
a.nav:hover {
color: #ffffff;
text-decoration: none;
font-weight: bold;
background: #3366ff;
}
a.nav:focus {
color: #ffffff;
text-decoration: none;
font-weight: bold;
background: #3366ff;
}
/* Ende Navigation */
/***************************************************************/
/***************************************************************/
/* Start layout_nav */
#layout_nav {
background-image: url(../images/rundung.jpg);
background-repeat:no-repeat;
background-position:left;
height: 165px;
width: 290px;
}
/* Ende layout_nav */
/***************************************************************/
/***************************************************************/
/* Start Pathway */
.pathway {
width: 1024px;
background-color: #3366ff;
padding-top: 10px;
padding-bottom: 10px;
margin-right: 0px;
background-image: url(../images/pathway.jpg);
background-repeat:no-repeat;
background-position:left;
}
/* Ende Pathway */
/***************************************************************/
/***************************************************************/
/* Container mit runden Ecken auf der Startseite */
.container_blau {
float: left;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
color: #ffffff;
}
.container_blau h1 {
text-align: center;
color: #000000;
font-size: 1.0em;
padding-top: 5px;
padding-bottom: 5px;
}
.bl {
background: url(../images/corner_03.jpg) 0 100% no-repeat #3366ff;
width: 236px;
}
.br {
background: url(../images/corner_04.jpg) 100% 100% no-repeat;
}
.tl {
background: url(../images/corner_01.jpg) 0 0 no-repeat;
}
.tr {
background: url(../images/corner_02.jpg) 100% 0 no-repeat;
padding:10px;
height: 300px;
}
.clear {
font-size: 1px;
height: 1px;
}
/* Ende Container */
/***************************************************************/
/***************************************************************/
/* Start Content / nur fuer Inhaltsseiten, wird nicht auf der
Startseite benutzt */
.content {
position:relative;
left:150px;
top:-100px;
padding-top: 5px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #ffffff;
width: 500px;
padding-bottom: 5px;
text-align:justify;
}
.content td {
vertical-align: top;
}
.content h1 {
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
width: 500px;
background-color: #3366ff;
color: #ffffff;
font-size: 1.0em;
padding-top: 5px;
padding-bottom: 5px;
}
/* Ende Content */
/***************************************************************/
/***************************************************************/
/* Start Footer */
.footer {
width: 1024px;
height: 40px;
background-color: #000000;
color: #ffffff;
font-size: 12px;
text-align: center;
font-weight: bold;
}
a.footer:link, a.footer:visited {
color: #ffffff;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
a.footer:hover {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}
.footer img {
vertical-align: middle;
padding-top: 5px;
padding-bottom: 2px;
}
/* Ende Footer */
/***************************************************************/
HTML-Datei
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>prosensys.de - Startseite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="index, follow" />
<meta name="Author" content="Prosensys, interDV, Thomas Heidmann" />
<meta name="title" content="Prosensys GmbH" />
<meta name="description" content="Mess-und Sensortechnik für die Serienproduktion,Ultraschalltechnik,Ultraschalldichtheitspruefung,Wanddickenmessung, Blasendetektion,Lunkerdetektion,CAQ-Systeme..." />
<meta name="copyright" content="Copyright © 2007 interDV, Bexbach, Saarland" />
<meta name="generator" content="interDV, Bexbach" />
<meta name="keywords" content="Ultraschall,Dichtheitspruefung,Messtechnik,Sensortechnik,LabVIEW,CAQ-Systeme,Ultaschalldichtheitspruefung,Blasendetektion,Wanddickenmessung,Ultraschalltechnik" />
<meta name="page-topic" content="Firmenpräsentation" />
<meta name="page-type" content="Information" />
<meta name="content-language" content="de" />
<meta name="audience" content="all" />
<meta name="revisit-after" content="10 days" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style type="text/css">
<!--
@import url(css/layout.css);
-->
</style>
<link rel="shortcut icon" href="images/prosensys.ico" type="image/x-icon" />
</head>
<body>
<div id="header">
<h1><a href="index.html" title="Zurück zur Startseite">Prosensys GmbH - Starseite</a></h1>
</div>
<div class="nav">
<a class="nav" href="index.html">Home</a>
<a class="nav" href="">Firmenprofil</a>
<a class="nav" href="">Produkte</a>
<a class="nav" href="">Partner</a>
<a class="nav" href="">Kunden</a>
<a class="nav" href="">Kontakt</a>
</div>
<!--
<div class="pathway">
pathway
</div>
-->
<!-- 1. Container der Startseite -->
<div class="container_blau">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
test
</div>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
<!-- Ende erster Container der Startseite -->
<div class="footer">
Copyright © 2007 Prosensys GmbH <a class="footer" href="">Home</a> | <a class="footer" href="impressum.html">Impressum</a> | <a class="footer" href="hinweis.html">rechtlicher Hinweis</a> | <a class="footer" href="http://validator.w3.org/check?uri=referer"><img src="images/valid-xhtml10-blue.png" alt="Valid XHTML 1.0 Transitional" height="31" border="0" width="88" />
</div>
</body>
</html>