ich hätte eine Frage bezüglich des Einbau eines Templates. Ich habe bereits alle Dateien hochgeladen.
Nur bin ich ein absoluter Leie und weiss überhaupt nicht wie ich diese ganzen sachen zusammen setzen kann :-/. Was gehört in dem footer, was in dem Header usw.
Ich brauche lediglich die Hilfe um die sachen zusammen zu setzen und die Info was in dem Header kommt und was in dem Footer.
Wer kann sich die zeit nehmen und mir dabei behilflich sein?
Ich habe mir das Template 121 ausgesucht.
http://www.on-mouseover.de/templates/te ... 1_128.html
Vorab sage ich schon mal im Namen der Hunde herzlichen DANK!
format.css
Code: Alles auswählen
/* ====== allgemein ====== */
/* breite der gesamtkonstruktion */
#breite {width:960px;}
body {
margin-bottom:520px;
margin-top: 45px;
margin-left: 0px;
margin-right: 0px;
background-attachment:fixed;
background-position: 50% 55%;
background-repeat:no-repeat;
background-image:url(images/logo.jpg);
background-color: #569D63;
font-family : verdana,arial, helvetica, tahoma, verdana, sans-serif;
font-size: 15px;line-height: 25px;
}
/* schatten-effekt beim homepagenamen */
.name {font: normal 31px georgia,verdana, sans-serif; color: #000;
background:transparent;
font-weight:bold;
margin:0px;padding:0px;
height:30px;
letter-spacing:16px;
}
.name_doppelt {font: normal 31px georgia,verdana, sans-serif; color: #F0F0F0;
background:transparent;
font-weight:bold;
margin:0px;padding:0px;
position:relative;height:30px;
left: -1px; top: -31px;
letter-spacing:16px;
}
.haupt {
background-image:url(images/weiss_70.png);
background-repeat:repeat;
background-position: 0% 0%;
padding:20px
}
/* überschriften */
h1, h2, h3, h4, h5, h6 {
font-weight:normal;color:#2f2f2f;
}
h1{text-align:left;
margin-bottom:39px;letter-spacing:-1px;
font-size: 24px;
}
h2{text-align:left;
margin-bottom:29px;letter-spacing:-1px;
font-size: 22px;
}
h3 {text-align:left;
margin-bottom:4px;letter-spacing:0px;
font-size: 16px;
}
/* ====== kopf und inhalt ====== */
#top2 {height:120px;
text-align:center;
vertical-align:middle;
padding-top:0px;
}
#top1{
border:solid 1px #000;
text-align:right;
background-image:url(images/weiss_60.png);
background-repeat:repeat;
background-position: 0% 0%;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
#inhalt {width:100%;
font-size: 15px;
line-height: 25px;
height:100%;
color:#2F2F2F;
text-align:justify;
vertical-align:top;
padding-left: 0px;
padding-right:0px;
}
.textbox {height:900px;
font-size: 15px;line-height: 25px;
vertical-align:top;
padding-top: 30px;
padding-bottom: 90px;
padding-left:35px;
padding-right:35px;
text-align:justify;
border:solid 1px #000;
background-image:url(images/weiss_60.png);
background-repeat:repeat;
background-position: 0% 0%;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
#sidebar {width: 260px;
padding-top:10px;
padding-right:15px;
vertical-align:top;
font-size: 13px;
line-height: 20px;
}
.box {font-size: 13px;
line-height: 20px;
vertical-align:top;
padding-top : 30px;
padding-bottom : 30px;
padding-left : 12px;
padding-right : 22px;
margin-left:0px;
margin-bottom:10px;
background-image:url(images/weiss_60.png);
background-repeat:repeat;
background-position: 0% 0%;
border:solid 1px #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
h3.sidebarheader {color:#2f2f2f;
vertical-align:top;
font-size: 16px;
letter-spacing:0px;
font-weight:normal;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
padding-top:0px;margin-bottom:10px;margin-top:0px;
}
/* ====== fussbereich ====== */
#fuss {padding-bottom:0px;
background-color:#;
width:100%;
text-align:center;
vertical-align:middle;
color:#2f2f2f;
}
#fuss_bottom {
color:#2f2f2f;
letter-spacing:3px;
font-size:13px;
height:40px;
line-height:40px;
text-align:center;
vertical-align:middle;
border:solid 1px #000;
background-image:url(images/weiss_60.png);
background-repeat:repeat;
background-position: 0% 0%;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
#fuss_inhalt {font-size:12px;
height:170px;
font-size: 14px;
line-height: 20px;
text-align:center;
vertical-align:middle;
letter-spacing:1px;
}
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz" >
<title>homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz</title>
<!-- Der nachfolgende einzeilige Copyright-Vermerk (c) ist nicht zu löschen.-->
<!-- (c)Copyright by S.I.S.Papenburg / www.on-mouseover.de/templates/ -->
<!--Ein Entfernen dieses Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen -->
<!-- Der nachfolgende Hinweis-Vermerk darf gelöscht werden-->
<!-- Hinweis:
Das Anbieten dieser Vorlage auf einer Webseite, CD, DVD oder anderen Bild/Tonträgern ist untersagt.
Nutzen dürfen Sie diese Vorlage aber auf einer Webseite wie folgt:
Die Vorlage kann privat (kostenlos) und kommerziell/gewerblich (gegen Bezahlung) für Sie selbst oder eine dritte Person (andere Person oder Firma) genutzt werden.
Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen.
Lesen Sie auf der Webseite www.on-mouseover.de/templates/
bitte die Nutzungsbedingungen nach.
-->
<link rel="stylesheet" href="format.css" type="text/css">
<link rel="stylesheet" href="menue.css" type="text/css">
<link rel="stylesheet" href="schatten.css" type="text/css">
<link rel="stylesheet" href="klapp_menu.css" type="text/css">
</head>
<body >
<table width="100%" align="center" id="breite" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%">
<!--schatten um die seite oben -->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" id="s1" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
<td id="s2"><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
<td id="s3" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" id="s4" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
<td class="haupt" width="100%">
<!--ende schatten um die seite oben -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="top1">
<div id="all">
<!-- Menü Klapp -->
<div class="menu" >
<ul>
<li><a class="hide" href="#"><img src="images/arrow.png" width="11" height="10" border="0" alt=""> GRUPPE 01</a>
<ul>
<li><a href="index.html">Link 01</a></li>
<li><a href="index.html">Link 02</a></li>
<li><a href="index.html">Link 03</a></li>
<li><a href="index.html">Link 04</a></li>
<li><a href="index.html">Link 05</a></li>
<li><a href="index.html">Link 06</a></li>
<li><a href="index.html">Link 07</a></li>
<li><a href="index.html">Link 08</a></li>
<li><a href="index.html">Link 09</a></li>
<li><a href="index.html">Link 10</a></li>
</ul>
</li>
<li><a class="hide" href="#"><img src="images/arrow.png" width="11" height="10" border="0" alt=""> GRUPPE 02</a>
<ul>
<li><a href="index.html">Link 01</a></li>
<li><a href="index.html">Link 02</a></li>
<li><a href="index.html">Link 03</a></li>
<li><a href="index.html">Link 04</a></li>
<li><a href="index.html">Link 05</a></li>
<li><a href="index.html">Link 06</a></li>
<li><a href="index.html">Link 07</a></li>
<li><a href="index.html">Link 08</a></li>
<li><a href="index.html">Link 09</a></li>
</ul>
</li>
<li><a class="hide" href="#"><img src="images/arrow.png" width="11" height="10" border="0" alt=""> GRUPPE 03</a>
<ul>
<li><a href="index.html">Link 01</a></li>
<li><a href="index.html">Link 02</a></li>
<li><a href="index.html">Link 03</a></li>
<li><a href="index.html">Link 04</a></li>
<li><a href="index.html">Link 05</a></li>
<li><a href="index.html">Link 06</a></li>
<li><a href="index.html">Link 07</a></li>
<li><a href="index.html">Link 08</a></li>
</ul>
</li>
<li><a class="hide" href="#"><img src="images/arrow.png" width="11" height="10" border="0" alt=""> GRUPPE 04</a>
<ul>
<li><a href="index.html">Link 01</a></li>
<li><a href="index.html">Link 02</a></li>
<li><a href="index.html">Link 03</a></li>
<li><a href="index.html">Link 04</a></li>
<li><a href="index.html">Link 05</a></li>
<li><a href="index.html">Link 06</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- ende Menü Klapp --> </td>
</tr>
<tr>
<td id="inhalt" >
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td rowspan="2" id="sidebar" >
<div class="box"><h3 class="sidebarheader">Lorem Ipsum</h3>
Lorem ipsum 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.<br>
</div>
<div class="box"><h3 class="sidebarheader">Vero Eos</h3>
<div style="text-align:center;"><img style="border:solid 0px #efefef;border-radius: 12px;
-moz-border-radius: 12px;" src="images/bild.jpg" width="200" height="142" border="0" alt=""></div>
</div>
<div class="box"><h3 class="sidebarheader">Navigation 2nd</h3>
<div id="menu02">
<ul >
<li><a href="index.html" >Link 01</a></li>
<li><a href="index.html" >Link 02 </a></li>
<li><a href="index.html" >Link 03 </a></li>
<li><a href="index.html" >Link 04</a></li>
<li><a href="index.html" >Link 05 </a></li>
<li><a href="index.html" >Weitere Links </a></li>
</ul>
</div></div>
<div class="box"><h3 class="sidebarheader">Navigation 3rd</h3>
<div id="menu03">
<ul >
<li><a href="index.html" >Link 01</a></li>
<li><a href="index.html" >Link 02 </a></li>
<li><a href="index.html" >Link 03 </a></li>
</ul>
</div>
</div>
</td>
<td id="top2" >
<div class="name">~In Balance~</div>
<div class="name_doppelt">~In Balance~</div>
</td>
</tr>
<tr>
<td class="textbox" >
<h2>Die Technik</h2>
<h3>Die Haupt-Grafik</h3>
Die Haupt-Grafik (namens "logo.jpg") können Sie leicht tauschen. Diese ist als Hintergrundgrafik definiert und 1600 Pixel breit, so daß sich diese verschiedenen Bildschirmauflösungen gut anpasst. Das Besondere ist, daß sich auch Ihre Grafik sich dann hinter die <b>transparente</b> Konstruktion legen wird.
<br>
<br>
<h3>Das Haupt-Menü</h3>
Oben haben wir für Sie ein <b>Aufklapp-Menü</b> eingebaut. Fahren Sie über die Links der Gruppen 01-04 und es öffnen sich die Untermenüs. Farblich sind die Untermenüs sowie der Mouseover in Grün-Tönen gehalten, passend zur Haupt-Grafik, Falls Sie Ihr eigenes Foto einbauen, könnten Sie eben auch die Farben beim Aufklapp-Menü entsprechend anpassen.
<br>
<br>
<br>
<h2>Technik, die Zweite</h2>
<h3>Die Hintergrund-Grafik wird freigelegt</h3>
Wenn Sie die Seite ganz nach unten scrollen, Sehen Sie immer mehr vom Hintergrund-Foto im Original, also ohne den Transparenz-Effekt. Sie können selber bestimmen, wieviel man von diesem Foto zu sehen bekommt, indem Sie den unteren Randabstand vorgeben. Einzustellen ist das in der Datei <b>format.css</b>.
<br>
<br>
Dort steht fast ganz oben bei "<i>body</i>" der Wert "margin-bottom:520px;" . Wir haben also einen Rand nach unten mit 520 Pixeln gesetzt. Probieren Sie bei Bedarf andere Pixelwerte.
<br>
<br>
<h3>Schatten-Effekt beim Text-Homepagenamen</h3>
Der Homepagename wirkt grafisch, ist aber einfacher Text. Hier wurde der Text zweimal als <b>div-Bereich</b> angelegt und minimal versetzt. Diese Technik funktioniert in jedem Browser. Somit ist die Schrift auf nahezu jeder Hintergrund-Grafik lesbar. In unserem Beispiel beim Namen "In Balance" liegt Weiß auf Schwarz, je nach Bedarf dreht man die Farben um oder wählt ganz andere Farben.
<br>
<br>
<h3>Doppel-Transparenz</h3>
Auf einer transparenten Konstruktion (enthält z.B. den Homepagenamen) liegen noch einmal transparente Felder, hier das Inhaltsfeld, die Boxen auf der linken Seite und die Felder oben (Menü) und unten (Adresse). Der Hintergrund scheint durch beide Transparenz-Ebenen durch. Tipps zur Änderung der Transparenz lesen Sie hier auf <a href="index2.html ">index2.html</a> anbei.
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- fuss-->
<table id="fuss" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" id="fuss_inhalt" >
</td>
</tr><tr>
<td id="fuss_bottom">Mike Muster GmbH & Co. KG ~ Spezialstrasse 55 ~ 47234 Sampletown</td>
</tr>
</table>
</td>
<!-- schatten um die seite mitte und unten -->
<td valign="top" id="s6" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
</tr>
<tr>
<td id="s7" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
<td id="s8" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
<td id="s9" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
</tr>
</table>
<!--ende schatten um die seite mitte und unten -->
</td>
</tr>
</table>
</body>
</html>
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz" >
<title>homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz</title>
<!-- Der nachfolgende einzeilige Copyright-Vermerk (c) ist nicht zu löschen.-->
<!-- (c)Copyright by S.I.S.Papenburg / www.on-mouseover.de/templates/ -->
<!--Ein Entfernen dieses Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen -->
<!-- Der nachfolgende Hinweis-Vermerk darf gelöscht werden-->
<!-- Hinweis:
Das Anbieten dieser Vorlage auf einer Webseite, CD, DVD oder anderen Bild/Tonträgern ist untersagt.
Nutzen dürfen Sie diese Vorlage aber auf einer Webseite wie folgt:
Die Vorlage kann privat (kostenlos) und kommerziell/gewerblich (gegen Bezahlung) für Sie selbst oder eine dritte Person (andere Person oder Firma) genutzt werden.
Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen.
Lesen Sie auf der Webseite www.on-mouseover.de/templates/
bitte die Nutzungsbedingungen nach.
-->
<link rel="stylesheet" href="format.css" type="text/css">
<link rel="stylesheet" href="menue.css" type="text/css">
<link rel="stylesheet" href="schatten.css" type="text/css">
<link rel="stylesheet" href="klapp_menu.css" type="text/css">
</head>
<body >
<table width="100%" align="center" id="breite" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%">
<!--schatten um die seite oben -->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" id="s1" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
<td id="s2"><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
<td id="s3" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" id="s4" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
<td class="haupt" width="100%">
<!--ende schatten um die seite oben -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="top1">
<div id="all">
<!-- Menü Klapp -->
<div class="menu" >
<ul>
<li><a class="hide" href="#"><img src="images/arrow.png" width="11" height="10" border="0" alt=""> GRUPPE 01</a>
<ul>
<li><a href="index.html">Link 01</a></li>
<li><a href="index.html">Link 02</a></li>
<li><a href="index.html">Link 03</a></li>
<li><a href="index.html">Link 04</a></li>
<li><a href="index.html">Link 05</a></li>
<li><a href="index.html">Link 06</a></li>
<li><a href="index.html">Link 07</a></li>
<li><a href="index.html">Link 08</a></li>
<li><a href="index.html">Link 09</a></li>
<li><a href="index.html">Link 10</a></li>
</ul>
</li>
<li><a class="hide" href="#"><img src="images/arrow.png" width="11" height="10" border="0" alt=""> GRUPPE 02</a>
<ul>
<li><a href="index.html">Link 01</a></li>
<li><a href="index.html">Link 02</a></li>
<li><a href="index.html">Link 03</a></li>
<li><a href="index.html">Link 04</a></li>
<li><a href="index.html">Link 05</a></li>
<li><a href="index.html">Link 06</a></li>
<li><a href="index.html">Link 07</a></li>
<li><a href="index.html">Link 08</a></li>
<li><a href="index.html">Link 09</a></li>
</ul>
</li>
<li><a class="hide" href="#"><img src="images/arrow.png" width="11" height="10" border="0" alt=""> GRUPPE 03</a>
<ul>
<li><a href="index.html">Link 01</a></li>
<li><a href="index.html">Link 02</a></li>
<li><a href="index.html">Link 03</a></li>
<li><a href="index.html">Link 04</a></li>
<li><a href="index.html">Link 05</a></li>
<li><a href="index.html">Link 06</a></li>
<li><a href="index.html">Link 07</a></li>
<li><a href="index.html">Link 08</a></li>
</ul>
</li>
<li><a class="hide" href="#"><img src="images/arrow.png" width="11" height="10" border="0" alt=""> GRUPPE 04</a>
<ul>
<li><a href="index.html">Link 01</a></li>
<li><a href="index.html">Link 02</a></li>
<li><a href="index.html">Link 03</a></li>
<li><a href="index.html">Link 04</a></li>
<li><a href="index.html">Link 05</a></li>
<li><a href="index.html">Link 06</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- ende Menü Klapp --> </td>
</tr>
<tr>
<td id="inhalt" >
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td rowspan="2" id="sidebar" >
<div class="box"><h3 class="sidebarheader">Lorem Ipsum</h3>
Lorem ipsum 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.<br>
</div>
<div class="box"><h3 class="sidebarheader">Vero Eos</h3>
<div style="text-align:center;"><img style="border:solid 0px #efefef;border-radius: 12px;
-moz-border-radius: 12px;-webkit-border-radius: 12px" src="images/bild.jpg" width="200" height="142" border="0" alt=""></div>
</div>
<div class="box"><h3 class="sidebarheader">Navigation 2nd</h3>
<div id="menu02">
<ul >
<li><a href="index.html" >Link 01</a></li>
<li><a href="index.html" >Link 02 </a></li>
<li><a href="index.html" >Link 03 </a></li>
<li><a href="index.html" >Link 04</a></li>
<li><a href="index.html" >Link 05 </a></li>
<li><a href="index.html" >Weitere Links </a></li>
</ul>
</div></div>
<div class="box"><h3 class="sidebarheader">Navigation 3rd</h3>
<div id="menu03">
<ul >
<li><a href="index.html" >Link 01</a></li>
<li><a href="index.html" >Link 02 </a></li>
<li><a href="index.html" >Link 03 </a></li>
</ul>
</div>
</div>
</td>
<td id="top2" >
<div class="name">~In Balance~</div>
<div class="name_doppelt">~In Balance~</div>
</td>
</tr>
<tr>
<td class="textbox" >
<h2>Tipps zur Transparenz</h2>
<h3>Transparenz-Grafiken</h3>
Anbei sind verschiedene Transparenz-Grafiken mit unterschiedlichen Transparenz-Stufen, mit denen Sie bei Bedarf epxerimentieren können. Je nachdem ob Sie das Hintergrundfoto wechseln wollen und welche Farben dieses hat. Vielleicht wollen Sie ja auch unser Foto beibehalten und trotzdem die Dichte der Transparenz erhöhen oder erniedrigen.
<br>
<br>
Die 9 Transparenzgrafiken heißen "weiss_10.png" bis "weiss_90.png", die Grafiken sind von uns so benannnt, damit wir die abgespeicherte Transparenzstufe erkennen können. "weiss_10.png" bedeutet hier, das bei der Farbe Weiss der Hintergrund nur zu 10% durscheint, wobei dieser bei "weiss_90.png" eben zu 90% transparent ist.
<br>
<br>
<h3>Diese Grafiken haben wir verwendet</h3>
Die Grundkonstruktion bekommt die Grafik "weiss_70.png".
Die anderen Felder (hier das Inhaltsfeld, die Boxen auf der linken Seite und die Felder oben (Menü) und unten (Adresse) erhalten die Grafik "weiss_60.png". Der Hintergrund scheint damit durch beide Transparenz-Ebenen durch.
<br>
<br>
<br>
Hier geht es zurück zur Seite <a href="index.html ">index.html</a>
<br>
<br>
<br>
<br>
<!-- schräg gestelltes bild plus abgerundetete ecken auf dem bild ohne umweg übers grafikprogramm- per CSS3 -können die modernen browser-->
<div style="text-align:center;"><img style="border-radius: 12px;-moz-border-radius: 12px;-webkit-border-radius: 12px;-webkit-transform: rotate(20deg);-ms-transform: rotate(20deg); transform: rotate(20deg);" src="images/bild.jpg" width="200" height="142" border="0" alt=""></div>
<!-- ende schräg gestelltes bild per CSS3 ...-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- fuss-->
<table id="fuss" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" id="fuss_inhalt" >
</td>
</tr><tr>
<td id="fuss_bottom">Mike Muster GmbH & Co. KG ~ Spezialstrasse 55 ~ 47234 Sampletown</td>
</tr>
</table>
</td>
<!-- schatten um die seite mitte und unten -->
<td valign="top" id="s6" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
</tr>
<tr>
<td id="s7" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
<td id="s8" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
<td id="s9" ><img src="images/pixelspace.gif" width="30" height="30" border="0" alt=""></td>
</tr>
</table>
<!--ende schatten um die seite mitte und unten -->
</td>
</tr>
</table>
</body>
</html>
Code: Alles auswählen
/* ========================= klapp-menü ====================================== */
#all {
width:900px;
height:100%;
margin:0 auto;
text-align:left;
}
/* menue oben */
.menu {padding-left:0px;padding-left: 10px;
padding-right: 10px;
width:880px;
height:40px;
position:relative;
z-index:100;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#0F0F0F;
padding-left:0px;
font-family:arial,verdana,trebuchet ms,georgia,arial, helvetica, tahoma ,verdana, sans-serif;
font-size: 14px;
font-variant:normal;
overflow:hidden;
width: 220px;
margin:0px;
line-height:40px;
height:40px;
text-align:center;
letter-spacing:1px;
}
.menu ul {
padding:0;
margin:0 auto;
list-style: none;
}
.menu ul li {
float:left;
position:relative;margin:0px 0px 0px 0px;
}
.menu ul li ul {
display: none;border-top:solid 1px #000;
}
/* specific to non IE browsers */
.menu ul li:hover a {
width: 218px;
color:#DFDFDF;
text-decoration:none ;
background-color:#515151;
height:40px;line-height:40px;
margin-right:0px;
border-left:solid 1px #000;
border-right:solid 1px #000;
text-align:center;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:40px;
left:0;border-bottom:solid 1px #000;
}
.menu ul li:hover ul li a.hide {
color:#fff;
}
.menu ul li:hover ul li:hover a.hide {
color:#fff;
}
.menu ul li:hover ul li ul {
display: none;
}
/* farb-änderungen bei onmouseover alle links des untermenüs */
.menu ul li:hover ul li a {
display:block;
width: 218px;
color:#2f2f2f;
font-style:normal;
background-color:#60A667;
height:30px;
line-height:30px;
border-left:solid 1px #000;
border-right:solid 1px #000;
text-align:center;
padding-left:0px;
}
/* farb-änderungen bei onmouseover nur eines einzelnen links des untermenüs*/
.menu ul li:hover ul li a:hover {
color:#DFDFDF;
text-decoration:underline;
background-color:#x48824E;
text-decoration:underline;
margin:0px;
text-align:center;background-image:url(images/xline.png);
background-repeat:no-repeat;
background-position: 50% 50%;
}
/* =============================================================== */
Code: Alles auswählen
/* ======================= Navigation - Hier sind die Menüs definiert ======================================== */
/* hinweis: das aufklapp-menü finden sie in der datei klapp_menu.css */
/* =============================================================== */
/* allgemeine links im text */
a:link, a:visited, a:active{
color:#2f2f2f;
font-size: 15px;line-height: 25px;
text-decoration:underline;}
a:hover{
color:#000;text-decoration:none;
}
/* =============================================================== */
/* menue unten - nicht eingebaut */
#menu2 a, #menu2 a:visited , #menu2 a:active {display: block;
font-family:arial,helvetica,verdana,times,trebuchet ms, serif;
color:#2f2f2f;
text-decoration:none ;
font-size: 15px;
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
height:40px;
line-height:40px;
text-align:center;
background:transparent;
vertical-align:middle;
}
#menu2 a:hover {color:#CFCFCF;
text-decoration:underline;
background-image:url(images/arrow3.png);
background-repeat:no-repeat;
background-position: 50% 100%;
}
/* =============================================================== */
/*=========== menü rechts 2nd===========*/
#menu02{background:transparent;
text-align:left;
margin:0px;padding-top:0px;
}
#menu02 ul, #menu02 li {
list-style-type: none;
margin-left:0px;
padding-left: 8px;
}
#menu02 li a:link, #menu02 li a:visited, #menu02 li a:active {
display:block;
text-align:left;
padding-left:15px;
font-family : verdana,arial, helvetica, tahoma, verdana, sans-serif;
font-size: 13px;
color:#2f2f2f;
height: 22px;
line-height: 22px;
letter-spacing:0px;
text-decoration:none;
text-transform:uppercase;
}
#menu02 li a:hover {
color:#000;
text-decoration:underline;
text-align:left;
background:transparent;
background-image:url(images/arrow2.png);
background-repeat:no-repeat;
background-position: 0% 50%;
}
/*=========== menü rechts 3rd===========*/
#menu03{background:transparent;
text-align:left;
margin:0px;padding-top:0px;
}
#menu03 ul, #menu03 li {
list-style-type: none;
margin-left:0px;
padding-left: 8px;
}
#menu03 li a:link, #menu03 li a:visited, #menu03 li a:active {
display:block;
text-align:left;
padding-left:15px;
font-family : verdana,arial, helvetica, tahoma, verdana, sans-serif;
font-size: 13px;
color:#2f2f2f;
height: 22px;
line-height: 22px;
letter-spacing:0px;
text-decoration:none;
text-transform:uppercase;
}
#menu03 li a:hover {
color:#000;
text-decoration:underline;
text-align:left;
background:transparent;
background-image:url(images/arrow2.png);
background-repeat:no-repeat;
background-position: 0% 50%;
}
Code: Alles auswählen
/* ========== -Rahmen mit Schatten um Hauptbereich ========== */
#s1 {
background-image : url(images/s1.png);
background-repeat : no-repeat;
background-position : 100% 100%;
}
#s2 {
background-image : url(images/s2.png);
background-repeat : repeat-x;
background-position : 50% 100%;
}
#s3 {
background-image : url(images/s3.png);
background-repeat : no-repeat;
background-position : 0% 100%;
}
#s4 {
background-image : url(images/s4.png);
background-repeat : repeat-y;
background-position : 100% 100%;
height : 100%;
}
#s6 {
background-image : url(images/s6.png);
background-repeat : repeat-y;
background-position : 0% 0%;
}
#s7 {
background-image : url(images/s7.png);
background-repeat : no-repeat;
background-position : 100% 0%;
}
#s8 {
background-image : url(images/s8.png);
background-repeat : repeat-x;
background-position : 0% 0%;
}
#s9 {
background-image : url(images/s9.png);
background-repeat : no-repeat;
background-position : 0% 0%;
}
. Ist also generell interessant für mich dies zu erfahren wie es mittg gesetzt werden 
. Ich finde den Fehler nicht warum :-/ 
