Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 08-01-2011
Member
 
Join Date: Jul 2010
Posts: 75
How to use CSS content boxes

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.
Reply With Quote
  #2  
Old 08-01-2011
Member
 
Join Date: Jul 2010
Posts: 75
Re: How to use CSS content boxes

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:
HTML Code:
<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:
Code:
. 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.
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , , , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "How to use CSS content boxes"
Thread Thread Starter Forum Replies Last Post
Content blocker blocks content on certain sites with Opera GiveNTake Technology & Internet 5 21-06-2011 07:30 AM
How to nest boxes inside parent boxes in CSS? Dilbert Software Development 5 11-05-2010 04:41 PM
Popup Boxes in JavaScript Amaresh Software Development 5 21-01-2010 11:51 AM
Graphics card boxes GabrieL Monitor & Video Cards 1 27-12-2008 04:57 PM


All times are GMT +5.5. The time now is 09:11 AM.