Elle's Layout

<style>
table {
	display: none;
}
.page table {
	display: table;
}
.navi table {
	display: table;
}
body {
	background-image: url("http://u.cubeupload.com/painted_dreams87/ffEllesHufflepuffWorkb.png");
}
#layout {
	width: 800px;
	height: 600px;
	margin: 0 auto;
	background-image: url("http://u.cubeupload.com/painted_dreams87/332EllesHufflepuffWorkb.png");
}
#main {
	font: 10pt tahoma;
	color: #000000;
	top: 195px;
	left: 270px;
	width: 485px;
	height: 380px;
	overflow: hidden;
}
.page {
	height: 380px;
	overflow: auto;
}
#nav {
	top: 260px;
	left: 35px;
	width: 170px;
	height: 310px;
	overflow: hidden;
	text-align: center;
}
.table {
	display: inline;
	text-align: left;
}
h1 {
	font: 13pt verdana;
	color: #3c3c3c;
	text-align: center;
	border-width: 2px;
	border-bottom-style: dashed;
	border-color: #f6e484;
	letter-spacing: 3px;
	line-height: 20px;
}
h2 {
	font: 11pt verdana;
	color: #f6e484;
	text-align: left;
	background-color: #3c3c3c;
	letter-spacing: 2px;
	line-height: 20px;
	padding-left: 3px;
}
h3 {
	font: 11pt verdana;
	color: #f6e484;
	text-align: center;
	background-color: #3c3c3c;
	letter-spacing: 2px;
	line-height: 20px;
	padding-left: 3px;
}
b {
	color: #f6e484;
	font: 10pt tahoma;
	font-weight: bold;
	line-height: 14px;
	letter-spacing: 1px;
}
i {
	color: #878787;
	font: 10pt tahoma;
	font-style: italic;
	line-height: 14px;
}
a:link, a:visited, a:active {
	color: #878787;
	font: 10pt tahoma;
	text-decoration: none;
}
a:hover {
	color: #f6e484;
	font: 10pt tahoma;
	letter-spacing: 2px;
	text-decoration: none;
}
</style><div id="layout" style="position: relative;">


<div id="nav" style="position: absolute;">
<div class="navi">
<h3>Classes</h3>
<center>
<a href="#home" class="nav">Home</a><br><a href="#alchemy" class="nav">Alchemy</a><br><a href="#ancientrunes" class="nav">Ancient Runes</a><br><a href="#arithmancy" class="nav">Arithmancy</a><br><a href="#astronomy" class="nav">Astronomy</a><br><a href="#charms" class="nav">Charms</a><br><a href="#comc" class="nav">COMC</a><br><a href="#dada" class="nav">DADA</a><br><a href="#divination" class="nav">Divination</a><br><a href="#flying" class="nav">Flying</a><br><a href="#ghoulstudies" class="nav">Ghoul Studies</a><br><a href="#herbology" class="nav">Herbology</a><br><a href="#hom" class="nav">History of Magic</a><br><a href="#mugglestudies" class="nav">Muggle Studies</a><br><a href="#potions" class="nav">Potions</a><br><a href="#transfiguration" class="nav">Transfiguration</a>
</center>



</div>
</div>


<div id="main" style="position: absolute;">
<a name="home"></a>
<div class="page">
<h1>Welcome</h1>
Please feel free to customize this layout however you would like. You can edit the styling (headers, bold, etc.), change the background, remove/add pages, etc. The only thing that can't be swapped out is the layout image itself, which includes the badger, Elle's Workbook, and the content boxes. If you would like any changes to them, please contact me and I can do them for you. Each page will scroll, so you can write as much as you want. <br><br><b>This is bold.</b> <i>This is italics.</i> <a href="/~ezulla">This is a link</a>

<h2>This is Header Two</h2>


</div>




<a name="alchemy"></a>
<div class="page">
<h1>Alchemy</h1>
<h2>Week #</h2>
-
</div>




<a name="ancientrunes"></a>
<div class="page">
<h1>Ancient Runes</h1>
<h2>Week #</h2>
-
</div>




<a name="arithmancy"></a>
<div class="page">
<h1>Arithmancy</h1>
<h2>Week #</h2>
-
</div>




<a name="astronomy"></a>
<div class="page">
<h1>Astronomy</h1>
<h2>Week #</h2>
-
</div>




<a name="charms"></a>
<div class="page">
<h1>Charms</h1>
<h2>Week #</h2>
-
</div>




<a name="comc"></a>
<div class="page">
<h1>Care of Magical Creatures</h1>
<h2>Week #</h2>
-
</div>




<a name="dada"></a>
<div class="page">
<h1>Defense Against the Dark Arts</h1>
<h2>Week #</h2>
-
</div>




<a name="divination"></a>
<div class="page">
<h1>Divination</h1>
<h2>Week #</h2>
-
</div>




<a name="flying"></a>
<div class="page">
<h1>Flying</h1>
<h2>Week #</h2>
-
</div>




<a name="ghoulstudies"></a>
<div class="page">
<h1>Ghoul Studies</h1>
<h2>Week #</h2>
-
</div>




<a name="herbology"></a>
<div class="page">
<h1>Herbology</h1>
<h2>Week #</h2>
-
</div>




<a name="hom"></a>
<div class="page">
<h1>History of Magic</h1>
<h2>Week #</h2>
-
</div>




<a name="mugglestudies"></a>
<div class="page">
<h1>Muggle Studies</h1>
<h2>Week #</h2>
-
</div>




<a name="potions"></a>
<div class="page">
<h1>Potions</h1>
<h2>Week #</h2>
-
</div>




<a name="transfiguration"></a>
<div class="page">
<h1>Transfiguration</h1>
<h2>Week #</h2>
-
</div>





</div></div>