Hallo zusammen.
Ich hab nun endlich das passende Design gefunden,
sogar incl dropdown Menu. Leider habe ich das Problem,
dass ich nicht weiß wie ich den Code einfügen muss im Baukasten...
Ich poste hier mal die Codes die ich habe,
evtl kann mir da jemand helfen,wäre super nett.
---------------------------------------------------------------------------------------
index.htm
<!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 -->
<link rel="stylesheet" href="format.css" type="text/css">
<link rel="stylesheet" href="menue.css" type="text/css">
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="ie_format.css" />
<![endif]-->
</head>
<body >
<table align="center" id="breite" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td align="center" 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/s1.jpg" width="22" height="22" border="0" alt=""></td>
<td id="s2"><img src="images/s2.jpg" width="22" height="22" border="0" alt=""></td>
<td id="s3" ><img src="images/s3.jpg" width="22" height="22" border="0" alt=""></td>
</tr>
<tr>
<td valign="top" id="s4" ><img src="images/s4.jpg" width="22" height="62" border="0" alt=""></td>
<td class="haupt" >
<!--ende schatten um die seite oben -->
<!--kopf-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="top1" ><span id="name">.: Name der Homepage :.</span></td>
</tr>
<tr>
<td id="top2" >
<table width="100%" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td align="center" width="100%" height="100%">
</td>
</tr>
</table>
</td>
<tr>
<td align="center" id="top3" >
<div id="all">
<div class="menu" >
<!-- unteres Menu -->
<ul>
<li><a class="hide" href="#">Gruppe1</a>
<!--[if lte IE 6]>
<a href="#">Gruppe1
<table><tr><td>
<![endif]-->
<ul>
<li><a href="index.html">Seite 11</a></li>
<li><a href="index.html">Seite 12</a></li>
<li><a href="index.html">Seite 13</a></li>
<li><a href="index.html">Seite 14</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe2</a>
<!--[if lte IE 6]>
<a href="#">Gruppe2
<table><tr><td>
<![endif]-->
<ul>
<li><a href="index.html">Seite 21</a></li>
<li><a href="index.html">Seite 22</a></li>
<li><a href="index.html">Seite 23</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe3</a>
<!--[if lte IE 6]>
<a href="#">Gruppe3
<table><tr><td>
<![endif]-->
<ul>
<li><a href="index.html">Seite 31</a></li>
<li><a href="index.html">Seite 32</a></li>
<li><a href="index.html">Seite 33</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe4</a>
<!--[if lte IE 6]>
<a href="#">Gruppe4
<table><tr><td>
<![endif]-->
<ul>
<li><a href="index.html">Seite 41</a></li>
<li><a href="index.html">Seite 42</a></li>
<li><a href="index.html">Seite 43</a></li>
<li><a href="index.html">Seite 44</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!-- ende unteres Menu-->
</div>
</div>
<!-- ende menü oben--></td>
</tr>
</table>
<!--ende oben-->
<!-- inhalt-->
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" id="inhalt">
</td>
</tr>
</table>
<!-- ende inhalt-->
<!-- fuss-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="fuss1" ><table align="center" id="menu1" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td >
<a href="index.html" >Home</a></td>
<td>|</td>
<td ><a href="index.html" >Kontakt</a></td>
<td>|</td>
<td ><a href="index.html" >Impressum</a></td>
</tr>
</table>
<!-- ende menü unten -->
</td>
</tr>
<tr>
<td id="fuss2" >Mike Muster GmbH & Co. KG • Spezialstrasse 55 • 55234 Sampletown <br>
</td>
</tr>
</table>
<!-- schatten um die seite mitte und unten -->
<td valign="top" id="s6" ><img src="images/s6.jpg" width="22" height="22" border="0" alt=""></td>
</tr>
<tr>
<td id="s7" ><img src="images/s7.jpg" width="22" height="22" border="0" alt=""></td>
<td id="s8" ><img src="images/s8.jpg" width="202" height="22" border="0" alt=""></td>
<td id="s9" ><img src="images/s9.jpg" width="22" height="22" border="0" alt=""></td>
</tr>
</table>
<!--ende schatten um die seite mitte und unten -->
</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------------
format.css
/* breite der gesamtkonstruktion */
#breite {width:840px}
body
{margin-top: 20px; margin-left: 0px; margin-right: 0px;margin-bottom: 20px; background-color: #bfc8aa;
}
/* überschriften */
h2{ color:#7f9155;
margin-bottom:28px;letter-spacing:2px;
font-family: trebuchet ms,verdana,arial,helvetica, verdana, tahoma, sans-serif;
font-size: 23px;
font-weight:normal;
}
.haupt {background-color:#;border-left:solid 1px #045944;border-right:solid 1px #045944;
border-top:solid 1px #045944;border-bottom:solid 1px #045944;
border:solid 18px #fff;
}
#top1 {height:0px;
background-color:#7f9155;
height:40px;
width:100%;text-align:center;
}
#top2 {background-image:url(http://img.webme.com/pic/d/drachenherz-quelle/earthdancemmm.jpg);
background-repeat:no-repeat;
background-position:50% 50%;
height:412px;
background-color:#405A00;
}
#top3 {
background-color:#7f9155;
height:43px;
border:solid 1px #000;
color:#56686D;
width:100%;
vertical-align:middle;
}
#name {height:0px;;
letter-spacing:2px;
color:#fff;
padding-left:20px;
font-family: trebuchet ms,verdana,arial,helvetica, verdana, tahoma, sans-serif;
font-size:20px
}
#inhalt {height:900px;
color:#7f9155;
padding-top: 60px; padding-bottom: 70px;
padding-left: 45px;padding-right:45px;
background-color:#fff;
letter-spacing:0px;
width:100%;
vertical-align:top;
text-align:left;
font-size: 16px;line-height: 21px;
font-family: trebuchet ms,verdana,arial,helvetica, verdana, tahoma, sans-serif;
letter-spacing:0px;
}
#fuss1 {
color:#153125;background-color:#fff;
letter-spacing:0px;
font-size: 14px;line-height: 20px;
font-family: trebuchet ms,
verdana,arial,helvetica, verdana, tahoma, sans-serif;
height:30px;
text-align:center;
width:100%;
font-style:italic;
padding-bottom:15px
}
#fuss2 {
color:#fff;background-color:#7f9155;
letter-spacing:0px;
font-size: 14px;line-height: 20px;
font-family: trebuchet ms,
verdana,arial,helvetica, verdana, tahoma, sans-serif;
height:90px;
text-align:center;
width:100%;
font-style:italic;
}
/* ========== Schatten um Hauptbereich ========== */
#s1 {
background-image:url(images/s1.jpg);
background-repeat:no-repeat;
background-position: 100% 0%;
height:22px;
line-height:22px;
width:22px;
}
#s2 {
background-image:url(images/s2.jpg);
background-repeat:repeat-x;
background-position: 0% 0%;
height:22px;
line-height:22px;
width:100%;
}
#s3 {
background-image:url(images/s3.jpg);
background-repeat:repeat-x;
background-position: 0% 0%;
height:22px;
line-height:22px;
width:22px;
}
#s4 {
background-image:url(images/s4back.jpg);
background-repeat:repeat-y;
background-position: 100% 100%;
height:100%;
width:22px;
}
#s6 {
background-image:url(images/s6back.jpg);
background-repeat:repeat-y;
background-position: 0% 0%;
height:100%;
width:22px;
}
#s7 {
background-image:url(images/s7.jpg);
background-repeat:no-repeat;
background-position: 100% 0%;
height:22px;
line-height:22px;
width:22px;
}
#s8 {
background-image:url(images/s8.jpg);
background-repeat:repeat-x;
background-position: 0% 0%;
height:22px;
line-height:22px;
width:100%;
}
#s9 {
background-image:url(images/s9.jpg);
background-repeat:no-repeat;
background-position: 0% 0%;
height:22px;
line-height:22px;
width:22px;
}
--------------------------------------------------------------------------------------
ie_format.css
/* aufklappmenü - CODE FÜR IE Vers. 6 */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
.menu ul li a:hover ul li a.hide {
display:none;
}
.menu ul li a:hover {
background-color:#405a00;
color:#fff;
text-decoration:none ;
border:solid 1px #000;
}
.menu ul li a:hover ul {
display:block;
position:absolute;
top:46x;
left:0;
width:206px;
}
.menu ul li a:hover ul li a {
display:block;
background-color:#7f9155;
color:#fff;
border:solid 1px #000;
line-height:40px;
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
}
.menu ul li a:hover ul li a:hover {
background-color:#405a00;
color:#fff;
text-decoration:none ;
border:solid 1px #000;
}
.menu ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
left:206px;
top:0;
color:#fff;
}
.menu ul li a:hover ul li a:hover ul.left {
left:-206px;
}
--------------------------------------------------------------------------------------
menue.css
/*klapp-menü */
#all {
width:840px;
height:100%;
padding: 0px;
margin:0 auto;
text-align:center;
}
/* menue oben */
.menu {
width:100%;
height:40px;
background-color:#7f9155;
position:relative;
z-index:100;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#fff;
background-color:#7f9155;
font-family:verdana, sans-serif;
font-size: 12px;
font-variant:normal;
overflow:hidden;
width: 206px;
margin:1px 1px 0px 1px;
border:solid 1px #fff;
line-height:40px;
text-align:center;
}
.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;
}
/* specific to non IE browsers */
.menu ul li:hover a {
background-color:#405a00;
color:#fff;
text-decoration:none ;
border:solid 1px #fff;
margin:1px 1px 0px 1px;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:42px;
left:0;
width:206px;
}
.menu ul li:hover ul li a.hide {
background-color:#405a00;
color:#fff;
}
.menu ul li:hover ul li:hover a.hide {
background-color:#405a00;
color:#fff;
}
.menu ul li:hover ul li ul {
display: none;
}
/* farb-änderungen der aufklapp-untermenüs, zb seite 11 bis 14 */
.menu ul li:hover ul li a {
display:block;
background:#7f9155;
color:#CFD8BA;
font-style:italic;
border:solid 1px #000;
line-height:40px;
}
/* farb-änderungen nur eines einzelnen punktes der aufklapp-untermenüs, zb. seite 11*/
.menu ul li:hover ul li a:hover {
background-color:#9DAF72;
color:#fff;
text-decoration:none ;
border:solid 1px #000;}
/* =============================================================== */
/* menue unten */
#menu1 a, #menu1 a:visited , #menu1 a:active {display: block;
color:#7f9155;
font-size: 14px;line-height: 20px;
font-family: verdana,arial,helvetica, verdana, tahoma, sans-serif;
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
height:20px;
line-height:20px;
text-align:center;
text-decoration:underline ;
background:transparent
}
#menu1 a:hover {color:#fff; text-decoration:none ;
background-color:#7f9155;
text-decoration:underline ;
}
/* =============================================================== */
/* allgemeine links im text */
a:link, a:visited, a:active{
font-size: 16px;line-height: 21px;
font-family: trebuchet ms,verdana,arial,helvetica, verdana, tahoma, sans-serif;
text-decoration:underline;color:#7f9155;}
a:hover{ text-decoration:none;background-color:#7f9155;
color:#fff;text-decoration:none;}
/* =============================================================== */
