Moments ...

Designer's Comments

Look carefully for specific instructions

woot~~ I experiment with a mmoveable pop-up box XD

please note me or leave a comment when you use this layout!

* I hate IE >_<

　／l、
ﾞ（ﾟ､｡７
　l、ﾞ ~ヽ
　じしf_, )ノ

[ best view with Mozilla Firefox & 1280x1024]

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>moment</title>
  <meta content="text/html; charset=iso-8859-1"
 http-equiv="Content-Type">
  <script language="JavaScript1.2">
//Popup Box- By Jim Silver @ jimsilver47@yahoo.com
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
//drag drop function for NS 4////
/////////////////////////////////
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
//drag drop function for ie4+ and NS6////
/////////////////////////////////
function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}
function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"
while (firedobj.tagName!=topelement&&firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
////drag drop functions end here//////
function hidebox(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
  </script>
  <style type="text/css">body { background-img:transparent;
margin:0px;
font-family: arial;
font-size: 10px;
line-height: 11px;
}
h3 { font-family: courier new, georgia;color: #000;
line-height: 14px;
font-size: 11px;
font-style: italic;
text-align: left;
text-decoration: none;
background-color: #0cb5ff;
opacity: 0.2;
}
h2 { font-family: courier new, georgia;
color: #000;
line-height: 14px;
font-size: 11px;
font-style: italic;
text-align: left;
text-decoration: none;
background-color: #0cb5ff;
opacity: 0.2;
margin: -10px 0px 0px 0px;
}
h1 { font-family: courier new, georgia;
color: #fff;
line-height: 15px;
font-size: 14px;
text-align: left;
font-variant:uppercase;
background-image: url(http://cbimg9.com/layouts/08/05/27425ab.gif);
border-bottom: 1px dotted #fff;
border-left: 5px solid transparent;
}
ul { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #c677ce;
background-color: transparent;
}
#navi1 a, #navi1 a:link, #navi1 a:active, #navi1 a:visited {
color:#00cbdc;
font-size:10px;
font-family:courier new,arial;
line-height:17px;
text-align: center;
text-transform: uppercase;
letter-spacing: none;
text-decoration: none;
opacity: 0.5;
padding: 2px 5px 2px 5px;
}
#navi1 a:hover, #navi1 a:focus {
cursor: default;
background-color: #12373a;
text-decoration: none;
opacity: 1.0;
}
#navi3{color: #0f1c2a; font-family: courier new, arial; font-size: 10px; text-align: left; line height: 15px;}
#navi3 a, #navi3 a:link, #navi3 a:active, #navi3 a:visited { color:#1e1302;
font-size:8px;
font-family:arial;
line-height:15px;
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:#fff;
cursor: default;
background-color: transparent;
text-decoration: none;
}
#content {
width: 315px;
background-color: transparent;
font-family: courier new, georgia;
font-size: 8pt;
line-height: 15px;
font-style: normal;
color: #707070;
text-align: justify;
}
#content a { text-decoration: none;
color:#00cbdc;
font-size:11px;
font-family:courier new,arial;
line-height:17px;
text-align: center;
letter-spacing: none;
text-decoration: none;
opacity: 0.5;
padding: 2px 5px 2px 5px;
font-weight: bold;
}
#content a:active { text-decoration: none;
}
#content a:visited { text-decoration: none;
}
#content a:hover { cursor: default;
background-color: #12373a;
text-decoration: none;
opacity: 1.0;
}
::-moz-selection {
background:#700000;
color:#fff;
}
textarea { border: 1px solid #700000;
background-color: transparent;
width: 160px;
height: 100px;
font-family: courier new, georgia;
font-size: 8pt;
line-height: 15px;
color: #700000;
}
input { border: 1px solid #700000;
background-color: transparent;
font-size: 8pt;
font-family: courier new, georgia;
line-height: 15px;
color: #700000;
}
b, strong { font-family: courier new, arial;
font-size: 9pt;
line-height: 17px;
color: #a78375;
font-weight: bold;
}
m { font-family: courier new, arial;
font-size: 8pt;
line-height: 15px;
color: #700000;
background-color:#9ee3e3;
padding: 0px 2px 0px 2px;
}
i, em { font-family: courier new, arial;
font-size: 8pt;
line-height: 15px;
color: #5d0d2c;
font-style: italic;
}
u { font-family: courier new, arial;
font-size: 8pt;
line-height: 16px;
color: #096970;
text-decoration: none;
border-bottom: 1px dashed #fff;
}
s, stroke { font-family: courier new,arial;
font-size: 8pt;
line-height: 15px;
color: #b0b00d;
text-decoration: line-through;
} blockquote {
margin: 15px;
padding: 15px;
background-color: #1e0b1c;
border-bottom: 15px solid #be6a8b;
color: #4ab6e4;
opacity: 0.5;
}
blockquote:before { font-family: georgia;
color: #4ab6e4;
content: open-quote;
font-weight: bold;
font-size: 15pt;
padding: 0px 2px 0px 2px;
}
#titel {width: 600px;
background-color: transparent;
color: #fff;
font-family: courier new, arial italic;
font-size: 20px;
line-height: 14px;
text-align: left;
letter-spacing: -1;
}
  </style>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
