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

CSS Text Boxes in Dreamweaver

GoDaddy.com Hosting Plans Sale!Godaddy Hosting

we shall make a pure css text box, also known as a scrolling text box. We shall construct some simple html divs to create the html box and then apply css techniques to make a text scroll box which is fully enclosed and automatically expands with the content that is placed inside of it. Here is the Link to part 2: CSS Text Boxes part 2.

CSS Text Boxes - Guidelines

Blue Text Box with Gradient

This is an expanding web text box with a blue gradient and a text shadow applied to it. This text box also has rounded corners at the bottom. It has been completely generated with CSS and has no background images at all.

Find out how to make a stunning pure CSS text box in this Dreamweaver and CSS Tutorial. Text boxes can be used to hold you website links just like I do on this website. Learn to use smart CSS techniques to create a css text box with minimal text box code like the example on the left which also has a gradient applied to the top html box.



HTML text box code

The html text box in this Dreamweaver video tutorial also automatically expands with the website content that you place inside of it so you can be assured that the content will not overflow.

The html text box contains three div tags. One div tag is named with a class of ’holder’ and is the containing div tag that holds a div with a class of ‘top’ and a div with a class of ‘bottom.’ The ‘top’ div holds the title for the html box to which the title is placed inside of an h3 tag. The ‘bottom’ div tag sits at the bottom of the html text box.

Between the ‘top’ div and the ‘bottom’ div you can put into the text box code a paragraph tag and place some written content. Or you can place an unordered list tag into the text box code and put your links into the text box.

That’s all of the html you will need to create an html text box in this Dreamweaver tutorial. As part of the CSS tutorial, the styling of the css text box is relatively easy too.



The CSS for the Text Box

The height of the ‘holder’ div is set to auto which will help it to expand with the content of the CSS text box. A standard width for the CSS text box is 250 pixels however, as the CSS tutorial requires that a 1 pixel border be placed around the html text box, a width of 248 pixels for the ‘top’ and ‘bottom’ divs should be set to allow 1 pixel on either side. The containing div called holder will also be give a bottom margin of 10 pixels to push away any surrounding content not associated with the CSS text box.

The paragraph or unordered list tags must have the default margins removed and padding set to squeeze the html text box content away from the edges and away from the bottom div to maintain a solid illusion of a fully enclosed css text box.

For further explanation of how to create CSS text boxes you can follow a CSS tutorial article at the following link: CSS Text Box Tutorial



Related Tutorials:

CSS Web Text Boxes in Dreamweaver - Video Tutorial (using background images)

Create a Text Box - Dreamweaver Article Tutorial (using background Images)



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