Web Text Boxes CSS in Dreamweaver
Learn how to use Auto Expanding website text boxes in this Dreamweaver CS4 video Tutorial. You can download the files used and create the text boxes on your website. This Dreamweaver tutorial has been released under a Creative Commons License for Scotland, England and Wales and USA. (see below) link to: Part 2
Web Text Boxes - CSS Background Image Tutorial
I use web text boxes to hold the links in my website. Web text boxes are great for holding links because the text box automatically expands as you add more and more links to them and keeps the content fully enclosed inside of a html box.
Discover the best way to make a web text box using css and background images in this Dreamweaver video tutorial.
The Text Boxes HTML
The text boxes html code necessary to create web text boxes is very minimal indeed. A div with a class of ‘box’ is added into which goes a H3 title tag for the title of the web text box. After the title tag and still inside of the ‘box’ div you can either place a paragraph tag or an unordered list depending on what content you wish to put in your web text boxes.
The CSS Background Images
The first css background image will be attached to the H3 title tag using the CSS background image property and will be put into position behind whatever title you place into the H3.
The second css background image will be the image that makes up the bottom of the div tag and will be attached as the background image of the ‘box’ div tag and given a css position of bottom and left.
The Text Box CSS
The text box CSS is pretty simple to style although absolute beginners may have to practice the technique a few times to understand the CSS Position and text box CSS.
Essentially, to style the content we need to add padding and margin to keep our css box text content snug inside of the illusory background text box images. A 1 pixel solid border needs to be added to the left and right in order to complete the web text box effect.
Further information can be utilized by completing the Dreamweaver video tutorial above. Not forgetting that there are downloadable examples of the text boxes html and the web text boxes images to get you started. If you prefer, you can read a dreamweaver tutorial article explaining how to Create Text Boxes.
Related Tutorials:
CSS Text Box Tutorial - Dreamweaver Article Tutorial (No images)
Pure CSS Text Boxes - Dreamweaver Video Tutorial (No images)
Released Under Creative Commons License
check this link for: permissions