NEWS BOX

This is a demo for a small promo or news box. Very easy to set up, uses only 2 images.

 

1. Top Image

2. Bottom Image

This is the editable png file if you wish to download it.

 

The images do not repeat down the page, therefore, this technique is only suitable for smaller height boxes eg: promo boxes or news boxes.

 

VIEW the source code to see how this has been implemented.

HMTL CODE USED 


<div class="box1">
<h3>NEWS or PROMO BOX</h3> 
<p>TEXT GOES HERE</p>
<p>TEXT GOES HERE</p>
<p>TEXT GOES HERE</p>
<p>TEXT GOES HERE</p>
<p>TEXT GOES HERE</p>
</div>

The grey box above, uses the same technique, with different images. We assigned a class of .box2 so that we could implement another box on the page. The styles for .box2 are in the head of the document.

CSS 


/* styles the bottom of box with rounded corners */

.box1 {
width:268px;  /* determined by the size of image width */
padding:0 0 14px 0;
margin:10px auto;
background:url(bottom.png) bottom left no-repeat;
}

/* styles the top round corner image */
.box1 h3 {
margin:0;
padding-top: 15px;
text-align: center;
background:url(top.png) top left no-repeat;
height: 54px;
}

/* styles the paragraph text */
.box1 p {
margin:0;
padding-left: 20px;
padding-right: 10px;
line-height: 1.5em;
}

/* styles links in the box */
.box1 a {
text-decoration:none;
color:#44a;
text-decoration:underline;
}

* styles hover state of the links */
.box1 a:hover {
	text-decoration:underline;
}