Music Style

Designer's Comments

Look carefully for specific instructions

Layout with Namie A. ^^

note me (or leave a comment), if you use it!

[ best view with Mozilla Firefox]

Layout Code

Copy and paste to Template HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>MUSIC STYLE [FEAT. NAMIE]</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style type="text/css">body { background-img:transparent;
margin:0px;
font-family: arial;
font-size: 10px;
line-height: 11px;
}
h3 { font-family: arial;
color: #000;
line-height: 14px;
font-size: 14px;
text-align: center;
letter-spacing: 0;
text-decoration: none;
background-image: url(http://cbimg6.com/layouts/08/01/11/24557ab.jpg);
}
h2 { font-family: arial;
color: #000;
line-height: 14px;
text-transform: uppercase;
font-size: 12px;
text-align: center;
text-decoration: none;
background-color: transparent;
}
h1 { font-family: arial;
color: #fff;
line-height: 15px;
text-transform: uppercase;
font-size: 9px;
text-align: center;
font-variant:uppercase;
background-image: url(http://cbimg6.com/layouts/08/01/11/24557ac.jpg);
}
ul { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #c677ce;
background-color: transparent;
}
#navi a, #navi a:link, #navi a:active, #navi a:visited { color:#000;
font-size:8px;
font-family:arial;
line-height:12px;
text-align: center;
margin: 5px 5px 5px 5px;
display: block;
text-transform: uppercase;
letter-spacing: none;
text-decoration: underline;
font-style: normal;
background-color: transparent;
padding: 0px 5px 0px 5px;
border-right: 1px dashed #8e8e8e;
}
#navi a:hover, #navi a:focus {
color:#000;
text-align: right;
cursor: default;
background-image: url(http://cbimg6.com/layouts/08/01/11/24557ac.jpg);
text-decoration: none;
}
#navi2 a, #navi2 a:link, #navi2 a:active, #navi2 a:visited {
color:#7d8384;
font-size:16px;
font-family:arial;
line-height:17px;
text-align: center;
margin: 15px 10px 15px 10px;
text-transform: uppercase;
letter-spacing: none;
text-decoration: none;
font-weight: bold;
}
#navi2 a:hover, #navi2 a:focus {
color:#000;
cursor: default;
background-color: transparent;
text-decoration: none;
}
#navi3 a, #navi3 a:link, #navi3 a:active, #navi3 a:visited { color:#868383;
font-size:8px;
font-family:arial;
line-height:9px;
text-align: center;
margin: 5px 5px 5px 5px;
text-transform: uppercase;
letter-spacing: none;
text-decoration: none;
font-style: normal;
background-color: transparent;
padding: 10px 5px 5px 5px;
}
#navi3 a:hover, #navi3 a:focus {
color:#000;
cursor: default;
background-color: transparent;
text-decoration: none;
}
#content {
width: 315px;
background-color: transparent;
font-family: arial;
font-size: 9px;
line-height: 12px;
font-style: normal;
color: #000;
border-bottom: 1px dashed #000;
padding: 5px 10px 5px 10px;
}
#content a { text-decoration: none;
color: #8c1847;
font-family: arial;
font-size: 9px;
line-height: 12px;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
}
#content a:active { text-decoration: none;
font-family: arial;
font-size: 9px;
line-height: 11px;
color: #a86983;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
}
#content a:visited { text-decoration: none;
font-family: arial;
font-size: 9px;
line-height: 11px;
color: #a86983;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
}
#content a:hover { color:#a86983;
cursor: default;
background-color: transparent;
text-transform: uppercase;
text-decoration: none;
font-style: none;
}
#box {
width: 315px;
background-color: transparent;
font-family: arial;
font-size: 9px;
line-height: 12px;
font-style: normal;
color: #000;
}
#box a { text-decoration: none;
color: #7d7d7d;
font-family: arial;
font-size: 8px;
line-height: 12px;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
border-bottom: 1px dashed #e6d1a1;
}
#box a:active { text-decoration: none;
font-family: arial;
font-size: 8px;
line-height: 11px;
color: #7d7d7d;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
border-bottom: 1px dashed #e6d1a1;
}
#box a:visited { text-decoration: none;
font-family: arial;
font-size: 8px;
line-height: 11px;
color: #7d7d7d;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
border-bottom: 1px dashed #e6d1a1;
}
#box a:hover { color:#a50001;
cursor: default;
background-color: transparent;
text-transform: uppercase;
text-decoration: none;
font-style: none;
}
#titel {
width: 315px;
background-color: transparent;
font-family: arial black italic;
font-size: 20px;
line-height: 12px;
font-style: normal;
letter-spacing: -2;
color: #000;
}
#motto {
width: 315px;
background-color: transparent;
font-family: arial black italic;
font-size: 13px;
line-height: 16px;
font-style: normal;
letter-spacing: -1;
color: #7d7d7d;
}
::-moz-selection {
background:#051d21;
color:#fff;
}
textarea { border: 1px solid #e4d2a0;
background-color: transparent;
width: 160px;
height: 100px;
font-family: georgia;
font-size: 10px;
line-height: 11px;
color: #000;
}
input { border: 1px solid #051d21;
background-color: transparent;
font-size: 10px;
font-family: georgia;
line-height: 11px;
color: #000;
}
b, strong { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #c51944;
font-weight: bold;
}
m { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #fff;
background-color:#a6a5a5;
padding: 0px 2px 0px 2px;
}
i, em { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #2b87ae;
font-style: italic;
}
u { font-family: arial;
font-size: 10px;
line-height: 12px;
color: #657379;
text-decoration: none;
border-bottom: 1px dashed #880203;
}
s, stroke { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #657379;
text-decoration: line-through;
} </style>
</head>
<body leftmargin="0" topmargin="0"
 style="background-image: url(http://cbimg6.com/layouts/08/01/11/24557ad.jpg);">

