Super Junior: It's You

Designer's Comments

Look carefully for specific instructions

Link to my templates archives

I've run the template through the W3 validator and it is 100% error free.

Tested in Firefox, Explorer, and Safari;
Created on a Mac, Firefox/Safari, 1280x800 resolution;
Banner created in Photoshop CS4;
Please do not remove credits;
Enjoy (:

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>
<title>Your Site Name</title>
<meta http-equiv="Content-Type" content="text/javascript; charset=iso-8859-1" />
<meta name="description" content="Myspace layouts, website templates, codes, graphics, and more." />
<meta name="keywords" content="myspace layouts, myspace divs, codes, website templates, templates, graphics, wallpapers" />

/* background */
body {
  background-color:#fff;
}

/* banner */
#banner {
  margin-top:-8px;
  width:780px;height:340px;
  background-image:url("http://cbimg6.com/layouts/09/08/35379aa.png");
}

/* content sections */
#container {
  margin-top:0px;margin-bottom:0px;
  margin-left:auto;margin-right:auto;
  width:780px;
}

#menu {
  float:left;
  margin-top:0px;margin-left:10px;
  width:210px;height:100%;
  background-color:#e1e0e1;
}

#updates {
  margin-top:-5px;
  width:210px;height:75px;
  overflow:auto;
  background-color:transparent;
  padding-top:5px;padding-bottom:5px;
}

#content {
  float:right;
  margin-top:0px;margin-right:10px;
  width:540px;height:100%;
  background-color:#e1e0e1;
}

.contentarea {
  margin-top:-5px;margin-bottom:5px;
  padding:10px;padding-top:5px;
  text-align:justify;
}

#copyright {
  clear:both;
  float:right;
  width:550px;height:30px;
  text-align:center;
}

/* boxes, textareas, inputs */
textarea, input {
  border:0px;
  background-color:transparent;
  background-image:url("http://cbimg6.com/layouts/09/08/35379ab.png");
}

/* lists */
#menu ul {
  margin:0px;
  margin-left:-20px;
  .margin:auto;
  .margin-left:20px;
}
#menu li {
  color:#42333d;
  list-style-position:outside;
  list-style-type:circle;
}
#menu li:hover { color:#4f6050; }

#updates ul li, #updates ul li:hover, .white li { color:#42333d!important; }

#contentarea li { list-style-type:circle; }

/* text */
div, table, td, p, .text, font, textarea, input {
  font-family:Georgia, serif;
  font-size:11px;
  color:#42333d;
  letter-spacing:1px;
  word-spacing:-1px;
  text-decoration:none!important;
}

/* links */
a {
  font-family:Georgia, serif;
  font-size:11px;
  color:#947a8b;
  letter-spacing:1px;
  word-spacing:-1px;
  text-decoration:none;
}
a:hover {
  color:#4f6050;
  border-bottom:1px dotted #1f2c20;
}

#menu a {
  display:block;
  color:#947a8b;
  margin-bottom:2px;
}
#menu a:hover { color:#1f2c20;border:0px; }

a img { border:0px; }

/* headers */
h1 {
  margin-top:0px;margin-bottom:5px;
  padding:0px;padding-right:5px;
  font-family:Georgia, serif;
  font-size:30px;
  font-weight:bolder;
  font-style:italic;
  color:#231920;
  text-transform:lowercase;
  text-align:right;
  border-bottom:1px dotted #6a5463;
}

h2 {
  margin-top:0px;margin-bottom:5px;
  padding:0px;padding-right:5px;
  font-family:Georgia, serif;
  font-size:20px;
  font-weight:bolder;
  font-style:italic;
  color:#231920;
  text-transform:lowercase;
  text-align:right;
  border-bottom:1px dotted #6a5463;
}

</style>
</head>

<body>

<div id="menu">
<h2>Updates</h2>
<div id="updates">
<ul>
<li>You can put updates here. This box will scroll (:</li>
<li>You can put updates here. This box will scroll (:</li>
<li>You can put updates here. This box will scroll (:</li>
</ul>
</div>

<br />
<h2>Affiliates</h2>

<ul>
<li><a href="link">Affiliate</a></li>
<li><a href="link">Affiliate</a></li>
<li><a href="link">Affiliate</a></li>
<li><a href="link">Affiliate</a></li>
<li><a href="link">Affiliate</a></li>
</ul>

<br />
<h2>Header</h2>
<ul class="white"><li>Lorem ipsum dolor sit amet consectetur adipiscing elit</li></ul>

<br />
<h2>Header</h2>
<ul>
<li><a href="link">Link</a></li>
<li><a href="link">Link</a></li>
<li><a href="link">Link</a></li>
</ul>

</div>

<div id="content">
<h1>Header</h1>

<div class="contentarea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam augue arcu, vulputate eu rutrum a, facilisis posuere erat. Nam sed est et nisl volutpat ornare eu non urna. Nullam vel nulla eros. Sed congue ultricies augue, nec dignissim velit lacinia eu. Maecenas vestibulum lobortis nulla, ut sodales tellus dignissim et. Aliquam erat volutpat. In non odio et diam accumsan accumsan. Phasellus ligula dui, blandit vel convallis consequat, iaculis id est. Donec iaculis feugiat urna, vel porttitor neque auctor quis. Integer dictum mi at ligula molestie vitae placerat ipsum consequat. Fusce sagittis, enim ut dapibus vestibulum, lacus arcu consequat mi, nec sagittis ante libero eu massa.
</div>

<h1>Header</h1>
<div class="contentarea">
Sed felis dui, faucibus a suscipit ac, consequat sed ante. Suspendisse fermentum sodales neque cursus lacinia. Integer et tortor id metus volutpat varius at at augue. Donec vel sem vitae magna scelerisque dapibus. Integer vitae ultricies urna. Praesent nunc orci, viverra at aliquam nec, semper eu arcu. Vestibulum pretium nulla sit amet nisi semper eleifend. Pellentesque non lacus lacus, ultricies sagittis sem. Mauris consectetur, libero quis facilisis tempus, libero urna mollis massa, vulputate pretium mi libero et diam. Nullam placerat, tortor ac accumsan gravida, nulla nisl vulputate libero, et interdum risus nisi vitae est. Phasellus dignissim, libero vitae volutpat hendrerit, magna nulla dapibus nunc, rhoncus tristique sapien ante id ipsum. Aliquam ullamcorper, metus eu dignissim tincidunt, neque libero porta tortor, ut mollis justo magna sit amet velit. Praesent laoreet fringilla vestibulum. Aenean dui justo, consequat at pulvinar ut, semper eu dui.

</div>

<h1>Header</h1>
<div class="contentarea">
Duis vitae ullamcorper velit. Proin eros orci, rhoncus ac imperdiet a, luctus eu justo. Nunc augue ligula, feugiat nec dignissim eu, hendrerit quis lacus. Donec in augue et leo ornare sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut quis urna eu risus fringilla dapibus. Donec sit amet ligula et tortor elementum luctus. Phasellus malesuada arcu vitae felis aliquam sit amet suscipit augue commodo. Phasellus ligula mi, pharetra in interdum euismod, luctus condimentum lorem. Pellentesque in est vitae tortor dapibus congue sed at sem. Vivamus suscipit vehicula rutrum. Sed eu leo vel augue facilisis tincidunt a hendrerit lectus. Ut diam turpis, aliquam a tincidunt eu, malesuada et nisl. Mauris fermentum, nunc a tincidunt porta, leo dui convallis leo, vitae commodo urna arcu in mauris.
</div>

</div>

</div>
</body>
</html>