I am!

Designer's Comments

Look carefully for specific instructions

hmm...I love this horizontal Layouts too much I think .. -_-
Took my a whilt to finish this, I experimented with the coding.
I hope you like it! ^.-

best view with Mozilla Firefox

(please leave a comment, if you use it ^^)

　／l、
ﾞ（ﾟ､｡７
　l、ﾞ ~ヽ
　じしf_, )ノ

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Iam!</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style type="text/css">body { background-color: #edefe2;
margin:0px;
font-family: arial;
font-size: 10px;
line-height: 11px;
color: #e1c0b0;
right: 0px;
text-decoration: none;
}
#parent{
background:transparent; width:1600px;
float: left;
}
#parent-navi{
background:transparent; height: 25px;
width:1600px;
float: left;
}
#parent-banner{
background-image: url(http://cbimg6.com/layouts/09/07/35084aa.jpg);
width:1600px;
height: 83px;
float: left;
}
#parent-footer{
background-image: url(http://cbimg6.com/layouts/09/07/35084ab.jpg);
width:1600px;
height: 88px;
float: left;
}
#parent-content{
background-color: transparent;
width:1600px;
height: 249px;
float: left;
}
#navi-pic {
height: 25px;
width: 294px;
background-image: url(http://cbimg6.com/layouts/09/07/35084ac.jpg);
float: left;
margin: 0px;
}
#banner-pic {
height: 83px;
width: 294px;
background-image: url(http://cbimg6.com/layouts/09/07/35084ad.jpg);
float: left;
margin: 0px;
}
#content-pic {
height: 249px;
width:294px;
float: left;
background-image: url(http://cbimg6.com/layouts/09/07/35084ae.jpg);
margin: 0px;
}
#footer-pic {
height: 88px;
width:294px;
float: left;
background-image: url(http://cbimg6.com/layouts/09/07/35084af.jpg);
margin: 0px;
}
h4 { font-family: arial;
color: #000;
letter-spacing: 2;
line-height: 3px;
font-size: 10px;
text-align: left;
text-transform: uppercase;
letter-spacing: none;
background-color: #fff;
border-top: 3px solid #fca00f;
}
h3 { font-family: arial ;
color: #1c1e27;
letter-spacing: none;
line-height: 20px;
font-size: 12px;
float: right;
margin: 5px 2px 0px 0px;
text-align: left;
font-weight: bold;
border-left: 5px solid #fcc900;
letter-spacing: none;
background-color: #55575f;
text-transform: uppercase;
padding: 5px 2px 5px 2px;
}
h2 { font-family: georgia;
color: #f05f4e;
line-height: 15px;
text-transform: uppercase;
font-size: 12px;
text-align: left;
letter-spacing: none;
background-color: transparent;
}
h1 { font-family: georgia;
color: #1d0a5b;
letter-spacing: 2;
line-height: 17px;
font-size: 12px;
text-align: left;
letter-spacing: none;
background-color: #fff;
border-left: 15px double #1c1e27;
border-right: 15px double #1c1e27;
padding: 0px 2px 0px 2px;
}
ul { font-family: arial;
font-size: 10px;line-height: 11px;
color: #e1c0b0;
background-color: transparent;
}
#space-titel {
height: 88px;
color: #1c1e27;
background-color: transparent;
font-size:15px;
font-family:georgia;
font-style: italic;
font-weight: bold;
overflow: auto;
float: left;
padding: 10px 0px 0px 15px;
line-height: 15px;
text-align: center;
}
#box{
background-color: #e5e7d9;
width:171px;
height: 245px;
float: left;
margin: 0px 0px 0px 5px;
color: #1c1e27;
padding: 2px 2px 2px 2px;
font-size:8px;
font-family:arial;
overflow: auto;
text-transform: uppercase;
line-height: 13px;
text-align: left;
}
#content {
height: 245px;
width: 500px;
color: #fff;
background-color:#1c1e27;
margin: 0px;
padding: 2px 5px 2px 5px;
font-size:11px;
font-family:arial;
overflow: auto;
float: left;
line-height: justify;
text-align: left;
}
#content a, #content a:link, #content a:active, #content a:visited { color:#bd2b5b;
font-size:9px;
font-family:georgia;
line-height: 12px;
text-align: left;
text-transform: lowercase;
text-decoration: none;
background-color: transparent;
font-style: italic;
cursor: help;
}
#content a:hover, #content a:focus {
color:#fff;
background-color: transparent;
cursor: default;
text-decoration: none;
font-style: normal;
cursor: help;
}
#content2 {
height: 349px;
width: 340px;
color: #fff;
background-color: transparent;
margin: 0px 0px 0px 5px;
padding: 2px 5px 2px 5px;
font-size:11px;
font-family:georgia;
overflow: auto;
float: left;
line-height: 15px;
text-align: left;
border-left: 1px dashed #e9e8e6;
border-right: 1px dashed #e9e8e6;
}
#content2 a, #content2 a:link, #content2 a:active, #content2 a:visited { color:#bd2b5b;
font-size:9px;
font-family:georgia;
line-height: 12px;
text-align: left;
text-transform: lowercase;
text-decoration: none;
background-color: transparent;
font-style: italic;
cursor: help;
}
#content2 a:hover, #content2 a:focus {
color:#fff;
background-color: transparent;
cursor: default;
text-decoration: none;
font-style: normal;
cursor: help;
}
#navi {
height: 25px;
background-color: transparent;
float: left;
margin: 2px;
}
#navi a:link, #navi a:active, #navi a:visited { color:#1c1e27;
font-size:9px;
font-family:arial;
line-height: 25px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
background-color: transparent;
cursor: help;
overflow: auto;
padding: 8px 2px 8px 2px;
margin: 0px 5px 0px 5px;
}
#navi a:hover, #navi a:focus {
color:#fcd700;
background-color: #1d1e27;
cursor: default;
text-decoration: none;
cursor: help;
padding: 8px 2px 8px 2px;
}
::-moz-selection {
background:#edefe2;
color:#1d1e27;
}
textarea { border: 1px solid #edefe2;
background-color: transparent;
width: 260px;
height: 160px;
font-family: arial;
font-size: 10px;
line-height: 11px;
color: #edefe2;
}
input { border: 1px solid #fff;
background-color: #fff;
font-size: 10px;
line-height: 11px;
font-family: arial;
color: #0c1054;
}
b, strong { font-family: arial black;
font-size: 10px;line-height: 12px;
color: #eff9f8;
font-weight: bold;
}
i, em { font-family: arial;
font-size: 9px;line-height: 9px;
color: #fff;
font-style: italic;
}
u { font-family: arial;
font-size: 9px;line-height: 9px;
color: #fff;
text-decoration: none;
border-bottom: 1px dashed #fcd800;
}
s, stroke { font-family: arial;
font-size: 9px;line-height: 9px;
color: #fcd800;
text-decoration: line-through;
}
m { font-family: arial;
font-size: 9px;
line-height: 13px;
color: #000;
text-decoration: none;
background-color: #eff9f8;
margin: 0px 2px 0px 2px;
padding: 0px 3px 0px 3px;
}
blockquote {
margin: 15px;
padding: 15px;
background-color: #75767d;
font-size: 10px;
line-height: 15px;
color: #fff;
text-align: left;
border-left: 10px double #fff;
}
blockquote:before { font-family: georgia;
color: #fcc900;
content: open-quote;
font-weight: bold;
font-size: 20pt;
padding: 0px 2px 0px 0px;
}
  </style>