<div style="left: 0px; width: 850px; top: 0px; height: 700px;"
 id="header">
<div id="content"
 style="position: absolute; overflow: visible; z-index: 5; text-align: center; height: 11px; width: 61px; top: 73px; left: 533px;"></div>
<img src="http://cbimg6.com/layouts/08/01/11/24557aa.jpg" alt="Layout by ZeBiii"></div>


<div id="content"
 style="position: absolute; overflow: auto; z-index: 3; text-align: left; left: 293px; width: 438px; top: 129px; height: 345px;">
<h1>Header - here comes the Headline</h1>
<p></p>
<p>This is the content...<br>
Write whatever you want.<br>
<u>Do not remove the Copyright and credits!!!</u></p>
<h1>Basic Codes</h1>
A Link looks like that <a href="#">Linkage</a> in
the content.<br>
<br>
<b>Bold</b> • <i>Italic</i>
• <u>Underline</u> • <s>Stroke</s>
• <m>Mark</m>
<p></p>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum in nec eirmod iudicabit, dicta civibus mnesarchum
at vix.
Cum an soleat detraxit constituto, cu euismod detraxit consulatu nam.
Ad tollit graeco adipisci duo! Ut duo harum nihil sanctus, ne liber
scripserit mea? His id exerci tempor minimum, pro an justo maluisset.
Labore eripuit inermis no pri, his error affert placerat eu, per
viderer suscipiantur ut? Ne cum lorem atomorum persequeris. Qui mundi
delenit imperdiet no. Mei ut corpora invenire instructior. Ut cum
libris equidem, ut omnium laoreet mei!
Definiebas cotidieque eam id, no mei invidunt platonem interesset, pro
unum aliquam concludaturque et? Debet nostro vim at, veritus
voluptatibus et vel? Sonet quidam salutandi te sed? Tollit eirmod ut
eos? Mel ea suas harum quidam! Has dicit affert postea cu, at ius
disputando voluptatibus, vel ei vidisse accusata theophrastus.
Lucilius expetenda ei vix, ut mea malis legimus torquatos. </p>
<br>
</div>


<div id="box"
 style="position: absolute; overflow: visible; z-index: 3; text-align: left; top: 505px; height: 226px; left: 506px; width: 223px;">
<h2>Space filler</h2>
<p>Here is a <b>Box</b>.<br>
Use it for hatever you want!</p>
<a href="#">...more?</a><br>
Definiebas cotidieque eam id, no mei invidunt platonem interesset, pro
unum aliquam concludaturque et? Debet nostro vim at, veritus
voluptatibus et vel? Sonet quidam salutandi te sed? Tollit eirmod ut
eos? Mel ea suas harum quidam! Has dicit affert postea cu, at ius
disputando voluptatibus, vel ei vidisse accusata theophrastus.
Lucilius expetenda ei vix, ut mea malis legimus torquatos.
</div>


<div id="titel"
 style="position: absolute; overflow: visible; z-index: 3; text-align: left; width: 133px; left: 305px; top: 84px; height: 35px;">
<p>Your Titel</p>
</div>
<div id="motto"
 style="position: absolute; overflow: visible; z-index: 3; text-align: left; top: 15px; height: 96px; left: 304px; width: 220px;">
<p>Write you're Motto<br>
[Don't worry, be happy!]<br>
Or whatever -.-</p>
</div>


<div id="navi"
 style="position: absolute; z-index: 3; text-align: left; height: 377px; width: 132px; top: 135px; left: 760px;">
<table style="left: 754px; width: 243px; top: 130px; height: 211px;"
 border="0" cellpadding="2" cellspacing="0">
  <tbody>
    <tr>
      <td>
      <h3>You</h3>
      </td>
      <td>
      <h3>Stuff</h3>
      </td>
      <td>
      <h3>Tralala</h3>
      </td>
    </tr>
    <tr>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
    </tr>
    <tr>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
    </tr>
    <tr>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
    </tr>
    <tr>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
    </tr>
    <tr>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
    </tr>
    <tr>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
      <td><a href="#">Linkage</a></td>
    </tr>
  </tbody>
</table>
</div>


<div id="navi2"
 style="position: absolute; z-index: 3; text-align: left; height: 128px; top: 508px; left: 294px; width: 192px;">
<h2>Friends/ Affis ...</h2>
<a href="#"> ♠</a>
<a href="#"> ♠</a><a href="#">
♠</a><a href="#"> ♠</a><a
 href="#"> ♠</a><br>
<a href="#">♠</a><a href="#">
♠</a><a href="#"> ♠</a><a
 href="#">
♠</a><a href="#">
♠</a><br>
<br>
Definiebas cotidieque eam id, no mei invidunt platonem interesset, pro
unum aliquam concludaturque et? Debet nostro vim at, veritus
voluptatibus et vel? Sonet quidam salutandi te sed? Tollit eirmod ut
eos? Mel ea suas harum quidam! Has dicit affert postea cu, at ius
disputando voluptatibus, vel ei vidisse accusata theophrastus.
Lucilius expetenda ei vix, ut mea malis legimus torquatos.
</div>


<div id="navi3"
 style="position: absolute; z-index: 3; text-align: left; height: 43px; width: 240px; top: 594px; left: 20px;">©
by ZeBiii<a href="http://zebiii.createblog.com/">Designer</a><a
 href="http://www.outgrow.hk.ms">Website</a><a
 href="http://www.deviantart.com/">Materials</a>
</div>

</body>
</html>

Layout Comments

Showing latest 10 of 10 comments

Using it and leaving credit =D

By Hinase on Jan 22, 2011 9:13 pm

i do not why but when i put ur layout on my page.. something went wrong.. something blue were on the bg.. aww. so bad because i wanted to use it :((.. -cry cry -

By lsgx on Jul 30, 2009 7:09 pm