300Mem: Layout 52

Layout 52 view

Myblog-Code:
<html>
<head>

<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>

<style type="text/css">
<!--
body {
cursor:url('http://un0heard.funpic.de/Bilder/Cursor/1schwarz.cur');
overflow-x: hidden;
}
a:link {
color: #2d7583;
text-decoration:none;
text-transform: uppercase;

}
a:visited {color: #2d7583;
text-decoration:none;


}

 a:active {color: #2d7583;
text-decoration:none;


}
a:hover {color: #46b6cc;


}



#navigation li {
display: inline;
list-style-type: none;
}

#navigation a {
font-family: 'Amatic SC', cursive;
color: #bfadc5;
font-size: 28px;
padding-top: 10px;
text-decoration: none;
text-transform: none;
padding: 6px 13px;
letter-spacing: 0px;
text-shadow: #ffffff 1px 1px 0px;

}

#navigation a:hover {
font-family: 'Amatic SC', cursive;
color: #f4cfd8;
font-size: 28px;
padding-top: 10px;
text-decoration: none;
text-transform: none;
padding: 6px 13px;
letter-spacing: 0px;
text-shadow: #ffffff 1px 1px 0px;
}


A.navi:link, A.navi:active, A.navi:visited {
text-align: center;
text-transform:uppercase;
font-family: Arial;
font-size : 12px ;
letter-spacing: 0px;
display: block;
color: #ffffff;
line-height: 18px;
margin-top: 1px;
background-color: #dbd1e0;
border-bottom: 1px solid #ccc3d1;
text-shadow: 1px 1px #beb6c3;



}

A.navi:hover {
background-color: #e3d9e8;
cursor:url('http://un0heard.funpic.de/Bilder/Cursor/1schwarz.cur');
}




A.navi2:link, A.navi2:active, A.navi2:visited {
display: block;
font-family: Arial;
font-size: 9px;
margin-bottom: 1px;
background-color: #dbd1e0;
text-transform: uppercase;
color: #474747;
text-align: center;
line-height: 17px;
text-shadow: #f7f7f7 1px 1px 1px;
}



A.navi2:hover {
display: block;
background-color: #e3d9e8;
cursor:url('http://un0heard.funpic.de/Bilder/Cursor/1schwarz.cur');
}




b, strong{
   color: #443050;






}

i, em{
   color:#7b6d82;

}

u{
  color: #000000;
  text-decoration: underline;

}


s, strike{
   color:#74a6de;
}


font {
color: #877d8a;
letter-spacing: 0px;
font-family: Verdana;
text-align: left;
font-size: 11px;
line-height: 14px;
text-shadow: 1px 1px #ffffff;



}





.h1{
display: block;
background-image: url('http://300memories.pytalhost.at/layouts/layout53headline.png');
font-family: Century Gothic;
color: #000000;
font-size: 15px;
line-height: 24px;
text-align: center;
letter-spacing: -1px;
margin-bottom: 2px;
text-transform: uppercase;
text-shadow: 1px 1px #ffffff;
}





* { margin: 0; padding: 0; }


.box {
-moz-box-shadow: 1px 1px 3px #a4a4a4; /*Mozilla-basierte Browser (z.B. Firefox)*/
-webkit-box-shadow: 1px 1px 3px #a4a4a4; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
box-shadow: 1px 1px 3px #a4a4a4; /*CSS3 Standard*/
margin-bottom: 10px;
padding: 10px;
background-color: #dbd1e0;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
width: 75%;
color: #212121;
letter-spacing: 0px;
font-family: Tahoma;
text-align: justify;
font-style: italic;
font-size: 11px;
text-shadow: 1px 1px #ececec;
margin: 8px;
}



TEXTAREA {
margin-bottom: 10px;
padding-left: 3px;
background-color: #ffffff;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
width: 75%;
color: #646464;
letter-spacing: 0px;
font-family: Tahoma;
text-align: justify;
font-size: 11px;
width: 300px;
height: 110px;
border: 0px;

}

INPUT {
margin-bottom: 10px;
padding-left: 3px;
background-color: #ffffff;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
color: #646464;
font-family: Tahoma;
text-align: justify;
font-size: 10px;
width: 120px;
height: 20px;
}



.site {
font-family: 'Lobster', cursive;
color: #6c6c6c;
font-size: 40px;
text-decoration: none;
text-shadow: #ffffff 1px 1px;
}






.header {
-moz-box-shadow: 0px 0px 15px #c2bac7;
background-color: #ebe3ee;
-webkit-box-shadow: 0px 0px 15px #c2bac7;
box-shadow: 0px 0px 15px #c2bac7;
padding: 8px;
text-align: left;
margin-bottom: -25px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-top-left-radius: 5px;
-khtml-border-top-right-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}


.navibox {
background-image: url('http://300memories.pytalhost.at/layouts/naviinbox20.png');
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 9px;
-webkit-border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-khtml-border-top-left-radius: 9px;
-khtml-border-top-right-radius: 9px;
-khtml-border-bottom-left-radius: 9px;
-khtml-border-bottom-right-radius: 9px;
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px; padding: 8px;
}



                                                               -->
</style>

</head>

<body style="background-color: #dbd1e0; background-image: url('http://300memories.pytalhost.at/layouts/layout53bg.png'); background-repeat: repeat-x; ">
<img src="http://300memories.pytalhost.at/layouts/layout53.png" border="0">




<div style="position: absolute; top: 590px;  left: 79px; width: 600px;">
<div class="header">
{PLACE_CONTENT}
</div>
</div>


<div style="position: absolute; top: 42px; left: 508px; width: 400px;">
<center>
<div class="navibox">
<ul id="navigation">
<li><a href="http://URL TEXTSEITE">Home</a></li>
<li><a href="http://URL TEXTSEITE">Owner</a></li>
<li><a href="http://URL TEXTSEITE">About the Site</a></li>
<li><a href="http://URL TEXTSEITE">Linkage</a></li>
<li><a href="http://URL TEXTSEITE">Stuff</a></li>
<li><a href="http://URL TEXTSEITE">Ressourcen</a></li>
<li><a href="http://300memories.pytalhost.at/">Designer</a></li>
</ul>
</div>
</center>
</div>


<div style="position: absolute; top: 590px; left: 690px; width: 248px;">
<div class="header">
<p class="h1"> Welcomemessage </p>
<font>Hier ist genug Platz für einen Willkommenstext. Du kannst deine Besucher willkommen heißen,
ihnen kurz etwas über deine Seite sagen, oder was auch immer du hier stehen haben willst, das ist ganz
dir überlassen.</font>
</div><br>

<br>

<div class="header">
<p class="h1"> Mainmenue </p>
<a href="http://deineSeite.de/" class="navi">Refresh</a>
<a href="http://deineSeite.de/" class="navi">Ask me</a>
<a href="http://deineSeite.de/" class="navi">Guestbook</a>
<a href="http://deineSeite.de/" class="navi">Affiliates</a>
<a href="http://deineSeite.de/" class="navi">Buttons</a>
<a href="http://deineSeite.de/" class="navi">Credits</a>

</div><br>

<br>

<div class="header">
<p class="h1"> Weitere Links </p>
<table width="100%"></tr>
<td width="50%">
<a href="http://deineSeite.de/" class="navi2">Hier</a>
<a href="http://deineSeite.de/" class="navi2">Kommen</a>
<a href="http://deineSeite.de/" class="navi2">Noch</a>
</td><td width="50%">
<a href="http://deineSeite.de/" class="navi2">Weitere</a>
<a href="http://deineSeite.de/" class="navi2">Links</a>
<a href="http://deineSeite.de/" class="navi2">Hin</a>
</td></tr></table>

</div>
</div>





</body>
</html>

HPBK-Code:

Text über dem Design
<div id="b">
<div id="Mein_Bild"></div>

<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>

<div id="header"><img src="http://300memories.pytalhost.at/layouts/layout53.png" usemap="#map" border="0"></img></div>




<div id="navi">
<center>
<div class="navibox">
<ul id="navigation">
<li><a href="http://URL TEXTSEITE">Home</a></li>
<li><a href="http://URL TEXTSEITE">Owner</a></li>
<li><a href="http://URL TEXTSEITE">About the Site</a></li>
<li><a href="http://URL TEXTSEITE">Linkage</a></li>
<li><a href="http://URL TEXTSEITE">Stuff</a></li>
<li><a href="http://URL TEXTSEITE">Ressourcen</a></li>
<li><a href="http://300memories.pytalhost.at/">Designer</a></li>
</ul>
</div>
</center>
 </div>


<div id="navi2">
<div class="navibox2">
<p class="h1"> Welcomemessage </p>
<font>Hier ist genug Platz für einen Willkommenstext. Du kannst deine Besucher willkommen heißen,
ihnen kurz etwas über deine Seite sagen, oder was auch immer du hier stehen haben willst, das ist ganz
dir überlassen.</div></font><br>

<br>

<div class="navibox2">
<p class="h1"> Mainmenue </p>
<a href="http://deineSeite.de/" class="navi">Refresh</a>
<a href="http://deineSeite.de/" class="navi">Ask me</a>
<a href="http://deineSeite.de/" class="navi">Guestbook</a>
<a href="http://deineSeite.de/" class="navi">Affiliates</a>
<a href="http://deineSeite.de/" class="navi">Buttons</a>
<a href="http://deineSeite.de/" class="navi">Credits</a>

</div><br>

<br>

<div class="navibox2">
<p class="h1"> Weitere Links </p>
<table width="100%"></tr>
<td width="50%">
<a href="http://deineSeite.de/" class="navi2">Hier</a>
<a href="http://deineSeite.de/" class="navi2">Kommen</a>
<a href="http://deineSeite.de/" class="navi2">Noch</a>
</td><td width="50%">
<a href="http://deineSeite.de/" class="navi2">Weitere</a>
<a href="http://deineSeite.de/" class="navi2">Links</a>
<a href="http://deineSeite.de/" class="navi2">Hin</a>
</td></tr></table>

</div>
</div>

CSS-Code ohne Style-Tags:
body {

overflow-x: hidden;
}

a:link {
color: #2d7583;
text-decoration:none;
text-transform: uppercase;

}
a:visited {color: #2d7583;
text-decoration:none;


}

 a:active {color: #2d7583;
text-decoration:none;


}
a:hover {color: #46b6cc;


}



#navigation li {
display: inline;
list-style-type: none;
}

#navigation a {
font-family: 'Amatic SC', cursive;
color: #bfadc5;
font-size: 28px;
padding-top: 10px;
text-decoration: none;
text-transform: none;
padding: 6px 13px;
letter-spacing: 0px;
text-shadow: #ffffff 1px 1px 0px;

}

#navigation a:hover {
font-family: 'Amatic SC', cursive;
color: #f4cfd8;
font-size: 28px;
padding-top: 10px;
text-decoration: none;
text-transform: none;
padding: 6px 13px;
letter-spacing: 0px;
text-shadow: #ffffff 1px 1px 0px;
}


A.navi:link, A.navi:active, A.navi:visited {
text-align: center;
text-transform:uppercase;
font-family: Arial;
font-size : 12px ;
letter-spacing: 0px;
display: block;
color: #ffffff;
line-height: 18px;
margin-top: 1px;
background-color: #dbd1e0;
border-bottom: 1px solid #ccc3d1;
text-shadow: 1px 1px #beb6c3;



}

A.navi:hover {
background-color: #e3d9e8;
cursor:url('http://un0heard.funpic.de/Bilder/Cursor/1schwarz.cur');
}




A.navi2:link, A.navi2:active, A.navi2:visited {
display: block;
font-family: Arial;
font-size: 9px;
margin-bottom: 1px;
background-color: #dbd1e0;
text-transform: uppercase;
color: #474747;
text-align: center;
line-height: 17px;
text-shadow: #f7f7f7 1px 1px 1px;
}



A.navi2:hover {
display: block;
background-color: #e3d9e8;
cursor:url('http://un0heard.funpic.de/Bilder/Cursor/1schwarz.cur');
}




b, strong{
   color: #443050;






}

i, em{
   color:#7b6d82;

}

u{
  color: #000000;
  text-decoration: underline;

}


s, strike{
   color:#74a6de;
}


