The Beatles

Designer's Comments

Look carefully for specific instructions

Web layout featuring The Beatles.

I'm not one for making browser specific layouts, but this one's for Firefox... trying to get it right in IE was driving me crazy.

Layout Code

Copy and paste to Template HTML

Help

<HTML>
<HEAD>
<TITLE>The Beatles</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

body {
background: #382238;
color: #666666;
font-size: 11px; 
line-height: 13px;
font-family: Arial;
text-align: justify;

}

table, td, tr {
font-size: 11px;
line-height: 13px;
text-align: left;
font-family: Arial;
text-align: justify;
}

a:link,a:active, a:visited {color: #0054A6; text-decoration:underline; font-weight: bold;}

a:hover 
{color: #0054A6; text-decoration:overline;}

h1 {
font-size: 12px; 
font-weight: bold;
color: #772274;
text-transform: uppercase;
margin-bottom:0;
}

a.navi {
text-decoration: none;
color: #4B0049;
font-weight: none;
display:block;
width:100%; 
font-size: 12px; 
line-height: 18px;
background-image : url(http://cbimg6.com/layouts/08/01/08/24499ac.png);
background-position: center left;
background-repeat: no-repeat;
padding-left: 15px;
margin-left: px;
text-transform: uppercase;
}

a.navi:hover {
text-decoration: none;
color: #0054A6;
font-weight: none;
text-align: left;
display:block;
width:100%; 
font-size: 12px; 
line-height: 18px;
background-image : url(http://cbimg6.com/layouts/08/01/08/24499ac.png);
background-position: center left;
background-repeat: no-repeat;
padding-left: 15px;
margin-left: px;
text-transform: uppercase;
}

div.navigation
{
background-color: 818181;  
padding: 10px;
width: 156px;
float: left;
}

div.navigation2
{
padding: 10px;
float: left;
width: 160px;
}

p {
margin-top: 0px;
margin-bottom: 15px;
}

b {
color: 541854;
font-weight: bold; }

</style>

</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=672 BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER background="http://i12.photobucket.com/albums/a206/mariosluv6/LyricallyCharged/TheBeatles/BG.png" style=background-repeat:repeat-y>
	<TR>
		<TD COLSPAN=2>

<TR>

<TD valign=top WIDTH=176>
			
<div class="navigation">
<A href="#" class="navi">News</a>
<A href="#" class="navi">The Beatles</a>
<A href="#" class="navi">Media</a>

<A href="#" class="navi">Interact</a>
<A href="#" class="navi">Radio</a>
<A href="#" class="navi">Gallery</a>
<A href="#" class="navi">Fan Center</a>
<Br>
</div>

<div class="navigation2">
<h1>Welcome</h1> 
<p>Consectetuer adipiscing elit. Fusce fermentum. Phasellus mollis. Phasellus ligula erat, consequat ut, consectetuer a, ullamcorper adipiscing, magna. Proin porttitor. Sed quis arcu non libero consectetuer egestas. Sed facilisis nunc quis turpis. </p>

<h1>Maecenas rutrum</h1> 
<p>Lacus sit amet tincidunt ornare, nisi nisi pharetra purus, non porta nisl lacus vel diam.Phasellus adipiscing varius dui. Morbi lorem urna, lobortis in, lacinia eget, vulputate vitae, augue. Suspendisse felis. Duis quis purus. Vestibulum commodo. Proin vitae arcu sit amet lectus accumsan interdum. Cras pulvinar odio.</p>
</div>

</TD>
<TD valign=top WIDTH=496 style="padding: 18px;">
			
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1> 
<p>Fusce fermentum. Phasellus mollis. Phasellus ligula erat, consequat ut, consectetuer a, ullamcorper adipiscing, magna. Proin porttitor. <B>Sed quis arcu non libero consectetuer egestas. </b> Sed facilisis nunc quis turpis. Maecenas rutrum, lacus sit amet tincidunt ornare, nisi nisi pharetra purus, non porta nisl lacus vel diam. Phasellus adipiscing varius dui. Morbi lorem urna, lobortis in, lacinia eget, vulputate vitae, augue. Suspendisse felis. Duis quis purus. Vestibulum commodo. <a href="#">Proin vitae arcu sit amet lectus accumsan interdum.</a> Cras pulvinar odio.</p>

<p>Mauris erat. Mauris sit amet nisl et nisi pulvinar dictum. Nulla blandit quam a massa. Proin facilisis libero quis nulla ullamcorper convallis. Cras risus lacus, sollicitudin id, ultricies sed, faucibus vitae, nulla. Praesent fermentum, ligula at accumsan ultrices, nulla nulla lacinia libero, ac condimentum metus libero sit amet ipsum. In enim risus, hendrerit vel, feugiat ac, ultrices ac, nunc. Duis consectetuer turpis scelerisque sem. Vivamus a quam. Aenean sit amet nisi sed metus feugiat suscipit.</p>

<h1>Etiam faucibus</h1> 
<p>Duis mattis. Maecenas pede est, dignissim ut, iaculis nec, auctor vitae, turpis. Pellentesque rhoncus congue magna. Aenean placerat commodo turpis. Fusce pulvinar tempor risus. Nam nec leo. Donec vitae quam. Vivamus porta, sem ut venenatis molestie, massa nibh semper dui, a consectetuer neque dui non nisl. In ac massa quis tellus auctor consectetuer. Mauris tincidunt molestie ante. Maecenas mollis sagittis eros. Nam odio. Mauris id mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent diam.</p>

<p>Cras magna pede, rhoncus et, rhoncus eu, feugiat quis, leo. Morbi in pede quis massa porttitor dapibus. Cras dictum turpis non urna. Proin porta nibh eu nisi. Mauris a lorem quis felis congue vulputate. In nonummy nunc sed turpis. Curabitur odio mi, tincidunt a, feugiat non, fermentum condimentum, nunc. Integer interdum tempus justo. In vitae nisi. Mauris quis pede in metus egestas lacinia. Nullam nec dui. Phasellus dui. Suspendisse eget mi in nibh dapibus placerat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vel pede. Nam volutpat velit eget odio. Nullam diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eleifend orci ut mi. Curabitur nonummy luctus est. Vestibulum sagittis ligula ac ligula. Etiam lobortis neque sodales est. Aliquam erat volutpat. Pellentesque volutpat orci ac ipsum. Maecenas sodales, eros id lacinia faucibus, nunc lectus ullamcorper felis, quis consequat velit lacus eleifend augue. Aliquam tempor faucibus massa. Nullam pharetra lacus non velit. Proin sed nunc. Curabitur pede. Aliquam tincidunt nulla volutpat tellus. Suspendisse est orci, viverra in, placerat ut, congue id, quam. Maecenas tristique felis ac lectus. Quisque non ipsum at urna gravida dictum.</p>

</TD>
	</TR>
	<TR>
		<TD COLSPAN=2>
			<IMG SRC="http://cbimg6.com/layouts/08/01/08/24499ab.png" WIDTH=672 HEIGHT=27 ALT=""></TD>

</TR>
</TABLE>
</BODY>
</HTML>

Layout Comments

Showing latest 3 of 3 comments

Beatles!

By PuppyLove72 on May 19, 2008 10:32 pm

VERY VERY NICE!
Just don't really like that its about the Beatles but who cares. =P

By NICKAWHAT on Jan 8, 2008 3:39 pm

It seems to work okay for me in IE7 - just letting you know, because I'm not sure which version you're using. :)

By libertie on Jan 8, 2008 10:20 am

Layout Details

Designer	mariosluv6
Submitted on	Jan 7, 2008
Page views	8,049
Favorites	25
Comments	3
Reviewer	libertie
Approved on	Jan 8, 2008

The Beatles

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates