How to use CSS content boxes

[Botan]

We will make a practical item of CSS to show a way to make a box with CSS to get content. The box will have a specially designed frame thrown the contents inside. The example we have chosen could be done in several ways, each with its advantages and disadvantages. However, we will explain how to do that we found most useful. Would have these advantages and disadvantages:

Advantages: The box can grow down anything you want. So do not be a problem that had to put more or less text, because the box is adjusted to the size we have.

Disadvantages: The box has a fixed width, which is marked by the size of the images we have created. If nested many layers in this case, layout can be problematic, although we have not experienced this problem in our examples.

[Botan]

Images

To make this case we used a pair of images. One for the top frame and one for the bottom of the frame. These images can be made with any image editing program, adjusting colors and shapes the appearance of our own site. The images we have used are these:

HTML code

The exercise we have made using two layers (label <DIV>), one inside another. One layer is called "top box" to be the style of the top of the box, and a "box below" where will the styles needed for the body of the box and the bottom. The main layer is "top box" and within the layer will be "box below." In "box below" is where we'll enter the text to be placed inside the box. We put in "top box" and the code is as follows:

<div class="top box"> 
<div class="box below"> 

.... 
</ Div> 
</ Div>

CSS Code

To define the appearance of "top box" and "box below" has used CSS. As we discussed in "top box" identifies aspects of the top of the box and "box below" those of the bottom. Moreover, as "top box" contains "box below", all styles that we defined in "top box" also inherit the "box below." This is the style sheet code for this example:

. Top Box{ 
width: 600px; 
background-image: url ("top.gif"); 
background-position: top center; 
background-repeat: no-repeat; 
} 

. Down Box{ 
background-image: url ("down.gif"); 
background-position: bottom left; 
background-repeat: no-repeat; 
padding: 58px 75px 58px 69px; 
}

The exercise is very simple, but quite useful.