Page.html
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>League Town</title>
<style>
html {
background: #414141 url('../images/body_bg.gif') repeat-x fixed left top;
padding: 20px 0px;
overflow-y: scroll;
}
body {
width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
font-family: Arial;
font-size: 10pt;
background: #6F6F6F;
}
body, .mask {
border: 1px solid #000000;
background-color: #6F6F6F;
color: #FBDB00;
}
.column > fieldset:nth-of-type(n) {
margin: -14px 2px 0px;
padding-bottom: 18px;
}
.column > fieldset:first-of-type {
margin-top: 0px;
}
.column > fieldset > legend {
border-radius: 8px;
}
.column > fieldset:not(:last-of-type) {
border-bottom: 0px;
}
.column > fieldset:last-of-type {
padding-bottom: 5px;
border-radius: 0px 0px 16px 16px;
}
.column > fieldset:first-of-type {
border-radius: 16px 16px 0px 0px;
}
img {vertical-align: bottom;}
a, a:visited, legend {color: #FFF29C;}
a:hover {color: #FEF8CD;}
legend {background-color: #868686;}
.tbor, fieldset, legend, .border {
border: 3px outset #030303;
-moz-border-bottom-colors: #030303;
-moz-border-left-colors: #030303;
-moz-border-right-colors: #030303;
-moz-border-top-colors: #030303;
}
.tbor td {border: 1px outset #030303;}
td {
padding: 2px;
vertical-align: top;
}
.tmid {margin-left: auto; margin-right: auto;}
h1, h2, h3 {
text-decoration: underline;
text-align: center;
margin-top: 0px;
}
table {border-collapse: collapse;}
ul, ol {
margin-top: 0px;
margin-bottom: 0px;
}
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.top {vertical-align: top;}
.middle {vertical-align: middle;}
.bottom {vertical-align: bottom;}
.big {font-size: 14pt;}
.small {font-size: 8pt;}
fieldset {padding: 5px 10px;}
legend {
padding: 2px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="column"><fieldset></fieldset>
<fieldset><legend>Location</legend>
<h2>Town</h2>
<table class="tmid">
<tbody>
<tr>
<td>
<div style="position: relative;">
<br>
<br>
<br>
<br>
townimage.jpg
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</td>
</tr>
</tbody>
</table>
</fieldset>
<div class="column">
<fieldset><legend>Navigation</legend>
<table class="tmid">
<tbody>
<tr>
<td>
<div style="position: relative;">
<br>
<br>
<br>
<br>
north.jpg west.jpg east.jpg south.jpg
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset>
<legend>Monsters</legend>
<table style="margin-left: 25px;">
<tbody>
<tr>
<td><img src="images/636.png"/></td>
<td class="middle">Monster1</td>
<td class="right small middle">Lv. 03</td>
</tr>
<tr>
<td><img src="images/642.png"/></td>
<td class="middle">Monster2</td>
<td class="right small middle">Lv. 03</td>
</tr>
<tr>
<td><img src="images/702.png"/></td>
<td class="middle">Monster3</td>
<td class="right small middle">Lv. 03</td>
</tr>
<tr>
<td><img src="images/826.png"/></td>
<td class="middle">Monster4</td>
<td class="right small middle">Lv. 10-12</td>
</tr>
</tbody>
</table>
</fieldset>
</body>
</html>
The page isn't actually this messy (with <br> and stuff) It was just for the demonstration ^^; I implemented style.css directly into the page.