This question is asked many times while helping other webmasters. When this website problem was announced, I had no idea how to place a scroll box on my web site. Instead of automatically assuming that it couldn’t be done, I researched and found the fix. You need to use html code to place a scroll box on your website. Below I will give you the html code and show an example of a scroll box. This scroll box code should work with many site designers.
Remember that the below scroll boxes are samples and you should adjust the html code to fit your website.
Sample scroll box below!
| A B C D E |
Scroll Box Code to upload to document gallery in Office Live website:
<div style=”overflow:auto; height:300px; width:400px”>
<table cellpadding=”0″ cellspacing=”0″ style=”width:250px;”>
<tr>
<td> Owners name <br>Pets name<br>service<br>comments</td>
</tr>
</table>
</div>
<table cellpadding=”0″ cellspacing=”0″ style=”width:250px;”>
<tr>
<td> Owners name <br>Pets name<br>service<br>comments</td>
</tr>
</table>
</div>
Iframe Code to use once your website has the above code uploaded to your site:
<iframe SRC=”/Documents/Abovecodefilename.htm” width=”300px” height=”400px”
frameborder=”0″ marginwidth=”0px” marginheight=”0px” scrolling=”yes” </iframe>
frameborder=”0″ marginwidth=”0px” marginheight=”0px” scrolling=”yes” </iframe>
Here is the html code for scroll boxes:
<div style=”overflow:auto; height:100px; width:300px”>
<table cellpadding=”0″ cellspacing=”0″ style=”width:250px;”>
<tr>
<td> A <br>B<br>C<br>D<br>E</td>
</tr>
</table>
</div>
<table cellpadding=”0″ cellspacing=”0″ style=”width:250px;”>
<tr>
<td> A <br>B<br>C<br>D<br>E</td>
</tr>
</table>
</div>
For many website owners, you should be able to copy and paste the code above into your site and replace the ABCDE with the text that you want in your scroll box.
Copy and Paste the code above, using your html module.
For Microsoft Office Live users, adding a scroll box is a little different.
See the instructions below!
How to add a scroll box to an Office Live Website?
For an Office Live Website, you will need to upload the html code listed above to your document gallery. Make sure you save it as a .htm file.
After you have uploaded the above html code, you need to use the iframe code method again to make the scroll box. Below I will list the iframe code that you should use for the scroll box.
<iframe SRC=”/Documents/code.htm” width=”200px” height=”90px”
frameborder=”0″ marginwidth=”0px” marginheight=”0px” scrolling=”yes” </iframe>
frameborder=”0″ marginwidth=”0px” marginheight=”0px” scrolling=”yes” </iframe>
You need to insert the name of the uploaded scroll box code in the spot where it says: “code.htm”. The iframe code is similiar to the code we provided on the google adsense placement page. The difference is that you have the words “yes” after scrolling instead of “no”.
You should also have a different document name that you uploaded to your gallery. You will also need to adjust the size of the scroll box and edit the html code a little bit to fit your website needs.
For an example: If you want your scroll box to display a list, you need to insert the list into the html code before you upload it to your office live site. Replace the sample text (ABCDE) with the text you want to display in your scroll box.
Before attempting the iframe method of adding a scroll box, I encourage all webmasters to try to copy and paste the html code provided above in your html module. If copying and pasting the code doesn’t work, then use the iframe method to insert your scroll box.
If this page was a total confusion to you and you really need help or still need to know how to add a scroll box to website, you can contact me here!
One Response
I’m basically saying
I want a text box for http://www.babydow.com for my page but it won’t show up. The text is fine but the box seems invisible.
Best regards,
Ow