Macabre

Designer's Comments

Look carefully for specific instructions

change the urls to what you want?
don't remove the credit!!!!!!!!!!!!
Lol, don't know why I called it macabre :]
but the images are macabre, the colours aren't exactly dark though XD

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>created by pill-pop.net</title>
<style type="text/css">
body {
	background-color:lightpink;
}

a:link, a:active, a:visited {color:black; text-decoration:none;}
a:hover {color:lightpink; text-decoration:none;}

.side a:link {background-color:none; text-transform:uppercase; font-size:8pt; display:block; color:white;}
.side a:visited {background-color:none; text-transform:uppercase; font-size:8pt; display:block; color:white;}
.side a:active {background-color:none; text-transform:uppercase; font-size:8pt; display:block; color:white;}
.side a:hover {background-color:#FFFFFF; text-transform:uppercase; font-size:8pt; display:block; color:hotpink;}

#container {
padding-left:10px;
height:auto;
padding-right:10px;}

.content
{float:left;
width:560px;
background-color:transparent;
padding:4px;
color:magenta;
font-size:10pt;
font-family:arial;}

.side
{float:right;
text-align:left;
color:white;
font-family:arial;
font-size:10pt;
width:206px;
padding:2px;
background-color:transparent;}

h1 {color:hotpink; margin-bottom:4px; border-bottom:hotpink dashed 1px; text-align:left; font-weight:400; font-family;century gothic; font-size:13pt; text-transform:uppercase;}
h2 {color:white; border-bottom:white dashed 1px; margin-bottom:4px; text-align:left; font-weight:400; font-family;century gothic; font-size:13pt; text-transform:uppercase;}

.updates
{position:absolute;
left:50%;
margin-left:126px;
width:240px;
padding:2px;
height:118px;
overflow:auto;
color:white;
font-family:arial;
font-size:8pt;
background-color:transparent;
top:96px;}

.nav
{position:absolute;
left:50%;
margin-left:-125px;
top:238px;
background-color:transparent;
text-transform:uppercase;
text-align:center;
width:278px;
font-size:12pt;
line-height:30px;
valign:center;
font-family:arial;
height:30px;}
</style>
</head>

<body>

<div class="nav">
<a href="">home</a>  <a href="">about</a>  <a href="">content</a>  <a href="">contact</a>  
</div>

<div class="updates">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
</div>

<table width="800" valign="top" height="auto" style="border:hotpink solid 1px; background-image:url('http://cbimg6.com/layouts/08/01/12/24588ab.png'); background-position:top left; background-repeat:repeat-y; background-color:white; margin-top:10px;" cellspacing="0" cellpadding="0" align="center">
	<tr height="auto">
		<td valign="top" height="auto" style="padding:0px;">
		<img src="http://cbimg6.com/layouts/08/01/12/24588aa.png">
		</td>
	</tr>
	<tr height="auto">
		<td id="container" valign="top" height="auto">
		<div class="content">
<h1>Contenttttttttt</h1>
<p>Lorem ipsum dolor sit <a href="">this is what a link will look like here</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		</div>
		
<div class="side">
<h2>sidebar</h2>
<a href="url">linkage</a>
<a href="url">linkage</a>	
<a href="url">linkage</a>	
<a href="url">linkage</a>	
<h2>something else</h2>
<a href="url">linkage</a>	
<a href="url">linkage</a>	
<a href="url">linkage</a>	
<a href="url">linkage</a>	
<h2>about me</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat... 
<a href="url">more?</a>
<h2>Admin</h2>
<a href="url">linkage</a>
<a href="url">linkage</a>
<a href="url">linkage</a>
<a href="url">linkage</a>
</div>
</td>
</tr>
	<tr>
		<td style="text-align:center; background-image:url('http://i266.photobucket.com/albums/ii280/pill-pop/macabrefooter.png'); background-position:top left; background-repeat:no-repeat; valign:center; height:30px; line-height:30px; font-size:8pt; color:hotpink; font-family:arial;">
		All rights reserved. Design by <a href="mailto:joe@pill-pop.net">joe</a> at <a href="http://pill-pop.net">pill-pop.net</a>
		</td>
	</tr>
</table>

</body>

</html>

Layout Comments

Showing latest 3 of 3 comments

I love the setup, but the pinkness doesn't match the definition of "macabre," lol.

By tokyo-rose on Jan 12, 2008 5:38 pm

(Or maybe you can just give me the code to that Updates scrollbox? Sorry for doublee posting.
I LOVE YOUR TEMPLATE)

By xoSushi on Jan 12, 2008 3:22 pm

I love the layout.

If only it was a Myspace layout, which would be weird to think about, but I just like layouts with lots of room to TYPE TYPE TYPE. :D

If you can make a Myspace layout like that, you would be awesome! Be sure to include the Updates little scrollbar/scrollbox cuz its RAD!!!

By xoSushi on Jan 12, 2008 3:21 pm

Layout Details

Designer	joespace
Submitted on	Jan 12, 2008
Page views	4,899
Favorites	15
Comments	3
Reviewer	Relentless
Approved on	Jan 12, 2008

Macabre

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates