Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

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

An example of a CSS background image web text box

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 using CSS position

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 given a CSS Position

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.

2nd example of a web text box

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

blog comments powered by Disqus


Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials