In this tutorial you will learn how to text boxes.
This is how one would look:
The code used for that one:
<![CDATA[
<textarea rows="5" cols="20">
Hello! Text can go here! =)
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
</textarea>
]]>
You can modify the size by changing the numbers in rows and cols.
This one uses width:
Hello! Text can go here! =)
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
But make sure You write enough or else
it will look like ordinary writing! :D
Code:
<![CDATA[
<div style="width:200; height:75;
overflow: auto;">
Hello! Text can go here! =)
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
But make sure you write enough or else
it will look like ordinary writing! :D
</div>
]]>
But your text scroll doesn't have to be so ordinary..=)
They can also have borders and differant scroll bars.
Hello! Text can go here! =)
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
But make sure you write enough
Here's the code:
<![CDATA[
<div style="width:200; height:75;
overflow: auto;
background-image:url('back.jpg');
background-color: #000000;
border-color:#000000;
border-style: dashed;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
scrollbar-face-color:
#000000;
scrollbar-highlight-color:
#FFFFFF;
scrollbar-shadow-color:
#000000;
scrollbar-3dlight-color:
#FFFFFF;
scrollbar-arrow-color:
#000000;
scrollbar-track-color:
#FFFFFF;
scrollbar-darkshadow-color:
#000000;
scrollbar-base-color:
#000000;">
Hello! Text can go here! =)
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
SCROLL
But make sure you write enough
</div>
]]>
With these kind of text boxes we can many things.
1.Border:
Were it says:
border-color:#000000; <--thats were you put the border color.
border-style: dashed; <---that's were you decide the border style:(solid,dotted,dashed,ridge)
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
<---On all of these you can decide the the width of the border, you can also decide to just put a border at a certain place by putting 0px at the other ones and etc.
2.Background:
For the background you have the choice between putting a background picture or a color:
background-image:url('back.jpg');<---URL of image goes there.
background-color: #000000; <---Code color goes there.
3.Scrollbar:
With this kind of code you can also change around the scroll bar.
I hope this tutorial helped you make you text boxes original!:)
If this tutorial really did help you, it would be really nice to credit us somewhere on your site.:)
Need Help with this tutorial?
Email Natacha at natacha@angelknight.net
Announcements