</head>
<body>
<div id="parent">
<div id="parent-navi">
<div id="navi-pic">.</div>
<div id="navi"><a href="">Home</a><a
 href="">About</a><a href="">Gallery</a><a
 href="">Videos</a><a href="">Links</a><a
 href="">Guestbook</a><a href="">Contact</a><a
 href="">Credits</a><a href="">...and so
on...</a>
</div>
</div>
<div id="parent-banner">
<div id="banner-pic">.</div>
</div>
<div id="parent-content">
<div id="content-pic">.</div>
<div id="content">
<h1>I am!</h1>
I am! yet what I am none cares or knows,Into the nothingness of scorn
and noise,<br>
My friends forsake me like a memory lost;<br>
I am the self-consumer of my woes,<br>
They rise and vanish in oblivious host,<br>
Like shades in love and death's oblivion lost;<br>
And yet I am! and live
with shadows tost<br>
<br>
<h3>Basic Codes</h3>
<blockquote><b>BOLD</b> . <i>ITALIC</i>
. <s>STROKE </s> . <u>UNDERLINE</u> . <m>MARKED</m></blockquote>
</div>
<div id="box">
<h4>Fill me!</h4>
[...]
Into the living sea of waking dreams,<br>
Where there is neither sense of life nor joys,<br>
But the vast shipwreck of my life's esteems;<br>
And e'en the dearest—that I loved the best<br>
Are strange—nay, rather stranger than the rest[...]
</div>
</div>
<div id="parent-footer">
<div id="footer-pic">.</div>
<div id="space-titel">[ Here You give your Site a
Title (^_^)v ]</div>
</div>
</div>
</body>
</html>

Layout Comments

Showing latest 9 of 9 comments

The concept is great, but the style is just a little too blocky for me. The 'basic codes' tag seems out of place, and the font difference in the right hand box and the main area is somewhat confusing and isn't really necessary. The alignment is also a tad wonky, for example the main text is aligned farther left than the header and the 'fill me' header should sit above the orange and white border, not awkwardly on top of it. Also, the victorian background image isn't compatible with 16:9 or 16:10 resolutions.

By rumms on Dec 20, 2010 3:11 am