VampireFreaks
[ Vampirefreaks.com ]
General Codes vflayouts main FAQ common errors other hot sites Classes For profile page band profile page gallery page journal page cult page es template ottoid template Layout Generators profile generator cult generator user info generator top friends generator



VFLayouts.com - Vampirefreakss Official Layout Site

Scroll Box Codes, Anchor Box Codes, Styling Scrollboxes



Pick a Section

[ Basic Scrollbox ]
[ Decorating Scrollboxes ]
[ Side by Side Scrollboxes ]
[ Anchor Boxes ]



Basic Scrollbox


Scrollboxes are made from HTML div boxes. Divs expand with their contents by default, so to make one into a scrollbox, all you have to do is give it a width and height, and set overflow to auto, (or scroll) like this:

<div style="width: 100px; height: 100px; overflow: auto;"> contents here </div>


Of course if you copy & paste that code, you wont see a scrollbox straight away, because the contents isn't bigger than the size of the box yet. To see it scroll, you have to fill it up:

some random text blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah


So that the contents is bigger than the box, and it needs to make a scrollbar to fit it all in. Of course in reality you're very rarely going to want just a scrollbox, without a border or background or other pretty stuff, and the section below covers making scrollboxes pretty.





Decorating Scrollboxes



o Applying Styles

There are two ways of styling scrollboxes- if you just want to apply your styles to one, you can write the styles directly into the div tag. Alternatively, if you want several boxes with the same background/ border etc, you can give them a class, and just write out the styles once, in a separate style sheet, for instance, this:

<div style="width: 100px; height: 100px; overflow: auto; border: 1px solid deeppink; background: gray;"> text here </div>

Creates a div box like this:

text here (remember, your box won't turn into a scrollbox until theres too much content to fit in the width and height you gave it!


And so does this:

<style type="text/css">
.mydiv {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid deeppink;
background: gray;
</style>

<div class="mydiv"> text here </div>

Except with this second code, you can give lots of divs the class "mydiv" and have lots the same, without writing out the code over and over again:

div box 1!

This scrollbox has the class mydiv.

blah blah blah blah blah blah blah blah
div box 2!

This scrollbox has the class mydiv too!

blah blah blah blah blah blah blah blah
div box 3!

This scrollbox has less text in it, so you cant see the arrows yet!
div box 4!

And by this scrollbox I've run out of things to type.

=/




o Types of Overflow


You don't have to use overflow: auto;- If you want your arrows to show all the time, you could use overflow: scroll; instead:
This div box has overflow set to scroll!

You can also use overflow: hidden; although you should be careful with that one because it hides any content that is bigger than the box:
This scrollbox has overflow hidden.

When I run out of space to type in, the text will disappear!
You can also set different types of overflow for the vertical, and horizontal dimensions of your box. Overflow-x sets the horizontal overflow, and overflow-y sets vertical. This scrollbox has overflow-x: scroll; overflow-y: auto; so the horizontal scrollbar always shows, but the vertical one will only appear when there is too much content to fit in the box.
some text


o Background & Borders


To give your div a different background color just add it to your div tag (or to your style sheet if you're setting styles for lots of boxes at once):

<div style="width: 100px; height: 100px; overflow: auto; background: orange;"> some text </div>
some text

blah blah blah blah blah blah blah blah blah blah blah blah blah

Background images work too:

<div style="width: 100px; height: 100px; overflow: auto; background: url('http://www.PATH TO YOUR IMAGE.gif');"> some text </div>

[ More on Backgrounds ]
some text

blah blah blah blah blah blah blah blah blah blah blah blah blah


To set a different border, just include a border style:

<div style="width: 100px; height: 100px; overflow: auto; border: 3px double red;"> some text </div>

[ More on Borders ]
some text

blah blah blah blah blah blah blah blah blah blah blah blah blah






Side By Side Scrollboxes


If you have more than one scrollbox on your page, and you want to arrange them next to each other, the simplest way is to put them in a table, like this:

<table width="250px"><tr><td>
<div style="width: 100px; height: 100px; border: 3px double deeppink; text-align: center; overflow: auto;">
This is Div 1!</div>
</td><td>
<div style="width: 100px; height: 100px; border: 3px double deeppink; text-align: center; overflow: auto;">
This is Div 2!</div>
</td></tr></table>

This is Div 1!

blah blah blah blah blah blah blah blah blah blah blah blah blah
This is Div 2!
(this one isn't full yet so the arrows don't show)





Anchor Boxes


It's becoming increasingly popular to display your profile in a little box that changes when people click on your different links like this:



ABOUT TEXT GOES HERE


LIKES TEXT GOES HERE


LOATHES TEXT GOES HERE


MUSIC TEXT GOES HERE

This is done with page anchors. It's basically a series of div boxes one under the other, all inside another div box that has vertical overflow hidden. That way you only see one of the inner div boxes at once. Anchor tags provide a way to jump from one part of your page to another, so each inner div gets assigned an anchor name, and then the links go to the relevant anchor. Here's the code for a box like the one above:

<style type="text/css">
.container {
width: 250px; height: 200px;
overflow: auto; overflow-y: hidden;
border: 3px double #999999;
}
.section { height: 200px; overflow: auto; }
</style>

<table width="350px"><tr><td>
<div style="overflow: auto; width: 100px; height: 200px; border: 3px double #999999;">
<br>NAVIGATION
<br><br><a href="#profile">[ About Bit ]</a>
<br><a href="#likes">[ Likes ]</a>
<br><a href="#loathes">[ Loathes ]</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="likes"></a>
<div class="section">
<br><br>LIKES TEXT GOES HERE
</div>

<a name="loathes"></a>
<div class="section">
<br><br>LOATHES TEXT GOES HERE
</div>

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

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





Design by [ KineticShock.com ] && [ PrintedExistence[dot]com ]
All content copyright © PrintedExistence 2006 - 2008


 Contact VFLayouts
[ Contact VFLayouts! ]
Newest Readymade Layout
Brokenflowers Layout
By [ Jessibean ] Newest Readymade Icon
Dark_n_disturbed/Scream/scream.gif Icon
By [ Scream ] Readymade Layouts and Icons readymade icons readymade layouts