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

Create Text Boxes - Expanding Text Boxes



In this tutorial, you will learn how to create a text box. A text box is a box around text which contains and separates your website content. The example html text boxes below are made from background images, html code for text box structure, and css which controls the web text box width and height as well as padding and line height for the content of the text boxes.



The html box text is set with a background baseline image and is set to automatically expand with the html text box content which means that you can put 10 words or 1000 words into your text boxes safe in the knowledge that they will keep expanding down the page and most importantly contain your content.

If you want to create a text box like the examples below you will need to know the code for the text box to work. We will get to the html for the text box but first check out these two examples here to make sure you want to create a text box like this:





1. Add the Html Text Boxes mark-up

Believe it or not, to make the text box in html, this is all of the mark-up you need:


 
 <div class="box">
  
   <h3>Your Title Goes Here</h3>
  
    <p>
  This is some sample text which you can use to see 
  that the web text box will expand with the content
   </p>

 </div> <!-- end class box -->
 

bottom of text box The html text box consists of a class div called ‘box’, and at the bottom of the div is placed a background image attached using css. The 'box' div is the container div which is wrapped around the title and paragraph tags.



background image for title tag The other image is a background image for the title which is attached using css to the h3 selector.



We then use CSS to style the borders of the html box text and create the illusion that the text is fully contained inside of a web text box.

2. Add the CSS to Create the Text Boxes

It's now time to copy and paste the CSS for the Web Text Boxes into our CSS File.

The container class div called ‘box’ has the ‘boxBottom.jpg’ image attached to it and is positioned to the bottom of the div and as far left as possible. The width of the image matches the html text boxes’ width.

There are 15 pixels of padding set to the bottom of the ‘box’ div which will push any content away from the image for a nice fit of your html text box and to keep your html box text from seeping out from the bottom.

There is a 10 pixel margin set to the bottom of the ‘box’ div which will push any other web text box away from it too.


 /* .box div holds the bottom image */


  .box {
    
    background: url(../images/boxBottom.jpg); 
    background-repeat: no-repeat
    background-attachment: scroll left bottom;
    background-position: left bottom;
    margin-bottom: 10px;
    padding: 0 0 15px;
    width: 250px;
 }

 /*  this is the title h3 tag and contains the background
     image for the title        */

  .box h3 {

    background: url(../images/box.jpg) repeat scroll 0 0;
    color: #000;
    font-size: 17px;
    height: 35px;
    line-height: 30px;
    margin: 0;
    padding: 0 15px;
  
 }

 /* The paragraph tag contains the side borders mark-up */

 .box p {

    background: #ffffff none repeat scroll 0 0;
    border-color: #CCC;
    border-width: 0 1px;
    border-style: solid;
    color: #444444;
    font-size: 11px;
    line-height: 1.3em;
    margin: 0;
    padding: 15px 14px 0;
    width: 220px;
 }
  

The selector for the h3 title tag has the image called ‘box.jpg’ attached as a background image and is positioned at zero for the X axis and zero for the Y axis. The images now form a box around the text content inside of the text box between the top image and the bottom image.

To complete the code for the text box and to create a text box illusion, borders need to be added to both sides of the text box content. A selector is created for the paragraph tag which applies a one pixel solid border to each side of the paragraph and thus completely encompassing the text boxes.

Summary

By now you should have a fully functioning html text box with background images controlled by css styling. This completes the explanation for how to create a text box.

If you want to know how to create the drop cap effect whereby the first letter inside of the text box is much larger than the rest and pushes the rest of the content away, please follow this link for CSS Drop Caps.





Related Tutorials:

Create Text Boxes - Video Tutorial

Pure CSS Text Boxes - Video Tutorial



Share this Dreamweaver Article:

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