</head>
<body style="background-color: rgb(0, 0, 0);" leftmargin="0"
 topmargin="0" marginheight="0" marginwidth="0">

<div style="left: 0px; width: 850px; top: 0px; height: 700px;"
 id="header">
<div id="content"
 style="position: absolute; z-index: 5; text-align: center; width: 88px; height: 18px; top: 279px; left: 800px;"></div>
<img src="http://cbimg9.com/layouts/08/05/27425aa.jpg"
 alt="Layout by ZeBiii"></div>


<div id="titel"
 style="position: absolute; overflow: visible; z-index: 3; text-align: center; width: 416px; height: 42px; top: 16px; left: 456px;">
<p>... Moments ...</p>
</div>


<div id="content"
 style="position: absolute; overflow: visible; z-index: 3; text-align: justify; width: 415px; left: 458px; top: 238px; height: 351px;">
<h1>One Moment to look back ...</h1>
<h2>Headline</h2>
<p>This is the content...<br>
Write whatever you want.<br>
<u>Do not remove the Copyright and credits!!!</u></p>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum in nec eirmod iudicabit, dicta civibus mnesarchum
at vix.
Cum an soleat detraxit constituto, cu euismod detraxit consulatu nam.
<b>Ad tollit graeco adipisci duo!</b> Ut duo harum nihil
sanctus, ne liber
scripserit mea? His id exerci tempor minimum, <m>pro an justo
maluisset.</m>
Labore eripuit inermis no pri, his error affert placerat eu, per
viderer suscipiantur ut? Ne cum lorem atomorum persequeris. <u>Qui
mundi
delenit imperdiet no. Mei ut corpora invenire instructior. Ut cum
libris equidem, ut omnium laoreet mei!</u>
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! <i>Has dicit affert postea cu</i>,
at ius
disputando voluptatibus, vel ei vidisse accusata theophrastus.
Lucilius expetenda ei vix, ut mea malis legimus torquatos. Ut quo quis
nonumy ubique, liber putent ad pro. Eam rebum possim in, indoctum
liberavisse reprehendunt eu has. Pri an inani interpretaris, ad simul
laudem numquam duo. <s>An platonem tractatos assentior nam,</s>
saepe dicunt
petentium mea et.</p>
<h3>Basic Codes</h3>
<blockquote>
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></blockquote>
</div>


<div id="navi1"
 style="position: absolute; z-index: 3; text-align: left; height: 159px; top: 83px; left: 458px; width: 414px;">
<table
 style="text-align: center; top: 193px; height: 122px; left: 456px; width: 410px;"
 border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td><a href="#">moments</a></td>
      <td><a href="#">moments</a></td>
      <td><a href="#">moments</a></td>
    </tr>
    <tr>
      <td><a href="#">moments</a></td>
      <td><a href="#">moments</a></td>
      <td><a href="#">moments</a></td>
    </tr>
    <tr>
      <td><a href="#">moments</a></td>
      <td><a href="#">moments</a></td>
      <td><a href="#">moments</a></td>
    </tr>
    <tr>
      <td><a href="#">moments</a></td>
      <td><a href="#">moments</a></td>
      <td><a href="#">moments</a></td>
    </tr>
    <tr>
      <td><a href="#">moments</a></td>
      <td><a href="#">moments</a></td>
      <td><a href="#">moments</a></td>
    </tr>
  </tbody>
</table>
</div>


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


<div id="showimage"
 style="position: absolute; width: 189px; left: 261px; top: 407px; height: 84px;">
<table style="left: 265px; width: 185px;" bgcolor="#000000"
 border="0" cellpadding="2" cellspacing="0">
  <tbody>
    <tr>
      <td width="100%">
      <table
 style="left: 267px; width: 183px; top: 408px; height: 86px;"
 border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td id="dragbar" style="" width="100%"><ilayer
 width="100%" onselectstart="return false"><layer
 width="100%"
 onmouseover="dragswitch=1;if (ns4) drag_dropns(showimage)"
 onmouseout="dragswitch=0"><font color="#ffffff"
 face="Verdana"><small>
            <h3>PopUp Box</h3>
            </small></font></layer></ilayer></td>
          </tr>
          <tr style="color: rgb(112, 112, 112); font-family: arial;">
            <td style="padding: 4px;" colspan="2"
 bgcolor="#000000" width="100%"><font
 size="-2">This is a moveable pop-up box, so your visiter
can move this box wherever he/she want it ^^ <br>
(something I wanted to
experiment with).<br>
            <br>
If you want you can reposition this box when you want
(you must do this in the code. But when you don't now how to do this,
please don't try it!</font>
</td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</div>

</body>
</html>