[erledigt] CSS Code Umschreiben???

<div align="center">

<table align="center" id="main_top" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td>

<table align="center" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td id="top">
<!-- menü GANZ oben-->
<table align="left" id="menu" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td ><a href="index.html" >Mail</a></td><td class="trenn2" >|</td>

<td ><a href="index.html" >Kontakt</a></td><td class="trenn2">|</td>
<td ><a href="index.html" >Impressum</a></td><td class="trenn2">|</td>
<td ><a href="index.html" >Nutzung</a></td>
</tr>
</table>
<!-- ende menü GANZ oben-->

</td>
</tr>

<tr>
<td id="top1">

<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="middle" >
<span id="hpname">fun at the beach</span>
<br>
<span id="slogan"> Your Slogan here ...</span></td><td align="left" valign="middle" >
</td>
</tr>
</table >


</td>
</tr>

<tr>
<td id="top2">

<table width="910" align="center" id="menuhorizontal" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="16%" ><a href="index.html" >Home</a></td>
<td class="trenn">|</td>
<td width="16%"><a href="index.html" >Kontakt</a></td>
<td class="trenn">|</td>
<td width="16%"><a href="index.html" >Anfahrt</a></td>
<td class="trenn">|</td>

<td width="16%"><a href="index.html" >Partner</a></td>
<td class="trenn">|</td>
<td width="16%"><a href="index.html" >Impressum</a></td>
<td class="trenn">|</td>
<td width="16%"><a href="index.html" >Über uns</a></td>
</tr>
</table>





</td>
</tr>
</table>



</td>
</tr>
</table>



<table align="center" id="main_inhalt" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" align="center" >


<table id="inhalt" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" id="sp1">

<h2>layout </h2>
Dieses Design heisst: "<i >Fun At The Beach</i>". Es gibt anbei eine zweite Version <a href="index2.html ">index2.html</a> (ohne das Foto oben rechts), so dass Sie wenn Sie mögen ggflls. selber kreativ werden können.
<br>
<br>


<!-- zitat mit schatten -->

<div class="shadow5">
<div class="shadow4">
<div class="shadow3">
<div class="shadow2">
<div class="shadow">

<div align="center" style="background-color:#06618c;background-image:url(images/zitat.jpg);background-repeat:repeat-x;background-position: center top; padding:20px;font-size:20px;line-height:20px;font-family:tahoma,trebuchet ms,verdana,monospace;font-style:italic;color:#fff;text-align:center;width:300px;letter-spacing:0px; border:solid 4px #fff">
<b style="color:#BDD7F0">«</b> Zitat-Text eingerückt und anders formatiert. Duis placerat, ligula nec porta fringilla diam massa laoreet diam. <b style="color:#BDD7F0">»</b>
<br>
<br>

<div style="text-align:center;font-size:14px;font-family:arial,tahoma,trebuchet ms,verdana,monospace;color:#CDE0F3;letter-spacing:2px" align="right">J.F. Kennedy</div>

</div>


</div></div></div></div></div>

<p style="clear:left"> </p>
<!-- ende zitat mit schatten -->

Übrigens: Das vorstehend abgebildete Zitat könnnen Sie bezgl. Höhe, Breite, Schriftformatierung usw. beliebig anpassen, denn beim Schatten bzw. sonstigen Gestaltung wurde keine Grafik verwendet (obwohl es grafisch aussieht). Der Schatten erfolgt hier über eine CSS-Anweisung. Also eine sehr flexible Lösung, gültig für alle Browser. <br>

<br>
<i>Für Fortgeschrittene</i>: Statt des Zitates können Sie hier natürlich auch ein Foto einfügen - schaut auch sehr gut aus, wenn sich der Schatten dann ohne Umweg übers Grafikprogramm automatisch um dieses Foto legt.
Bei dem Foto in der rechten Spalte unter "Example" haben wir diesen Schatteneffekt mal beispielhaft auf das Bild gelegt.
<br>
<br>

<h2>technik</h2>

Die Boxen 1 bis 4 in der rechten Spalte könnten Sie für kleineren Inhalt wie Bilder, Text, Links o.ä. nutzen. Jede Box verlängert sich nach unten automatisch. Wenn nicht benötigt, so lassen sich diese Boxen auch leicht entfernen. Dazu brauchen Sie einfach nur die "div-Bereiche", welche mit "box" klassifiziert sind, im Quelltext zu löschen. Sie könnten aber auch entsprechend weitere Boxen hinzufügen, also darunter kopieren.
Seite ohne Frames. Der Homepagename und Slogan sowie Fusszeile unten (z.B. Adresse) ist leicht und veränderbar als einfacher Text einzutragen.
Dieses Layout ist optimiert für eine Bildschirm - Auflösung ab 1024 x 768. <br>

