My Fairy Tale

Designer's Comments

Look carefully for specific instructions

I've just decided to make a new layout style for a change. *sigh* It took me many, many hours to get things right. Especially getting them to work in both IE and FF. Please comment if you see anything wrong with it.

Please do not alter the images in any way and leave the credits as they are. DO NOT REMOVE THE CREDIT.

Edit the navigation/content/etc as you want.

Tested in Firefox and Internet Explorer, and it should work in most screen resolutions.

Enjoy!

Layout Code

Copy and paste to Template HTML

Help

<title>.: [My Fairy Tale] :.</title>

A:link { text-decoration: none;  color:#ee5582; cursor: crosshair;}
A:visited { text-decoration: none; color:#ee5582; cursor: crosshair;}
A:hover { text-decoration:none; color:#ee9655; cursor: crosshair; }

#navigation A { display:block; background-color: #fee6e3; border-right:1px solid #e97ea2; border-left:1px solid #e97ea2; padding:2px; cursor: crosshair; text-align: center;}
#navigation A:link { text-decoration: none;  color:#ff5e6c; }
#navigation A:visited { text-decoration: none; color:#ff5e6c; }
#navigation A:hover { text-decoration:none; color:#fff; background-color:#ed95a4; border-bottom:2px solid #fff; border-top:2px solid #fff; text-align: center; letter-spacing: 2px}

body {
	background: #e4cfce;
	_background: #e1cac9; 
	text-align: center;
   	min-width: 770px;
}

div.wrapper {
  	 text-align: left;
  	 margin-left: auto;
  	 margin-right: auto;
}
#container {
	background: url(http://cbimg6.com/layouts/07/10/20/22492aa.png) repeat-y;
	width: 770px;
	margin: 0 auto;
}
#header {
	height: 260px;
	background: url(http://cbimg6.com/layouts/07/10/20/22492ab.png) no-repeat;
}
#footer {
	background: url(http://cbimg6.com/layouts/07/10/20/22492ac.png) no-repeat;
	height: 90px; 
	clear: both;
	text-align: center;
}
#content {
	width: 470px;
	float: left;
	margin-top: -100px;
	padding-left: 40px;
	_padding-top: 20px;
	text-align: justify;
}
#navigation {
	width: 180px;
	float: left;
	margin-top: -20px;
	padding-left: 30px;
	_margin-left: 55px;
}
body {
scrollbar-base-color: #e1cac9;scrollbar-track-color: #ffe8e6;scrollbar-shadow-color: #e1cac9;scrollbar-darkshadow-color: #e1cac9;scrollbar-highlight-color: #e1cac9;scrollbar-arrow-color: #fff;
color:#808080;font-family:georgia; font-size: 11px; line-height: 20px;}

h1 { display: block; font-size: 20px; height: 25px; text-align: center; letter-spacing: -2px; word-spacing: 4px; color: #df8493; border-bottom: 1px dashed #ffc2ca;}

</style></head>
<body>
<div id="container">
<div id="header">
</div>
<div class="wrapper">
<div id="content">

<h1>About This Layout....</h1>

<p>This is where your main content will go. Fill up as much or as little as you want! XD It's all up to you!</p>

<p>Please do not alter the images/layout in any way. And it goes without saying.... do not remove the credit. I mean... I've taken the ultra long time to code this, so the least you can do is leave the credit there. But of course.... you may edit the navigation, contents, and such to suit your website needs. ^^

<p>I think you'd need some basic knowledge of html to be able to fully make use of this layout. But it's nothing too complicated. There are plenty of tutorials on the web, and even some on <a href="http://www.createblog.com" target="_blank">CreateBlog</a> too.

<p>This layout was tested in both Internet Explorer and Firefox. In Firefox, the font of the text will be slightly different. Other than that, it works perfectly fine.... compatible in both browsers. ^^

<p>Oh, and it works in all resolutions too. :) Hope you enjoy it!</p>

<h1>Header Title Goes Here</h1>
<p>content content content content content content content content content content content content content content content content content content content content content content content content  content content content content content content content content content content content content</p>

<p>content content content content content content content content content content content content content content content content content content content content content content content content  content content content content content content content content content content content content</p>

</div>
</div>

<h1>Section 1</h1>

<h1>Section 2</h2>

<h1>Credits</h1>

Layout By:<a href="http://dreamgurl36.createblog.com" target="_blank"> dreamgurl36</a>
<a href="http://www.boyis.com" target="_blank">Boy<i>is</i></a>
<a href="http://inobscuro.com" target="_blank">Inobscuro</a>
</div>

Layout Comments

Showing latest 2 of 2 comments

Lovely color palette and design!

By mariosluv6 on Oct 22, 2007 2:09 am

This is pretty. I like the hovers and how it looks torn up all around the edges of the layout.

By tokyo-rose on Oct 20, 2007 1:29 pm

Layout Details

Designer	dreamgurl36
Submitted on	Oct 20, 2007
Page views	11,519
Favorites	40
Comments	2
Reviewer	IVIike
Approved on	Oct 20, 2007

My Fairy Tale

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates