• General coding tips
• How to make links
• Inserting images
• Music
• Hex codes
• Small code box
• Charts
• Updates/scroll box
• Tables
• Covering writing area
• Scroll layout
• Expanding table layout
• Double expanding layout
• E-mail form
• Personalized message box
• Imap layout
• No right click
• Thumbnails

HTML » Scroll layout

I'll show you how to insert a scroll box on a layout picture in this tutorial. You can have as many scroll boxes aligned where you want on the picture. It's all about creating tables with columns and rows. If you don't know how to make a table, you have to read the table tutorial before you proceed with this one. Remember… all that are aligned sidewise are columns in tables.

Placement

First we start with the layout picture. I'll use this picture, with room for one scroll box first, and I'll advance to two scroll boxes later.

I'll use this picture:

If you want the picture to look like it blends in with the layout, you have to set the hex color on hl the same as the background color on the picture. E.g. if you want a pink background, you have to make the layout picture with a pink background. Because, if you make this layout picture with a pink background, it will look like this: Click here. Doesn't look very good. But if you use the right hex color, it looks like this: Click here. Better? Yep, the picture "blends in".

If you want the scroll box fade the layout picture, you have to draw the box on the layout picture. If you want the scroll box to have a solid color, you can do that with code.

Ok, so first I make a table. The code looks like this:

<table border="0" cellpadding="0" cellspacing="0" width="655" height="540" background="image_url.jpg">Starts the table. Height and width should be the same size as the pic.
<tr>
<td width="390"></td>Places the scroll box as far to the right you want. Lower number makes it farther to the left.
<td valign="bottom">Places the scroll box at the bottom of the cell, or it'll be inserted in the middle of the cell.

The scroll box will be inserted here

</td></tr><tr><br>
<td height="18"></td><td></td></tr></td></tr></table>The number places the scroll box as high up as you want it. Lower number places it farther down.

Result:

I have set the table-borders to 1 px so you can see them. They will not show when you set the borders to 0 px. The scroll box will stay in the bottom left corner. Set the width on the scroll box so it doesn't go ower the picture borders.

Ok, we proceed to two scroll boxes. Remember, it's all about creating tables. So if we want one more scroll box aligned horizontally (next to the other, not underneath) we insert another column in the table. The new picture looks like this:

And the code looks like this:

<table border="0" cellpadding="0" cellspacing="0" width="655" height="540" background="image_url.jpg">
<tr>
<td width="36"></td>
<td width="354" valign="bottom">

The left scroll box will be inserted here

</td>
<td valign="bottom">

The right scroll box will be inserted here

</td></tr><tr>

<td height="18"></td>
<td></td><td></td></tr></td></tr></table>

The result:

The scroll code

Many use the span code to create the scroll boxes. This code will not work in Mozilla Firefox, only in Internet Explorer. So I'll use the div code instead. It's pretty much the same, only you write <div> instead of <span>.

<div style="overflow: auto; height: 35px; width: 150px; padding: 0px; border: 1px black solid">

Write text here

</div>

My scroll box layout:

If you found this tutorial useful, please use one of the banners located here!