Align 125x125 ads ?

okkzz

11-10-2010, 09:02 PM

Hello, I'm making a blog on which I want to put 125x125 ads.
I'm facing a problem tho, I want my 4 ads to be like this:
http://s2.noelshack.com/uploads/images/18236854982115_sans_titre_1.jpg

And what I get is this :
http://s2.noelshack.com/uploads/images/8417053870434_sans_titre_2.jpg

With the following code :
<script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><p style="padding:0;margin:0;line-height:12px;font-size:10px;width:125px;text-align:center;color:#2AB8E7;"><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>

<script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><p style="padding:0;margin:0;line-height:12px;font-size:10px;width:125px;text-align:center;color:#2AB8E7;"><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>

<script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><p style="padding:0;margin:0;line-height:12px;font-size:10px;width:125px;text-align:center;color:#2AB8E7;"><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>

<script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><p style="padding:0;margin:0;line-height:12px;font-size:10px;width:125px;text-align:center;color:#2AB8E7;"><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>

How can I do it ?
Thanks ! ;)

Excavator

11-10-2010, 10:17 PM

Hello okkzz,
Using floats is how you put thing beside each other. The natural flow of a float is to drop to the next line when there is not enough room for it. By putting the 4 floats in a container and specifying a width that is wide enough for 2 of them (plus their margins) you can make your 4 ads form a square.

Try it like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #000;}
#wrapper {
width: 270px;
margin: 50px auto;
overflow: auto; /*to clear the floats*/
background: #ff0; /*a bg color for demonstration only*/
}
p {
width: 125px;
margin: 5px;
padding: 0;
float: left;
line-height: 12px;
font-size: 10px;
text-align: center;
color: #2AB8E7;
}
</style>
</head>
<body>
<div id="wrapper">
<p><script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>
<p><script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>
<p><script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>
<p><script type="text/javascript" charset="utf-8" src="http://ads.advertisespace.com/AA/Jf/qG.js"></script><a href="http://www.advertisespace.com/?a=AAFcJL" style="color:#2AB8E7;">Advertising Online</a></p>
</div>
</body>
</html>

okkzz

11-10-2010, 11:45 PM

Thanks a lot it's working like a charm :)

Sorry for this noobish question, I'm using a blogger template, and trying hard to make a nice blog but it's complicated as I have no clue about coding :(

So thanks ;)