How to Make a Text Box Scrollable With XHTML in Dreamweaver WC3
A Web designer sometimes places text within a scrollable text box. This confines the text to a certain space within his page's layout. A scrollable text box can host any size of text, without disrupting the positioning of the other elements on the page. Many designers use the popular Adobe Dreamweaver program to write the XHTML code and CSS rules that create and style the text box.
Other People Are Reading
Instructions
-
-
1
Open your XHTML document and switch to Dreamweaver Code view. The code view button is at the far-left side of the top menu bar.
-
2
Code the text box with XHTML. Write the code for your text box and place it inside of the body tag. In the following example, a new text box div has been created. The div contains text that has been wrapped into paragraph tags:
<div>
<p>This is the text that will appear inside of the text box.
</p>
</div>
-
-
3
Style the text box with a new CSS class. Place the CSS rule between the head tags of your document. This CSS class can customize the size of the text box, place a border around the text box and establish padding or space between the border and the text. Consider the following example code. This code styles a text box of 250 pixels by 250 pixels. It places a solid three-pixel border around the box. And, a 10-pixel span of padding has been set inside of the border.
<style>
.textBox {
height:250px;
width:250px;
border-style: solid;
border-size: 3px;
padding: 25px;
}
</style>
-
4
Customize the overflow property. The overflow property tells the Internet browser how to handle overflow text. The property accepts five different values. The visible value would let the overflow text spill out of the text box and remain visible to the user. The hidden setting hides the excess text. The scroll value and in most instances the auto value both place a scrollbar beside the text box making the text box scrollable. Inherit value tells the property to inherit the overflow setting from its parent element. This sample code has been adjusted to contain an overflow property with a value of scroll. The text box will now be scrollable.
<style>
.textBox {
height:250px;
width:250px;
border-style: solid;
border-size: 3px;
padding:25px;
overflow: scroll;
}
</style>
-
5
Assign the CSS class to your text box. The sample code assigns the .textBox CSS class to the XHTML code:
<div class="textBox">
<p>This is the text that will appear inside of the text box.
</p>
</div>
-
1
Tips & Warnings
Adobe offers a Scrollbar Styler Dreamweaver extension. It integrates with Dreamweaver. It allows users to customize the appearance of the scrollbar. The extension may be purchased from the Dreamweaver website for $5.
References
- Photo Credit Comstock/Comstock/Getty Images
