Home Products Purchase Support Examples          

In this example we created four DIV elements. Each of the DIV element has an animated gif frame and can contain various HTML components like paragraphs, headers and images. For each of the DIV element there is a style sheet ID selector with absolute positioning to put it in the right place.

 

Insert here headers, paragraphs and images.

 

 

Insert here headers, paragraphs and images.

 

 

Insert here headers, paragraphs and images.

 

 

Insert here headers, paragraphs and images.

 

This is the code of the CSS ID selectors:

div#topleft {
position: absolute;
height: 280px;
width: 180px;
left: 295px;
top: 400px;
right: 550px;
bottom: 700px;
background-image: url(div1.gif);
background-repeat: no-repeat;
padding: 10px;
}
div#topright {
position: absolute;
height: 280px;
width: 180px;
left: 505px;
top: 400px;
right: 760px;
bottom: 700px;
background-image: url(div1.gif);
background-repeat: no-repeat;
padding: 10px;
}
div#bottomleft {
position: absolute;
height: 280px;
width: 180px;
left: 295px;
top: 710px;
right: 550px;
bottom: 1010px;
background-image: url(div1.gif);
background-repeat: no-repeat;
padding: 10px;
}
div#bottomright {
position: absolute;
height: 280px;
width: 180px;
left: 505px;
top: 710px;
right: 760px;
bottom: 1010px;
background-image: url(div1.gif);
background-repeat: no-repeat;
padding: 10px;
}

This is the DIV tags in the HTML body:

<div id="topleft">
<p>&nbsp;</p>
<p>Insert here headers, paragraphs and images.</p>
<p>&nbsp; </p>
</div>
<div id="topright">
<p>&nbsp;</p>
<p>Insert here headers, paragraphs and images.</p>
<p>&nbsp; </p>
</div>
<div id="bottomleft">
<p>&nbsp;</p>
<p>Insert here headers, paragraphs and images.</p>
<p>&nbsp; </p>
</div>
<div id="bottomright">
<p>&nbsp;</p>
<p>Insert here headers, paragraphs and images.</p>
<p>&nbsp; </p>
</div>