<br>
<br>






<br>




<h2>navigation</h2>
Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen. Das rechte Menü ist beliebig erweiterbar. Die Menüs ganz oben und ganz unten sind um einige Links erweiterbar.

<br>
<br>
Das Haupt-Menü hat mit der Button-Leiste hat 100 % (100 Prozent von in diesem Fall 910 Pixel). Innerhalb dieser Breitenangabe haben wir das Menü für Sie flexibel angelegt. (hier also: 910 Pixel = 100 Prozent). Jeder Button ist gleich breit, das wirkt optisch nett. Dieses Menü ist nur abhängig von der Länge der Textlinks, d.h. je kürzer die Linkwörter, desto mehr Links sind möglich. Im Moment sehen Sie also 6 Links mit der selben Breite je Link. Ein Link hat hier 16% (denn 6 x 16 = fast 100%). Somit können Sie auch für 8 Buttons einen Prozentwert von 12% oder für 5 Buttons eine Prozentwert von 20% oder für 7 Buttons 14% wählen. (Sie teilen also immer 100 durch die Anzahl der Buttons und runden nach unten ab).

<br>
<br>

Die allgemeinen Links (Links im Text) sehen zur Zeit aus wie nachstehend: Um den Mouseover-Effekt anzuschauen, fahren Sie mit der Maus über den Link: <a href="#">Beispiel-Link </a>
<br>
<br>
<br>


<h2> dead text</h2>Beispiel Füll Text. Fusce bibendum pretium ante. Pellentesque sed enim nec odio laoreet congue. Nullam aliquam rhoncus libero. Morbi vitae sem. Sed quis lorem. Curabitur suscipit vehicula est. Donec venenatis.
Nachfolgend sehen Sie ein Beispiel für eine Liste. Listen sind textliche Aufzählungen, welche automatisch einrücken.


<br>
<br>
<blockquote>Liste mit eigenem Aufzählungszeichen, verlinkt:
<ul class="liste1">
<li><a href="index.html">Curabitur</a>.</li>
<li><a href="index.html">Ullamcorper</a>.</li>
<li><a href="index.html">Magna</a>. </li>

<li><a href="index.html">Aenean</a>.</li>
</ul></blockquote>
<br>

Praesent nisl mi, condimentum sed, bibendum semper, fringilla a, felis. Phasellus tincidunt odio vel nulla. Morbi vitae urna quis nulla imperdiet rhoncus. Aliquam feugiat, nulla non semper mollis, sapien velit rutrum urna, eu vehicula erat risus et leo.

<br>
<br>




Maecenas a nulla. Maecenas nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris eu massa. In semper. Morbi vitae nisl at felis placerat porttitor. Morbi molestie. Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem. In vulputate gravida orci.



</td>
<!-- ende inhalt-->


<td id="sp2" valign="top" >
<img src="images/pixelspace.gif" width="260" height="1" border="0" alt="">


<!--BOX 1-->

<br>

<div class="box1" >

<h3 class="boxheader"><b style="background-color:#2868A2 ;color:fff;padding-left:2px;padding-right:4px">»</b> Spruch. Zitat. Welcome. </h3>

<b style="color:#307CC2;">»</b> Ut accumsan scelerisque felis. Proin at mauris vel tortor lacinia volutpat. Quisque vehicula metus a massa. Curabitur ut dolor nec nunc tempus sagittis.

<b style="color:#307CC2;">«</b>
<br>
<br>

</div>

<!--ende BOX 1-->





<!--BOX 2-->
<div class="box2">

<div id="menu2">
<h3 class="boxheader"><b style="background-color:#2868A2 ;color:fff;padding-left:2px;padding-right:4px">»</b> Navigation. Extern. </h3>

<ul >
<li><a href="index.html" >Partner 1</a></li>
<li><a href="index.html" >Partner 2</a></li>
<li><a href="index.html" >Partner 3</a></li>
<li><a href="index.html" >Sponsor 1</a></li>
<li><a href="index.html" >Sponsor 2</a></li>
<li><a href="index.html" >Weitere Links</a></li>

</ul>
</div>
</div>

<!--ende BOX 2-->
<br>


<!-- BOX 3-->
<div class="box3">

<h3 class="boxheader"><b style="background-color:#2868A2 ;color:fff;padding-left:2px;padding-right:4px">»</b> News.</h3>
<b style="color:#000">Yesterday.</b><br>
Vestibulum velit nunc, hendrerit ac, semper id, lobortis sit amet, velit. In a nunc.<span id="menubox"><img src="images/arrow.gif" width="9" height="10" border="0" alt=""><a href="#" > Weiter</a></span>
<br>
<br>
<b style="color:#000">Today.</b><br>

Vivamus varius justo. Nunc pretium congue massa. In placerat. <span id="menubox"><img src="images/arrow.gif" width="9" height="10" border="0" alt=""><a href="#" > Weiter</a></span>
<br>
<br>
<b style="color:#000">Next Day.</b><br>
Nam eros sem, fermentum in, tincidunt sit amet, fringilla vitae, risus. <span id="menubox"><img src="images/arrow.gif" width="9" height="10" border="0" alt=""><a href="#" > Weiter</a></span>
<br>
<br>

</div>
<!--ende BOX 3-->

<br>

<!--BOX 4-->
<div class="box4">

<h3 class="boxheader"><b style="background-color:#2868A2 ;color:fff;padding-left:2px;padding-right:4px">»</b> Example.</h3>

<!-- zitat mit schatten -->

<div class="shadow5">
<div class="shadow4">
<div class="shadow3">
<div class="shadow2">
<div class="shadow">

<img src="images/foto1.jpg" width="180" height="135" border="0" alt="" style="border:solid 4px #fff;">

</div></div></div></div></div>

<br>
Foto 1: An der Nordsee.<br>
Hier erfolgt der Schatten ohne Grafik und legt sich automatisch auch um Ihr Bild.

</div>
<!--ende BOX 4-->

<!-- ende inhalt--></td>

</tr>
</table>

</td>
</tr>
</table>



<!-- fuss-->
<table id="main_fuss" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="fuss">
Max Muster GmbH • Spezialstrasse 55 • 55234 Sampletown
</td>
</tr>
<tr>
<td id="fuss2">

<!-- menü GANZ unten-->
<table align="center" id="menu" border="0" cellpadding="0" cellspacing="0" >

<tr>
<td ><a href="index.html" >Mail</a></td><td class="trenn2" >|</td>
<td ><a href="index.html" >Kontakt</a></td><td class="trenn2">|</td>
<td ><a href="index.html" >Impressum</a></td><td class="trenn2">|</td>
<td ><a href="index.html" >Nutzung</a></td>
</tr>
</table>
<!-- ende menü GANZ oben-->

</td>

</tr>
</table>
<!-- ende fuss-->


</div>

div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}

/* ================ ALLGEMEIN =============== */


body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px;
background-color: #5599d6; padding:0px;
width:100%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
}
/* hinweis: die schrift für den inhaltsbereich ändern sie weiter unten bei #inbox */


/* scrolleiste internet explorer ab vers.5.5 */
body
{scrollbar-arrow-color: #517188; scrollbar-base-color: #fff;
scrollbar-highlight-color : #517188; scrollbar-shadow-color : #fff;
SCROLLBAR-TRACK-COLOR: #fff;}

/* ================ KOPFBEREICH ================ */

#main_top{width:0px;width:100%;
background-color: #;
background-image:url(images/header.jpg);background-repeat:no-repeat;
background-position:center top;
}


#main_topvers2{width:0px;width:100%;
background-color: #;
background-image:url(images/header2.jpg);background-repeat:no-repeat;
background-position:center top;
}

#top {
height:44px;
text-align:left;
padding-left:20px;

}


#top1 {padding-left:50px;
padding-right:80px;
height:166px;
vertical-align:middle;

color:#DEEDE4;
}

#top2 {
height:56px;
text-align:center;
vertical-align:middle;
color:#b6b6b6;
font-size:14px;

}


#hpname {letter-spacing:-1px;font-size:48px;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
color:#3B6F9D;

}

#slogan {letter-spacing:-1px;font-size:16px;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
color:#3B6F9D;font-style:italic
}

/* ================ INHALTSBEREICH ================ */


#main_inhalt{
width:100%;
height:1000px;
background-image:url(images/back_main.jpg);background-repeat:repeat-y;
background-position:center top;
}

#inhalt{
height:100%;
color:#000;
width:920px
}

ul.liste1 {list-style-image:url(images/kugel.gif)}

#sp1 {height:1100px;
color:#202020;
padding-top: 40px; padding-bottom: 40px;
padding-left: 40px;padding-right:40px;
letter-spacing:0px;
width:100%;
vertical-align:top;
text-align:justify;
font-size: 16px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
}