font {
color: #877d8a;
letter-spacing: 0px;
font-family: Verdana;
text-align: left;
font-size: 11px;
line-height: 14px;
text-shadow: 1px 1px #ffffff;



}





.h1{
display: block;
background-image: url('http://300memories.pytalhost.at/layouts/layout53headline.png');
font-family: Century Gothic;
color: #000000;
font-size: 15px;
line-height: 24px;
text-align: center;
letter-spacing: -1px;
margin-bottom: 2px;
text-transform: uppercase;
text-shadow: 1px 1px #ffffff;
}





* { margin: 0; padding: 0; }


.box {
-moz-box-shadow: 1px 1px 3px #a4a4a4; /*Mozilla-basierte Browser (z.B. Firefox)*/
-webkit-box-shadow: 1px 1px 3px #a4a4a4; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
box-shadow: 1px 1px 3px #a4a4a4; /*CSS3 Standard*/
margin-bottom: 10px;
padding: 10px;
background-color: #dbd1e0;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
width: 75%;
color: #212121;
letter-spacing: 0px;
font-family: Tahoma;
text-align: justify;
font-style: italic;
font-size: 11px;
text-shadow: 1px 1px #ececec;
margin: 8px;
}



TEXTAREA {
margin-bottom: 10px;
padding-left: 3px;
background-color: #ffffff;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
width: 75%;
color: #646464;
letter-spacing: 0px;
font-family: Tahoma;
text-align: justify;
font-size: 11px;
width: 300px;
height: 110px;
border: 0px;

}

INPUT {
margin-bottom: 10px;
padding-left: 3px;
background-color: #ffffff;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
color: #646464;
font-family: Tahoma;
text-align: justify;
font-size: 10px;
width: 120px;
height: 20px;
}



.site {
font-family: 'Lobster', cursive;
color: #6c6c6c;
font-size: 40px;
text-decoration: none;
text-shadow: #ffffff 1px 1px;
}






.navibox2 {
-moz-box-shadow: 0px 0px 15px #c2bac7;
background-color: #ebe3ee;
-webkit-box-shadow: 0px 0px 15px #c2bac7;
box-shadow: 0px 0px 15px #c2bac7;
padding: 8px;
text-align: left;
margin-bottom: -25px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-top-left-radius: 5px;
-khtml-border-top-right-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}


.navibox {
background-image: url('http://300memories.pytalhost.at/layouts/naviinbox20.png');
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 9px;
-webkit-border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-khtml-border-top-left-radius: 9px;
-khtml-border-top-right-radius: 9px;
-khtml-border-bottom-left-radius: 9px;
-khtml-border-bottom-right-radius: 9px;
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px; padding: 8px;
}


#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;}
 #300memories_content {display: none;}
 #nav{display: none;}
 div.header{display: none;}
 h2#title{display: none;}



body {
overflow-x: hidden;
background-color: #dbd1e0;
background-repeat: repeat-x;
background-image: url('http://i47.tinypic.com/6p22de.png');

}

*{ padding: 0; margin: 0; }


#Mein_Bild {
margin: 0px;
margin-top: -106px;
width: 1024px;
height:768px;
border:0px;}

#content {
-moz-box-shadow: 0px 0px 15px #c2bac7;
background-color: #ebe3ee;
-webkit-box-shadow: 0px 0px 15px #c2bac7;
box-shadow: 0px 0px 15px #c2bac7;
padding: 8px;
text-align: left;
margin-bottom: -25px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-top-left-radius: 5px;
-khtml-border-top-right-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position: absolute;
overflow-x: hidden;
top: 690px;  left: 79px; width: 580px;
overflow: auto;
color: #877d8a;
letter-spacing: 0px;
font-family: Verdana;
text-align: left;
font-size: 11px;
line-height: 14px;
text-shadow: 1px 1px #ffffff;

text-align: justify;
}


#b {
background-repeat: repeat-x;
height: 100px;
background: url('http://i52.tinypic.com/53wgag.jpg');  }


#header{
position: absolute;
left:0px;
top:100px;
border: 0px solid #ffffff;
overflow:auto;}

#navi{
position: absolute;
top: 142px; left: 508px; width: 400px;
}

#navi2 {
position: absolute;
top: 690px; left: 690px; width: 248px;
}