Ad Boxes Created with CSS

Since I published the ad space boxes on the pages of Blogs Dominicanos, I’ve received a couple of emails asking how it was created. The ad boxes is created through a list and the list is then modified using CSS code. Below is the coding for the style sheet I have on this blog. You can use it and modify the code to make it the size you want and with as many boxes you want. You’ll also need to create a form that will take the id number from the box the advertiser wants and insert into the email you will receive.

First things first, you need to create an DIV id for the ad boxes. This way you can make changes to the ul and li without affecting any other ul’s and li’s on the page. For all intensive purposes I’ve set my width to 800, you can set it to any width you want. Margin-left is for ie6 and ie7. Without the margin-left setting, you’ll have the ad boxes displayed with no indentation in FireFox and with indentation in ie7.

div#addbox {
width: 800px;
margin-left:0;
float:left;
padding-left: 0;
}

The ul (unoredered list) properties. Padding:0 removes the indentation in FireFox.

div#addbox ul {
padding:0px;
background-image:none;
margin-top: 5px;
float:left;
margin-left:0;
}

The following code sets the list style properties.

div#addbox li {
background-image:none;
display: block;
width: 16px;
height: 16px;
float: left;
margin: 0 2px 2px 0;
}

The following code sets the list style properties of the background for the boxes with a hyper link. You can display them inline, list-item, compact, or in this case block style.I’ve also set the hieght and width for the boxes as well as the color.

div#addbox li a {
display: block;
width: 16px;
height: 16px;
background: #7B97CB;
}


Hovering over the boxes changes the color. This is done with the following code.

div#addbox li a:hover{
background: #3E5793;
}

Once you have an advertiser and depending on whether or not you want to display the image with a border, you may want to change the following size of the border and perhaps add other styling such as border color etc…

div#addbox img {
border: 0;
}

The html code for the boxes is the same as any item list for an unordered list. I’ve removed the quotes so you’ll have to insert the quotes when you copy/paste into your files…

<div id=addbox>
<ul id=addbox>
<li><a href=http:// id=1><img src=http://image1.location.jpg/></a></li>
<li><a href=http:// id=2><img src=http://image2.location.jpg/></a></li>
<li><a href=http:// id=3><img src=http://image3.location.jpg/></a></li>
<li><a href=http:// id=4><img src=http://image4.location.jpg/></a></li>
<li><a href=http:// id=5></a></li>
<li><a href=http:// id=6></a></li>
<li><a href=http:// id=7></a></li>
<li><a href=http:// id=8></a></li>
</ul>
</div>

And this is what the boxes will look like…