h3.boxheader {color:#2868A2;
font-size: 16px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
border-bottom:solid 1px #2868A2;font-style:italic}

.box2{
font-size: 11px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;

margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#000;

}

.box1{
font-size: 14px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;

margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#202020;

}

.box3{
font-size: 13px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#202020;

}

.box4{
font-size: 13px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#202020;

}

/* schatteneffekt auf dem zitat */

div.shadow, div.shadow2, div.shadow3, div.shadow4, div.shadow5 {
padding: 1px;
border-radius: 10px;
-moz-border-radius: 10px;
}
div.shadow {
background-color: #8e8e8e;
border: 1px solid #959595;
margin: 0px;
}
div.shadow2 {
background-color: #aaa;
border: 1px solid #bebebe;
margin: 0;
}
div.shadow3 {
background-color: #d1d1d1;
border: 1px solid #e1e1e1;
margin: 0;
}
div.shadow4 {
background-color: #ededed;
border: 1px solid #f6f6f6;
margin: 0;
}
div.shadow5 {
float: left;
background-color: #fcfcfc;
border: 1px solid #fff;
margin: 0.7em 1em;

}


/* ende schatteneffekt auf dem zitat */



#sp2 {
height:1100px;color:#000;font-size: 14px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
padding-right:40px;
padding-top: 30px;
padding-bottom:30px;

}


/* überschriften */
h2{ font-family: arial, helvetica, tahoma ,verdana, sans-serif;
color:#26659D;
margin-bottom:10px;letter-spacing:2px;font-size: 18pt;
border-bottom:dashed 0px #000;
padding-bottom:4px;font-style:italic;
}


/* =============== FUSSBEREICH =============== */

#main_fuss{width:0px;width:100%;

}

#fuss {
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
font-size:12px;
color: #000;
height:103px;
text-align:center;
vertical-align:middle;
letter-spacing:4px;
background-image:url(images/fuss.jpg);background-repeat:no-repeat;
background-position:center top;
}

#fuss2 {
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
font-size:12px;
color: #fff;
height:81px;
text-align:center;
vertical-align:middle;
letter-spacing:0px;
background-color:#396b9c;
background-image:url(images/fuss2.jpg);background-repeat:no-repeat;
background-position:center top;
}

/* menue in box3 (weiter-links unter news) */

#menubox a , #menubox a:visited , #menubox a:active {display:inline;
background-color:#;
color:#000;
font-size: 12px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
text-decoration:underline;
text-align:left;
font-style:normal;
}

#menubox a:hover{
background-color:#225788;
color:#FFf;
text-decoration:underline ;
}

/* menue rechts */

#menu2 {

border: dashed 0px #fff;
background-color:#;
text-align: left;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
padding-bottom:0px;
padding-top:0px;
}

#menu2 ul, #menu2 li {
list-style-type:square;
margin-left:16px;
padding: 0px;
color:#2073A5
}
#menu2 li a:link, #menu2 li a:visited, #menu2 li a:active {display:block;
border-bottom: dashed 0px #C2631D;
width:200px;
color:#000;text-decoration:none;
font-size: 14px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
height: 16px;
line-height: 16px;
padding-left:6px;
}

#menu2 li a:hover { background:TRANSPARENT;
color:#04537D;
text-decoration:underline;
padding-left:6px;
}

/* menue oben */

#menuhorizontal a, #menuhorizontal a:visited , #menuhorizontal a:active {display: block;
color:#fff;
font-weight:bold;
text-transform:capitalize;font-variant:small-caps;
text-decoration:none ;
font-family:verdana, sans-serif;
font-size: 14px;
padding-left: 0px;padding-right: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
border-left:solid 0px #AAAAAA;
height:58px;
line-height:58px;
text-align:center;
}

#menuhorizontal a:hover {
background:transparent;
text-decoration:none ;
color:#fff;
text-decoration:underline ;
border-left:solid 0px #fff;
}
.trenn {width:1px;color:white}

/* allgemeine links im text */

a:link, a:visited, a:active{ font-size: 16px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;color:#000 ;text-decoration:underline;background-color:#;}

a:hover{background-color:#225788;
color:#FFf;text-decoration:none}

/* zweites menue ganz oben und unten */

.trenn2 {width:1px;color:#E4E4E4}

#menu a, #menu a:visited , #menu a:active {display: block;
color:#fff;
text-decoration:none ;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
font-size: 12px;
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-color:#202020;
background:transparent
}

#menu a:hover {color:#fff; text-decoration:underline ;
background:transparent;}
}