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 Follow Us on Twitter Our YouTube.com Channel Facebook Page

CSS Text Box - CSS and Dreamweaver Tutorial


Share this Dreamweaver Article:

In this Dreamweaver and CSS Tutorial you can discover how to create a text box using pure CSS. The web text boxes in the examples below contain no images, that’s right, no images at all. The framework of the web text box requires the creation of a 3 div text box and then CSS text box styles are added to style the paragraphs and title as well as to make sure that the web text box automatically expands along with any content that is added to it. The html for the text box requires only 3 div tags to create. The CSS for the text box is minimal too.


If you prefer, you can watch a Dreamweaver video tutorial explaining how to create CSS Text Boxes.




1. Create the HTML for the Web Text Boxes

The html for the text box is so easy to create. A containing div is needed to wrap around the other div tags so a div with a class of ‘holder’ has been created. We are using a class because we can then create more than one text box on a page and be sure of passing html validation.

Inside of the holder class div a div with a class of ‘top’ has been created and will hold our h3 heading title tag. The top div is then closed and paragraph tags are added to the html text box.

A div which will be labelled with a class of ‘bottom’ will make up the base of the web text box.



 <div class="holder"> 

  <div class="top"> 

   <h3>Your Title Goes Here</h3> 

 </div> <! end top --> 

   <p>Your Text Goes Here</p> 

 <div class="bottom"></div> <! end bottom --> 

 </div> <!-- end holder div -->

One could argue that there might not be a need for the bottom div when creating these web text boxes, after all, padding and margins could be set to the holder div and paragraph tag to push them away from one another so that the text boxes will continue to expand. Instead, the bottom div has been placed to act as the buffer between the paragraph and the holder div and means we can leave the styling of the outer container to a minimum which I think is a good practice.

2. Style the CSS Text boxes

To style the html textbox css, the 'holder' class div has been set a height of auto and will expand naturally with the content inside of the html box. The width of the text box in css has been set to 250 pixels and is a decent size to fit paragraph text and links or any other content you wish to put inside of the css text box. A bottom margin of 10 pixels has been added to push away any elements that the holder will be next to like another div text box.

We will need to apply borders to the left and right of the paragraph content and this is best achieved by taking the default margins from the paragraph and setting them to zero.

Styling has been applied to the paragraph tag which sits inside of the 'holder' class div and makes up the main content area of the web text box. The styling here is important because in order to create the illusion of a fully enclosed html text box, we will need to apply borders to the left and right of the paragraph content and this is best achieved by taking the default margins from the paragraph and setting them to zero. A 1 pixel solid border is added to the html text box css paragraph and padding pushes the text in and away from the surrounding divs while maintaining a solid and flawless border structure.

The div class ‘top’ needs to have a border and as the holder div is set to a width of 250 pixels, a width of 248 pixels is set for the ‘top’ div while the 1 pixel border on either side will make the total width of the ‘top’ div to be 250 pixels; a facet overlooked by designers when trying to style a div text box or for beginners when learning how to create a text box.

A background color of gray has been set for the title area of the ‘top’ div of the html box.



 .holder {

  height:auto;
  width:250px;
  margin-bottom:25px;

 } 


 .holder p {

  border-left:1px solid #333;
  border-right:1px solid #333;
  padding:10px 15px;
  margin:0;

 } 

 .top {

  width:248px;
  height:30px;
  border: 1px solid #333;
  background:#ccc;

 } 

 .top h3 {

  margin:0;
  line-height:30px;
  padding:0px 10px;
  font-family:Tahoma, Geneva, sans-serif;
  font-size:15px; 		 

 }

 .bottom {

  width:248px;
  height:10px;
  border-bottom: 1px solid #333;
  border-left:1px solid #333;
  border-right:1px solid #333;
 
 }
The line height of the h3 tag is set to 30 pixels and matches the height of the ‘top’ div and means that any title text placed inside of the h3 tag will be centered perfectly.

The h3 tag inside of the ‘top’ div has the margins set to zero and removes any problems facing the continuous border of our css text box. The line height of the h3 tag is set to 30 pixels and matches the height of the ‘top’ div and means that any title text placed inside of the h3 tag will be centered perfectly in the middle of the ‘top’ div. Adjustments are made to the padding to push the title text away from the sides of the html text box but no padding is added as the title is exactly positioned with the line-height property.

The ‘bottom’ class div for the text box in css has been styled in essence, the same as the ‘top’ div with the exception that the border is only necessary on the bottom and sides of this div tag and not on the top. Otherwise we will spoil the illusion of creating a css text box with a fully enclosed border.

The 'bottom' div is set to a height of 10 pixels and now separates the paragraph content from the end of the web text box sufficiently.


Extra styling for the CSS Text Boxes

Having completed this css tutorial, you should have a perfectly functioning html text box with css styles added to make this css text box automatically expand with the content. You can apply curved corners using css to make your web text box really stand out. Here are the necessary styles which you should add to the div class called ‘bottom’:

 /* -webkit for Safari and Google Chrome */

  -webkit-border-bottom-left-radius:12px;
  -webkit-border-bottom-right-radius:12px;


 /* -moz for Firefox, Flock and SeaMonkey  */

  -moz-border-radius-bottomright:12px;
  -moz-border-radius-bottomleft:12px; 



Related Tutorials:

Pure CSS Text Boxes - Dreamweaver video tutorial part 1

Pure CSS Text Boxes - Part 2 Dreamweaver video tutorial part 2

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

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

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



blog comments powered by Disqus

Dreamweaver Website Templates

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

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

paypal