Fantasy Bit
Structure

<!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" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="Site description for search engines." />

<meta name="keywords" content="search, keywords, separated, with, commas" />

<title> Browser Page Title </title>

<link rel="shortcut icon" href="filename.ico" />

<link rel="stylesheet" type="text/css" href="filename.css" media="all" />

<script type="text/javascript" src="filename.js"></script>

</head> <body>

Content here...

</body> </html>

Content

(line break) - <br />

<div class="cssclass"> content here </div>

bold, italic, etc.
<span class="cssclass"> text here </span>

Fantasy Bit
<a class="cssclass" target="_blank" href="index.php"> Link </a> (new window)
<a class="cssclass" target="_top" href="index.php"> Link </a> (full window)

<a href="#idhere">Jump there</a>
<span id="idhere">Land here</span>

Something
<img class="cssclass" src="filename1.png" alt="Something" title="Something" />


<form action=""><select class="example" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Navigation</option>
<option value="http://piratesboard.net/mikari/">Fantasy Bit</option>
<option value="http://mikaristar.deviantart.com">Deviant Art</option>
<option value="http://www.fanfiction.net/u/300106/">Fanfiction Net</option>
<option value="http://piratesboard.net/fiction/viewuser.php?uid=4">Pirates Board Fiction</option>
</select></form>

Tables

1 2 3 4
5 6 7 8

<table class="cssclass"><tr>
<td class="cssclass">1</td>
<td class="cssclass">2</td>
<td class="cssclass">3</td>
<td class="cssclass">4</td>
</tr><tr>
<td class="cssclass">5</td>
<td class="cssclass">6</td>
<td class="cssclass">7</td>
<td class="cssclass">8</td>
</tr></table>

Iframes



<iframe src="filename.html" width="300" height="200" frameborder="0" name="framename"></iframe>

Extras

<!-- This is a comment among HTML. -->

(blank space) - &nbsp;
& - &amp;
< - &lt;
> - &gt;
♥ - &hearts;
♦ - &diams;
♣ - &clubs;
♠ - &spades;
Ñ - &Ntilde;
ñ - &ntilde;
á - &aacute;
é - &eacute;
í - &iacute;
ó - &oacute;
ú - &uacute;

List Structure
  1. item here
  2. item here
  3. item here
<ol class="css_class">
<li>item here</li>
<li>item here</li>
<li>item here</li>
</ol>
  • item here
  • item here
<ul class="css_class">
<li>item here</li>
<li>item here</li>
</ul>

List Style

ul lists:
  • list-style-type:disk;
  • list-style-type:circle;
  • list-style-type:square;
  • list-style-image:url(bullet.gif);
ol lists:
  1. list-style-type:decimal;
  1. list-style-type:decimal-leading-zero;
  1. list-style-type:upper-alpha;
  1. list-style-type:lower-alpha;
  1. list-style-type:upper-roman;
  1. list-style-type:lower-roman;
Cascading Style Sheet

/* This is a comment among CSS. */
.classname
#idname

*:focus { outline:none; }

a:link { } (regular link)
a:visited { }
a:hover { } (mouse over)
a:active { } (in use)

input:focus (selected)

a.class:hover
a#id:visited

visibility:hidden; (makes elements invisible, they take up the same space)
display:none; (makes elements invisible, they take up no room)
display:inline; (elements are next to eachother)
display:block; (elements are displayed as blocks)

Alignment and Size

html { height:100%; width:100%; }
body { height:100%; width:100%; }

width:100px;
height:100px;

width:50%;
height:50%;

text-align:center;
text-align:justify;
text-align:left;
text-align:right;

vertical-align:top;
vertical-align:middle;
vertical-align:bottom;

overflow:hidden; (extra content is not shown)
overflow:scroll; (both horizontal and vertical scrollbars can be used)
overflow-x:scroll; (only the horizontal scrollbar)
overflow-y:scroll; (only the vertical scrollbar)

position:absolute; left:100px; top:10%; (content scrolls)
position:fixed; top:10%; left:50px; (always visible on screen)
position:relative; left:20px; top:10px; (relative to other elements)

Layer order (the largest are on top):
z-index:7;
z-index:5;
z-index:3;
z-index:1;

padding:10px;
padding-top:20px;
padding-bottom:30px;
padding-left:40px;
padding-right:50px;

margin:10px;
margin-top:10%;
margin-bottom:10%;
margin-right:5px;
margin-left:5px;

Horizontally center an element:
margin-right:auto; margin-left:auto;

float:left;
float:right;

Background and Opacity

background-color:#1b80fc;
background-image:url(picture.png);
background-attachment:fixed; (the background doesn't move)
background-attachment:scroll; (the background moves with the text)
background-position:0px 0px; (where the bg is positioned from the left and top)
background-repeat:repeat; (the bg is repeated horizontally and vertically)
background-repeat:repeat-x; (the bg is repeated horizontally)
background-repeat:repeat-y; (the bg is repeated vertically)

opacity:0.9; opacity:0.7; opacity:0.5; opacity:0.3; opacity:0.1;

Text

font-family:Verdana; font-family:Verdana;
font-family:Arial; font-family:Arial;
font-style:italic; font-style:italic;
font-weight:bold; font-weight:bold;
text-decoration:line-through; text-decoration:line-through;
text-decoration:overline; text-decoration:overline;
text-decoration:underline; text-decoration:underline;
text-transform:uppercase; text-transform:uppercase;
text-transform:lowercase; text-transform:lowercase;
text-transform:capitalize; text-transform:capitalize;
color:#000000; color:#000000;
color:#ffffff; color:#ffffff;

line-height:18px;
word-spacing:5px; May the force be with you.
word-spacing:-3px; May the force be with you.
letter-spacing:4px; May the force be with you.
letter-spacing:-2px; May the force be with you.

text-shadow: 0px 3px 0px #0000ff;
text-shadow: -3px 0px 0px #ff0000;
text-shadow: 0px -3px 0px #ff9248;
text-shadow: 3px 0px 0px #9955ff;
text-shadow: 2px 2px 0px #01a782;
text-shadow: 1px 1px 3px #ffff00, -1px -1px 3px #ffff00;

Borders

border-style:none;

border-style:solid; border-style:solid;

border-style:dotted; border-style:dotted;

border-style:dashed; border-style:dashed;

border-style:double; border-style:double;

border-style:outset; border-style:outset;

border-style:inset; border-style:inset;

border-style:ridge; border-style:ridge;

border-style:groove; border-style:groove;

border-width:3px;
border-color:#000000;

border-top-color:#000000;
border-bottom-color:#ffffff;
border-right-style:dashed;
border-left-width:3px;

example   example
padding:5px; background-image:url(filename.gif);

For tables:
border-spacing:0px;
border-collapse:collapse;

Round Borders

Order:
horizontal top left
horizontal top right
horizontal bottom right
horizontal bottom left /
vertical top left
vertical top right
vertical bottom right
vertical bottom left

  Example 1  
border-style:double;
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

  Example 2  
border-style:solid;
border-radius: 5px 20px 5px 20px / 5px 20px 5px 20px;
-moz-border-radius: 5px 20px 5px 20px / 5px 20px 5px 20px;

<div style="width:70px; height:67px; background-image:url(fantasy/sample1.png); border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px; -moz-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;"> </div>

Cursors

cursor:default; cursor:pointer; cursor:crosshair;
cursor:move; cursor:help; cursor:progress;
cursor:wait; cursor:text; cursor:n-resize;
cursor:ne-resize; cursor:e-resize; cursor:se-resize;
cursor:s-resize; cursor:sw-resize; cursor:w-resize;
cursor:nw-resize; cursor:inherit; cursor:url(file1.gif),url(file2.cur),auto;

Buttons and Mouse Events

Mouse events:
onmouseover="function()"
onmouseout="function()"
onclick="function()"


<button type="button" class="cssclass" onclick="function()"><img src="filename.gif" alt="sample" /></button>

Button link:
onclick="window.open('index.php','_top')"

Pop-up window:
function name() { window.open('filename.html', '_blank', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, width=510, height=400'); }

Alternative Map

map map map map map map map

map map map

Smooths map: *:focus { outline:none; }
Determines layering: z-index:7; z-index:5; etc.
Positioning precision: float:left; border-style:none; padding:0px; margin:0px;
Relative coordinates: position:relative; left:100px; top:50px;

Image sizes (width x height):
Full picture: 175 x 140
Jar: 16 x 22
Lucca's head: 55 x 56
Barrel thing: 38 x 50

Image new positions (chopped):
Jar - left: 21 - top: 37
Lucca - left: 50 - top: 7
Barrel - left: 133 - top: 62

Image default positions (left x top):
Jar - left: 0 - top: 0
Lucca - left: 16 - top: 0
Barrel - left: (16+55=71) - top: 0
The top position is unaffected since they're all in the first line.

Relative position calculations:
Jar - left: 21 - top: 37
Lucca: left: (50-16=34) - top: 7
Barrel: left: (133-71=62) - top: 62

<div style="width:175px; height:140px; background-image:url(fantasy/sample3.png); margin-left:auto; margin-right:auto;">

<a target="_blank" href="http://mikaristar.deviantart.com"><img style="float:left; position:relative; left:21px; top:37px; border-style:none; padding:0px; margin:0px;" src="fantasy/sample4a.png" alt="map" name="jars" border="0" onmouseover="jarover()" onmouseout="jarout()" /></a>

<a target="_blank" href="http://piratesboard.net/mikari/"><img style="float:left; position:relative; left:34px; top:7px; border-style:none; padding:0px; margin:0px;" src="fantasy/sample5a.png" alt="map" name="lucca" border="0" onmouseover="lucover()" onmouseout="lucout()" /></a>

<a target="_blank" href="http://www.fanfiction.net/u/300106/"><img style="float:left; position:relative; left:62px; top:62px; border-style:none; padding:0px; margin:0px;" src="fantasy/sample6a.png" alt="map" name="barrel" border="0" onmouseover="barover()" onmouseout="barout()" /></a>

</div>

function jarover() { document.jars.src = "fantasy/sample4b.png"; }
function jarout() { document.jars.src = "fantasy/sample4a.png"; }

function lucover() { document.lucca.src = "fantasy/sample5b.png"; }
function lucout() { document.lucca.src = "fantasy/sample5a.png"; }

function barover() { document.barrel.src = "fantasy/sample6b.png"; }
function barout() { document.barrel.src = "fantasy/sample6a.png"; }

Return