300Mem: Layout 51

Myblog-Code:

<html>
<head>

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

<style type="text/css">

</style>

</head>

<body style="background-color: #d3d3d3;">
<img src="http://300memories.pytalhost.at/layouts/layout52.png" border="0">

<div style="position: absolute; top: 520px; left: 150px; width: 645px;">
<div class="header">
{PLACE_CONTENT}
</div>
</div>

<div style="position: absolute; top: 3px; left: 180px; width: 645px;">
<center>
<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">Resources</a></li>
<li><a href="http://300memories.pytalhost.at/">Designer</a></li>
</ul>
</center>
</div>

<div style="position: absolute; top: 370px; left: 220px; width: 645px;">
<center>
<div class="site">Nameofyoursite</div>
</center>
</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=Lobster' rel='stylesheet' type='text/css'>

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

<div id="navi">
<center>
<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>
</center>
</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 {
-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;
font-family: 'Lobster', cursive;
color: #69bdd9;
font-size: 17px;
padding-top: 10px;
background-image: url('http://300memories.pytalhost.at/layouts/naviinbox20.png');
text-decoration: none;
text-transform: none;
padding: 6px 13px;
letter-spacing: 0px;
text-shadow: #f5f5f5 1px 1px 0px;

}

#navigation a:hover {
font-family: 'Lobster', cursive;
color: #78d7f7;
font-size: 17px;
padding-top: 10px;
url('http://300memories.pytalhost.at/layouts/naviinbox20.png');
text-decoration: none;
padding: 6px 13px;
text-shadow: #ffffff 0px 0px 15px;
}

b, strong{
   color: #33bad9;

}

i, em{
   color:#62afc2;

}

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

}

s, strike{
   color:#74a6de;
}

font {
color: #171717;
letter-spacing: 0px;
font-family: Tahoma;
text-align: left;
font-size: 11px;
line-height: 14px;

}

.h1{
display: block;
font-family: 'Lobster', cursive;
color: #69bdd9;
font-size: 18px;
text-decoration: solid;
border-bottom: 1px solid #a4a4a4;
line-height: 16px;
text-align: left;
padding-left: 13px;
margin-bottom: 2px;
test-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: #dfdfdf;
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: 1px 1px 2px #757575;
background-color: #e9e9e9;
-webkit-box-shadow: 1px 1px 2px #757575;
box-shadow: 1px 1px 2px #757575;
padding: 8px;
text-align: left;
-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;
}

#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: #d3d3d3;

}

*{ padding: 0; margin: 0; }

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

#content {
-moz-box-shadow: 1px 1px 2px #757575;
background-color: #e9e9e9;
-webkit-box-shadow: 1px 1px 2px #757575;
box-shadow: 1px 1px 2px #757575;
padding: 8px;
text-align: left;
-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: 620px; left: 150px; width: 645px;
overflow: auto;
color: #171717;
letter-spacing: 0px;
font-family: Tahoma;
text-align: left;
font-size: 11px;
line-height: 14px;

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: 110px; left: 180px; width: 645px;
}