MIDN8

Titel der neuen Seite

Text über dem Design:

<!-- Anfang des Scriptes -->

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->

<!-- BEGINN ALLE CONTAINER VOM DESIGN -->
<div id="Design">

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Hauptmenü 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="Unterlink 1.1">Untermenü 1.1</a></li>
<li><a href="Unterlink 1.2">Untermenü 1.2</a></li>
<li><a href="Unterlink 1.3">Untermenü 1.3</a></li>
<li><a href="Unterlink 1.4">Untermenü 1.4</a></li>
<li><a href="Unterlink 1.5">Untermenü 1.5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Hauptmenü 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="Unterlink 2.1">Untermenü 2.1</a></li>
<li><a href="Unterlink 2.2">Untermenü 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Hauptmenü 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="Unterlink 3.1">Untermenü 3.1</a></li>
<li><a href="Unterlink 3.2">Untermenü 3.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Hauptmenü 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="Unterlink 4.1">Untermenü 4.1</a></li>
<li><a href="Unterlink 4.2">Untermenü 4.2</a></li>
</ul>
</li>
</div>

Text unter dem Design:

<div id="unten">
<table id="navunten" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td style="padding-left:5px; padding-right:5px;"> <a href="LINK"><img src="BUTTON-URL" border="0" /></a> </td>
<td style="padding-left:5px; padding-right:5px;"> <a href="LINK"><img src="BUTTON-URL" border="0" /></a> </td>
<td style="padding-left:5px; padding-right:5px;"> <a href="LINK"><img src="BUTTON-URL" border="0" /></a> </td>
<td style="padding-left:5px; padding-right:5px;"> <a href="LINK"><img src="BUTTON-URL" border="0" /></a> </td>
<td style="padding-left:5px; padding-right:5px;"> <a href="LINK"><img src="BUTTON-URL" border="0" /></a> </td>
<td style="padding-left:5px; padding-right:5px;"> <a href="LINK"><img src="BUTTON-URL" border="0" /></a> </td>
</tr>
</table>
</div>

</div>

CSS-Code ohne Style Tags:

/* Nullformatierung für alle Browser */
* #design{ margin: 0 auto; }

/* Hintergrund hinter Design  -  Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
background-color:#882220;
background-image:url(https://img.webme.com/pic/t/table-test/bg_body_red.png);
background-repeat:repeat-x;
font-family: arial, sans-serif;
font-size: 12px;
overflow: auto;
margin: 0px; }


/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
margin-top: 130px ;
margin-left: 155px;
width:900px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 151px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #882220;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 17px;
color: #FFFFFF;border:1px solid #640000;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color='#640000', Positive='true');
-moz-box-shadow: 2px 2px 4px #000000, 2px 2px 4px #640000; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #FD9733;
background-image: url(URL);
color: #FFFFFF; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 12px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF; }


/* Container mit Schatten + gerundete Ecken */
#container {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
width: 980px;
overflow: hidden;
background-color: #FD9733;
background-image:url(https://img.webme.com/pic/t/table-test/bg_container_red.png);
background-repeat: repeat-x;
border: 1px solid #640000;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=4, OffY=4, Color='#640000', Positive='true');
-moz-box-shadow: 4px 4px 6px #000000, 4px 4px 6px #640000;
z-index:1; }


/* Header-Feld */
#header_container {
position: absolute;
top: 30px;
left: 50%;
margin-left: -465px;
width: 728px;
height: 102px;
background-image: url(https://img.webme.com/pic/d/dersupermarkt/supermarkt.jpg);
border:1px solid #640000;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color='#640000', Positive='true');
-moz-box-shadow: 2px 2px 4px #000000, 2px 2px 4px #640000;
z-index:3; }


/* Feld der Navigation */
#nav_container {
float:left;
margin-left:22px;
margin-top:125px;
margin-right:10px;
margin-bottom: 20px;
width:120px;
border: 0px solid #c9c9c9; }


li.nav_element {
list-style-type: none;
margin-bottom: 7px; }

/* Navi-Button mit Schatten + gerundete Ecken */
li.nav_element a {
display: block;
padding-left:6px;
padding-top:2px;
padding-bottom:2px;
color: #55565E;
font-size:12px;
font-family:arial;
text-align:left;
text-decoration: none;
background-color:#fd9733;
border: 1px solid #640000;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color='#343434',Positive='true');
-moz-box-shadow: 2px 2px 4px #343434, 2px 2px 4px #640000; }

/* Hover Button */
li.nav_element a:hover {
color: #FFFFFF;
background-color: #A75001; }

/* gerade besuchte Seite */
li.checked_menu a {
color: #FFFFFF;
background-color: #882220; }

/* Textfeld mit Schatten + gerundete Ecken */
#content {
float:left;
margin-top:154px;
margin-right: 20px;
margin-bottom: 20px;
width:563px;
min-height:230px;
color:#000000;
font-size:13px;
font-family:arial;
text-align:left;
background-color:#FFFFFF;
background-image: none;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
border: 1px solid #640000;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color='#640000', Positive='true');
-moz-box-shadow: 2px 2px 4px #343434, 2px 2px 4px #640000; }

/* Linkfarbe und Linkgröße im Textfeld */
#content a {
color: #000080;
font-size: 13px;
font-family: arial;
text-decoration: none;}

/* rechte Box mit Schatten + gerundete Ecken */
#sidebar_container {
float: right;
margin-top: 18px;
margin-right: 20px;
margin-bottom: 20px;
width: 170px;
min-height: 375px;
padding: 5px;
color: #000000;
font-size:13px;
font-family: arial;
text-align: center;
background-color: #FFFFFF ;
border:1px solid #640000;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color='#640000', Positive='true');
-moz-box-shadow: 2px 2px 4px #000000, 2px 2px 4px #640000; }

/* Linkfarbe + Linkgröße in Box */
#sidebar_container a {
color: #000080;
font-size: 13px;
font-family: arial;
text-decoration: none;}

/* Streifen unter dem Design */
#unten {
margin: auto;
width: 960px;
color: #000000;
font-size:14px;
font-family: arial;
padding: 10px;
text-align: center;
margin-bottom: 50px;
background-color: #FD9733;
border: 1px solid #640000;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='#640000', Positive='true');
-moz-box-shadow: 4px 4px 6px #000000, 4px 4px 6px #640000; }

/* Alle Bilder mit + Schatten + abgerundete Ecken */
img {
margin-left: 5px;
margin-right: 5px;
border: 1px solid #343434;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color='#343434', Positive='true');
-moz-box-shadow: 3px 3px 4px #000000, 3px 3px 4px #343434; }


/* unnötige DIVs aus dem Design entfernt */
#pre_content {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#post_content {display: none;}
#below_content{display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
div.header {display: none;}
#counter {display: none;}
h1#header {display: none;}
h2#title span {display: none;}
#sidebar_heading {display: none;}
#nav_heading {display: none;}