Anchor Boxes!!

VampireFreaks Website Tutorials | Submited Jan 17, 2008

Written by:

Okay, Okay.
Here is teh code to make an Anchor box.
An anchor box is one of those anoying boxes where you
click links on the side and the page stays the same except for the content in the box.

You can customize everything from the border to the scroll bar.
And the words also the size and number of links, the title of links what have you.

<style type="text/css">
.container {
width: 400px; height: 300px;
overflow: auto; overflow-y: hidden;
border: 2px solid #ff0099;
}
.section { height: 200px; overflow: auto; }
</style>

<table width="350px"><tr><td>
<div style="overflow: Hiden; width: 100px; height: 300px; border: 2px solid #ff0099;"> <center>
<b>NAVIGATION <b>
<br><BR><BR>
<br><a href="#profile"> About Meh </a>
<br><a href="#loves"> Loves </a>
<br><a href="#Hates"> Hates </a>
<br><a href="#music"> Music </a>
</div>
</td><td>
<div class="container">

<a name="profile"></a>
<div class="section">
<br><br>ABOUT TEXT GOES HERE !!!
</div>

<a name="loves"></a>
<div class="section">
<br><br>LLOVERS TEXT GOES HERE !!!
</div>

<a name="Hates"></a>
<div class="section">
<br><br>HATES TEXT GOES HERE !!
</div>

<a name="music"></a>
<div class="section">
<br><br>MUSIC TEXT GOES HERE !!
</div>

</div>
</td></tr></table>

Tags: Anchor Boxes

1  0

Related Tutorials

How to Create Scroll Boxes
Div Boxes
Anchor Boxes!!
Fieldsets
HTML Anchors
Textareas
DIV Positioning in the stylesheet

1 Comments

  evil-intent ~ 08/09/08, 3:57pm

how do u add backgrounds to this type of layout?

1 

Sorry, you have to be a member to comment tutorials