-:- So Sad Along -:-

Designer's Comments

Look carefully for specific instructions

Please do not change the images in any way. DO NOT REMOVE THE CREDIT. You can edit the navigation/content/etc as you want. :)

Tested in Firefox and Internet Explorer, and it should work in most screen resolutions. (made in 1200 x 800 Firefox)

Note: for some weird reason... the header images aren't showing up. o_O Gah. If anyone can help me, that'd be great. T^T

EDIT: problem with the header images fixed. Thank you Blaqheartedstar!

Oh, pls check out my little website. :)

---------------------
Credits
Resources used from Horizonroad and Fairytaled. Image was found on Photobee.

Layout Code

Copy and paste to Template HTML

Help

<title>-:- So Sad Along -:-</title>

#content A, #content A:link, #content A:visited { text-decoration: none; color:#dc97b1; cursor: ne-resize; font-size: 9pt;

border-bottom: 1px dotted #a3ccd4; font-weight: bold;}
#content A:hover { text-decoration:none; color:#e1779f; cursor: ne-resize; font-size: 9pt; border-bottom: 1px dotted

#86b9c3; font-weight: bold;}

b {font-weight: bold; color: #a89c78;}
i {font-style: italic; color: #4686a1;}
u {text-decoration: underline; color: #809076; border-bottom: 1px dashed #dffcc9;}

p {_margin-bottom: -10px;}

#main_nav {
	list-style: none; 
	padding-left: 0px; 
	padding: 0px;
	width: 100%;
	margin-left: 20px;
	margin-top: -32px;}

#main_nav li {
	display: inline;
	text-align: center;
	padding-right: 15px;}

#main_nav a:link, #main_nav a:visited {text-decoration: none;  color: #7e9983; font-family: "georgia"; font-weight: bold; text-

transform: uppercase; font-size: 11px; cursor: ne-resize;}
#main_nav a:hover {text-decoration: none;  color: #d47298; font-family: "georgia"; font-weight: bold; text-transform:

uppercase; font-size: 11px; cursor: ne-resize;}

body {
	background: #d0bfaa;
	text-align: center;
   	min-width: 467px;
}

div.wrapper {
  	 text-align: left;
  	 margin-left: auto;
  	 margin-right: auto;
}
#container {
	background: url(http://i79.photobucket.com/albums/j155/dreamgurl36/So%20Sad%20Along/ssa_bg.jpg) repeat-y; 
	width: 467px; 
	margin: 0 auto;}

#header1 {width: 467px; height: 100px; background: url(http://img166.imageshack.us/img166/8/ssa01ou9.jpg) no-repeat;}
#header2 {width: 467px; height: 100px; background: url(http://img370.imageshack.us/img370/118/ssa02im2.jpg) no-repeat;}
#header3 {width: 467px; height: 100px; background: url(http://img370.imageshack.us/img370/9347/ssa03ny3.jpg) no-repeat;}
#header4 {width: 467px; height: 62px; background: url(http://img156.imageshack.us/img156/2337/ssa04ci5.jpg) no-repeat;}

#footer {
	clear: both;
	height: 60px;
	background: url(http://i79.photobucket.com/albums/j155/dreamgurl36/So%20Sad%20Along/ssa_footer.jpg) no-repeat;
}
#content {
	width: 380px;
	float: left;
	margin-top: -5px;
	_margin-top: 0px;
	margin-left: 42px;
	text-align: justify;
}

#zone1 {    /* imagemap */
float: left;
width : 155px;
height: 25px;
margin-left: 156px;
margin-top: 6px;
text-decoration: none;
border: none;
cursor: ne-resize;
}
body {color:#8a8a8a;font-family: georgia; font-size: 8pt; line-height: 16px; cursor: crosshair;}

h1 { display: block; margin-left: auto; margin-right: auto;  text-align: center; font-family: "palatino linotype"; font-size: 13pt;

color: #bb7272; text-decoration: none; height: 13px; margin-bottom: -6px; _margin-bottom: -15px; padding-bottom: 4px;

border-bottom: 1px dashed #93c1a2;}

</style></head>
<body>
<div id="container">
<div id="header1"></div><div id="header2"></div><div id="header3"></div><div id="header4"></div>
<div class="wrapper">

<ul id="main_nav" >
            <li><a href="#">Home</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Content</a></li>
            <li><a href="#">Guestbook</a></li>
            <li><a href="#">Affliliates</a></li>
     </ul>

<h1>"So Sad Along"... {About This Layout}</h1>

<p>Mmmm... this layout is <u>smexy</u>! (thanks to the magnificent image!~). I'm also quite fond of the pink-green-brown

color scheme. :D Coding the <b>centered</b> horizontal navigation wasn't an easy task... I had to look up a lot of online CSS

articles. I do hope it doesn't look messed up in other browsers that are not FF and IE... =/ Ah well, that can't be helped. >.< So

I recolored the banner but the text <i>So Sad Along</i> was part of the image, so I left it as it is. And yeah... that's pretty

much all I have to say. :P</p>

<p>Anyway... 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! Please do

NOT change the images/layout in any way. And it goes without saying.... <b>do not remove the credit</b>. 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. ^^ I think you'd need some basic knowledge of <u>html and css</u> 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, <u>compatible in both browsers</u>. ^^ Oh, and it works in all resolutions too. :) Hope you

enjoy it!</p>

<p><b>bold text</b>, <i>italic text</i>, <u>underlined text</u>, <a href="#">a link</a></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>

<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>

Layout Comments

Showing latest 9 of 9 comments

The background doesn't work.

By AcrossTheSkies on Jun 22, 2011 10:40 pm

Website templates are to be used on sites like freewebs.com.

By dreamgurl36 on Sep 16, 2008 10:50 am

What is Tempalte Html?

By DieRomanticTonight on Sep 15, 2008 10:24 pm

i love that picture.

By aaayotiffany on Sep 9, 2008 1:19 pm

Problem with the header images fixed. :]

By dreamgurl36 on Sep 9, 2008 11:26 am

Um. I REALLY don't understand why the header image(s) aren't showing up in Firefox... and works fine in IE. o_O The image links aren't broken either... gah.

By dreamgurl36 on Sep 8, 2008 11:05 am

Cutee =)

By shadowkissed on Sep 7, 2008 10:36 pm

Ya, same here :( It's a shame! I love the muted colours in this. The header image looks really pretty from the preview. Get it working for my eyes to envy at! XD

By fainaru on Sep 7, 2008 10:14 pm

The header isent showing for me D:, but the screen shot looks nice

By none345678 on Sep 7, 2008 7:40 pm

Layout Details

Designer	dreamgurl36
Submitted on	Sep 7, 2008
Page views	14,738
Favorites	115
Comments	9
Reviewer	schizo
Approved on	Sep 7, 2008

-:- So Sad Along -:-

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates