Home
Beachtet das wenn ihr das Layout verändern wollt das ihr euch mit CSS auskennen solltet.
Text über dem Deisgn:
<div id="Mein_Bild"></div>
<div id="navibox">
<p class="ueberschrift">ueberschrift</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
</td>
</tr>
</tbody></table>
<br>
<br>
<p class="ueberschrift">ueberschrift</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/m" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
</td>
</tr>
</tbody></table>
<br><br>
<p class="ueberschrift">Interaktiv</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://www.dreamlike-arts.de.be/" class="navi">LAYOUT</a>
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://barbragolba.deviantart.com/art/Header-Keira-K-123571910?q=boost%3Apopular%20in%3Adesigns%20header&qo=62" class="navi">HEADER</a>
</td>
</tr>
</tbody></table>
<br>
<br>
<br>
<br>
</div>
<div id="navibox">
<p class="ueberschrift">ueberschrift</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
</td>
</tr>
</tbody></table>
<br>
<br>
<p class="ueberschrift">ueberschrift</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/m" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
</td>
</tr>
</tbody></table>
<br><br>
<p class="ueberschrift">Interaktiv</p>
<table id="table1" width="100%" border="0"><tbody>
<tr valign="top">
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://www.dreamlike-arts.de.be/" class="navi">LAYOUT</a>
<td style="width: 50%">
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://dreamlike-arts.de.tl/" class="navi">navititel</a>
<a href="http://barbragolba.deviantart.com/art/Header-Keira-K-123571910?q=boost%3Apopular%20in%3Adesigns%20header&qo=62" class="navi">HEADER</a>
</td>
</tr>
</tbody></table>
<br>
<br>
<br>
<br>
</div>
CSS Code ohne Style tags:
.ueberschrift{
font-family: verdana;
font-size: 11px;
text-transform: uppercase;
display: block;
padding-bottom: 1px;
line-height: 15px;
margin-bottom: 5px;
margin-top: 2px;
text-align: left;
border-bottom: 1px solid #bb7599;
color: #000000;
background: transparenz;
padding-left: 0px;
padding-top: 2px;
}
.ueberschrift:first-letter {
font-family: verdana;
font-size: 12pt;
color: #bb7599;
text-transform:uppercase;
line-height:17px;
padding-left: 5px;
margin-bottom: 1px;
margin-top: 1px;
text-align: left;
}
.mitglied{
color: #000000;
background-color: #f9f4f0;
border-bottom: 2px solid #bc7796;}
#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#dreamlike_content {display: none;}
#nav{display: none;}
div.header{display: none;}
h2#title{display: none;}
a:link {
color: #bb7599;
background-color: #;
border-bottom: 1px solid #bb7599;
text-decoration: none;}
a:visited {
color: #bb7599;
background-color: #;
text-decoration: none;
border-bottom: 1px solid #bb7599;}
a:hover {
color: #000000;
background-color: #;
border-bottom: 2px solid #bb7599;
}
b, strong{
color:#000000;
font-weight: bold;
}
i, em{
color:#000000;
}
u{
color: #000000;
text-decoration:underline;
border-bottom: 0px dotted #bb7599;
}
body {
overflow-x: hidden;
background-image:url('http://www.c-u-w.com/blog/media/schwarz.jpg');
}
*{ padding: 0; margin: 0; }
#Mein_Bild {
margin: 0px;
margin-top: -115px;
width: 1810px;
height: 514px;
border:0px;
background-image:url('http://www.imgbox.de/users/public/images/OcNAHS41GP.jpg');
}
#content {
position: absolute;
top: 420px;
border-top: px solid #333333;
background-color: #ffffff;
margin-left: 2px;
width: 442px;
left: 66px;
color: #000000;
padding-right:10px;
padding-left:10px;
padding-top:27px;
padding-bottom:200px;
text-align: justify;
background-color: #e8e8e8;
font-family: verdana;
font-size: 11px;
word-spacing: px;
letter-spacing: 1px;
overflow:auto;}
#navibox{
position: absolute;
left:528px;
top:420px;
color: #5d848b;
padding-right:5px;
padding-left:5px;
padding-top:5px;
padding-bottom:10px;
width: 237px;
background-color: #e8e8e8;
font-family:verdana;
font-size: 11px;
overflow:auto;}
::-moz-selection
{
color: #ffffff;
background-color: #000000;
text-shadow: #000000 1px 1px 1px;
}
ul#nav{
width: 2px;
padding: 4px;
margin: 5px;}
li.nav_element{
list-style-type: none;
position: relative;
padding:1px;
width: 90px;}
li.nav_element a{
display: block;
width: 90px;
height: 140px;
padding: -2px;
font-weight:;
text-decoration:;
text-align: justify;
font-family: verdana;
font-size: 10px;
text-align: right;
word-spacing: 0px;
letter-spacing: 0px;
color: #d0d0d0;
background-color:#ffffff;
background-image:url(xx);
border-bottom: 0px solid color:#ffffff; }
li.nav_element a:hover{
color: #ffffff;
background-color:#d0d0d0;
background-image:url(xx);}
A.navi:link, A.navi:active, A.navi:visited {
display: block;
font-family: verdana;
text-shadow: #ffffff 1px 1px;
font-style: ;
font-size:12px;
letter-spacing: 0px;
padding-top: 5px;
padding-bottom: 3px;
text-align:center;
margin-left: 4px;
margin-top: 3px;
color: #000000;
background-color: #ffffff;
border-bottom: 2px solid #000000;
}
A.navi:hover {
display: block;
font-family: verdana;
text-shadow: #000000 1px 1px;
font-style:;
font-size:12px;
letter-spacing: 0px;
padding-top: 2px;
padding-bottom: 2px;
text-align:center;
margin-left: 6px;
margin-top: 5px;
color: #ffffff;
background-color: #;
background-image:url('http://shop.rabenring.com/WebRoot/Store/Shops/Rabenring/45B0/FAB3/E961/B0BE/2B27/7F00/0001/CCCE/schwarz.jpg');
border-bottom: 3px solid #000000;
}
A.navi2:hover {
display: block;
font-family: verdana;
text-shadow: #ffffff 1px 1px;
font-style:italic;
font-size:11px;
letter-spacing: 0px;
text-align:center;
color: #bb7599;
line-height: 14px;
background-color:#;
border-bottom: 1px solid #000000;
}
A.download:link, A.download:active, A.download:visited {
font-family: arial;
font-size: 9px;
padding-left: 3px;
padding-right: 3px;
background-color: #e6e6e6;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 4px;
padding-bottom: 3px;
text-align:center;
margin-left: 3px;
margin-top: 3px;
width: 90px;
color: #94878b;
border-bottom: 4px solid #d0c7ca;
}
A.download:hover {
font-family: arial;
font-size: 9px;
padding-left: 3px;
padding-right: 3px;
background-color: #cccccc;
text-shadow: 1px 1px #bb7897;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 4px;
padding-bottom: 3px;
text-align:center;
margin-left: 3px;
margin-top: 3px;
width: 90px;
color: #ffffff;
border-bottom: 4px solid #000000;
}
A.seitenzahl:link, A.seitenzahl:active, A.seitenzahl:visited {
font-family: arial;
font-size: 9px;
padding-left: 3px;
padding-right: 3px;
background-color: #ffe5ff;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 4px;
padding-bottom: 3px;
text-align:center;
margin-left: 3px;
margin-top: 3px;
width: 90px;
color: #94878b;
border-bottom: 4px solid #ffe5ff;
}
A.seitenzahl:hover {
font-family: verdana;
font-size: 9px;
padding-left: 3px;
padding-right: 3px;
background-color: #cccccc;
text-shadow: 1px 1px #bb7897;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 4px;
padding-bottom: 3px;
text-align:center;
margin-left: 3px;
margin-top: 3px;
width: 90px;
color: #ffffff;
border-bottom: 4px solid #bb7897;
}
font-family: verdana;
font-size: 11px;
text-transform: uppercase;
display: block;
padding-bottom: 1px;
line-height: 15px;
margin-bottom: 5px;
margin-top: 2px;
text-align: left;
border-bottom: 1px solid #bb7599;
color: #000000;
background: transparenz;
padding-left: 0px;
padding-top: 2px;
}
.ueberschrift:first-letter {
font-family: verdana;
font-size: 12pt;
color: #bb7599;
text-transform:uppercase;
line-height:17px;
padding-left: 5px;
margin-bottom: 1px;
margin-top: 1px;
text-align: left;
}
.mitglied{
color: #000000;
background-color: #f9f4f0;
border-bottom: 2px solid #bc7796;}
#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#dreamlike_content {display: none;}
#nav{display: none;}
div.header{display: none;}
h2#title{display: none;}
a:link {
color: #bb7599;
background-color: #;
border-bottom: 1px solid #bb7599;
text-decoration: none;}
a:visited {
color: #bb7599;
background-color: #;
text-decoration: none;
border-bottom: 1px solid #bb7599;}
a:hover {
color: #000000;
background-color: #;
border-bottom: 2px solid #bb7599;
}
b, strong{
color:#000000;
font-weight: bold;
}
i, em{
color:#000000;
}
u{
color: #000000;
text-decoration:underline;
border-bottom: 0px dotted #bb7599;
}
body {
overflow-x: hidden;
background-image:url('http://www.c-u-w.com/blog/media/schwarz.jpg');
}
*{ padding: 0; margin: 0; }
#Mein_Bild {
margin: 0px;
margin-top: -115px;
width: 1810px;
height: 514px;
border:0px;
background-image:url('http://www.imgbox.de/users/public/images/OcNAHS41GP.jpg');
}
#content {
position: absolute;
top: 420px;
border-top: px solid #333333;
background-color: #ffffff;
margin-left: 2px;
width: 442px;
left: 66px;
color: #000000;
padding-right:10px;
padding-left:10px;
padding-top:27px;
padding-bottom:200px;
text-align: justify;
background-color: #e8e8e8;
font-family: verdana;
font-size: 11px;
word-spacing: px;
letter-spacing: 1px;
overflow:auto;}
#navibox{
position: absolute;
left:528px;
top:420px;
color: #5d848b;
padding-right:5px;
padding-left:5px;
padding-top:5px;
padding-bottom:10px;
width: 237px;
background-color: #e8e8e8;
font-family:verdana;
font-size: 11px;
overflow:auto;}
::-moz-selection
{
color: #ffffff;
background-color: #000000;
text-shadow: #000000 1px 1px 1px;
}
ul#nav{
width: 2px;
padding: 4px;
margin: 5px;}
li.nav_element{
list-style-type: none;
position: relative;
padding:1px;
width: 90px;}
li.nav_element a{
display: block;
width: 90px;
height: 140px;
padding: -2px;
font-weight:;
text-decoration:;
text-align: justify;
font-family: verdana;
font-size: 10px;
text-align: right;
word-spacing: 0px;
letter-spacing: 0px;
color: #d0d0d0;
background-color:#ffffff;
background-image:url(xx);
border-bottom: 0px solid color:#ffffff; }
li.nav_element a:hover{
color: #ffffff;
background-color:#d0d0d0;
background-image:url(xx);}
A.navi:link, A.navi:active, A.navi:visited {
display: block;
font-family: verdana;
text-shadow: #ffffff 1px 1px;
font-style: ;
font-size:12px;
letter-spacing: 0px;
padding-top: 5px;
padding-bottom: 3px;
text-align:center;
margin-left: 4px;
margin-top: 3px;
color: #000000;
background-color: #ffffff;
border-bottom: 2px solid #000000;
}
A.navi:hover {
display: block;
font-family: verdana;
text-shadow: #000000 1px 1px;
font-style:;
font-size:12px;
letter-spacing: 0px;
padding-top: 2px;
padding-bottom: 2px;
text-align:center;
margin-left: 6px;
margin-top: 5px;
color: #ffffff;
background-color: #;
background-image:url('http://shop.rabenring.com/WebRoot/Store/Shops/Rabenring/45B0/FAB3/E961/B0BE/2B27/7F00/0001/CCCE/schwarz.jpg');
border-bottom: 3px solid #000000;
}
A.navi2:hover {
display: block;
font-family: verdana;
text-shadow: #ffffff 1px 1px;
font-style:italic;
font-size:11px;
letter-spacing: 0px;
text-align:center;
color: #bb7599;
line-height: 14px;
background-color:#;
border-bottom: 1px solid #000000;
}
A.download:link, A.download:active, A.download:visited {
font-family: arial;
font-size: 9px;
padding-left: 3px;
padding-right: 3px;
background-color: #e6e6e6;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 4px;
padding-bottom: 3px;
text-align:center;
margin-left: 3px;
margin-top: 3px;
width: 90px;
color: #94878b;
border-bottom: 4px solid #d0c7ca;
}
A.download:hover {
font-family: arial;
font-size: 9px;
padding-left: 3px;
padding-right: 3px;
background-color: #cccccc;
text-shadow: 1px 1px #bb7897;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 4px;
padding-bottom: 3px;
text-align:center;
margin-left: 3px;
margin-top: 3px;
width: 90px;
color: #ffffff;
border-bottom: 4px solid #000000;
}
A.seitenzahl:link, A.seitenzahl:active, A.seitenzahl:visited {
font-family: arial;
font-size: 9px;
padding-left: 3px;
padding-right: 3px;
background-color: #ffe5ff;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 4px;
padding-bottom: 3px;
text-align:center;
margin-left: 3px;
margin-top: 3px;
width: 90px;
color: #94878b;
border-bottom: 4px solid #ffe5ff;
}
A.seitenzahl:hover {
font-family: verdana;
font-size: 9px;
padding-left: 3px;
padding-right: 3px;
background-color: #cccccc;
text-shadow: 1px 1px #bb7897;
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 4px;
padding-bottom: 3px;
text-align:center;
margin-left: 3px;
margin-top: 3px;
width: 90px;
color: #ffffff;
border-bottom: 4px solid #bb7897;
}