WordPress.org

Ready to get started?Download WordPress

Forums

Javascript ads in 125X125 ad formate, formating!! (9 posts)

  1. technotip.org
    Member
    Posted 5 years ago #

    Hi guys/girls,

    I am using a theme in which I have the option to add 4 125X125 banner ads.
    I can put there only banners(image ads).
    But I want to place adify or adsense ads(125X125) in that place.

    The codes to put the banner ads are currently like this

    <a rel="nofollow" href="http://technotip.org/advertise/"><img style="margin: 0 15px" height="125" width="125" src="<?php 
    
    bloginfo('template_directory'); ?>/images/125x125.jpg" border="0" title="insert title" alt="insert title" 
    
    /></a>
    <a rel="nofollow" href="http://technotip.org/advertise/"><img height="125" width="125" src="<?php bloginfo('template_directory'); 
    
    ?>/images/125x125.jpg" border="0" title="insert title" alt="insert title" /></a>
    
    <a rel="nofollow" href="http://technotip.org/advertise/"><img style="margin: 0 15px" height="125" width="125" src="<?php 
    
    bloginfo('template_directory'); ?>/images/125x125.jpg" border="0" title="insert title" alt="insert title" 
    
    /></a>
    <a rel="nofollow" href="http://technotip.org/advertise/"><img height="125" width="125" src="<?php bloginfo('template_directory'); 
    
    ?>/images/125x125.jpg" border="0" title="insert title" alt="insert title" /></a>

    When I replace these codes with my 125X125 adsense ads, all the ads will showup like a single ad(with no gap in between each other).

    Now I think this problem can only be solved by using some class in my style sheet.
    So please anyone help me to get the code to place the javascript ads in those places.

    Please help me as soon as possible.
    And my site it http://technotip.org

    Thanks in advance.

  2. RoseCitySister
    Member
    Posted 5 years ago #

    You can't format the Google ads, except through their control panel and your choices are limited to colors. The font and margins, padding, etc. - you have no choices there.

    In order to have "gaps" between the ads, you would have to place one ad at a time - which would limit you to 3, if I recall Adsense guidelines correctly...

    on edit - what I would do, in this case, is use the 250x250 rectangle, and take out the individual divs, just have one big one instead of 4 little ones - not exactly what you're looking for, but doable. I believe it's three ad units to a page, and two link units? Not sure, it's been a while since I read the guidelines.

  3. RoseCitySister
    Member
    Posted 5 years ago #

    Sorry - reading over your post, I did not understand your question. Here's how I would do it:

    1. Put this style in your style sheet:

    .bigblock {
    	width: 270px;
    	height: 270px;
    	padding: 5px;
    }
    
    .left-top, .left-bottom {
    	width: 125px;
    	height: 125px;
    	background: url(images/125x125.jpg) no-repeat;
    }
    
    .right-top, .right-bottom {
    	float: right;
    	width: 125px;
    	height: 125px;
            background: url(images/125x125.jpg) no-repeat;
    
    }
    
    .clearblock {
    	width: 100%;
    	height: 5px;
    	clear: both;
    }

    And this would be your html:

    <div class="bigblock">
    
    <div class="right-top">Ad code</div>
    <div class="left-top">Ad code</div>
    
    <div class="clearblock"></div>
    
    <div class="right-top">Ad code</div>
    <div class="left-bottom">Ad code</div>
    
    </div>

    You would of course replace "Ad code" with your Adsense code for one 125x125 ad.

    That gives you this (without your images):

    http://rosecitygardens.com/test.html

    Disclaimer: I haven't looked at this in anything but FF/Mac.

  4. RoseCitySister
    Member
    Posted 5 years ago #

    I adjusted the CSS a tiny bit:

    .bigblock {
    	width: 255px;
    	height: auto;
    	padding: 5px;
    }
    
    .left-top {
    	width: 125px;
    	height: 125px;
    	background: url(images/125x125.jpg) no-repeat;
    	margin-bottom: 5px;
    }
    
    .left-bottom {
    	width: 125px;
    	height: 125px;
    	background: url(images/125x125.jpg) no-repeat;
    	}
    
    .right-top {
    	float: right;
    	width: 125px;
    	height: 125px;
    	background: url(images/125x125.jpg) no-repeat;
    
    }
    
    .right-bottom {
    	float: right;
    	width: 125px;
    	height: 125px;
        background: url(images/125x125.jpg) no-repeat;
    
    }
    
    .clearblock {
    	width: 100%;
    	clear: both;
    }
  5. technotip.org
    Member
    Posted 5 years ago #

    Hi RoseCitySister,

    Thanks a lot for answering my question.

    Now everything works fine, but in IE the things change.There the margine left after the 1st row ad is more.How can I reduce it in IE? Please open and see my blog in Internet Explorer.

    And in IE, my middle column([Homepage]where I have Commentators and Recommendation section) just drops down.Everything is working fine in Firefox.Problem only with Internet Explorer.

    I visited your website, its very nice.But couldn't find email subscription option there.I just wanted to keepup with your latest works.

  6. RoseCitySister
    Member
    Posted 5 years ago #

    I'm on a Mac, I don't have IE, sorry! But it's still the bane of my existence, lol.

    Is your theme a public release? Or a paid theme? If a public release, please give me the URL so I can download it and mess around with the layout. If not I'll just view source on your page.

    Give me a little while - I don't have time to do this right now, but will see what I can do.

    As far as the sub link, I haven't really "launched" yet, I'm still working on the themes I'm going to release - but you can use the Contact link on my site to email me.

  7. iamzippy
    Member
    Posted 5 years ago #

    Hi technotip.org

    I'm checking your page with IE Developer Toolbar, 'View DOM'.

    Despite a CSS-specified width of 135px, your .narrow-left DIV has an offsetWidth of 180px (that's the effective width) and .narrow-right is effectively 157px. To sit side by side they need at least 337px of space. The parent DIV is just 294px wide (by CSS).

    IE is adding the 160px width of the Adsense link unit (in .narrow-left) to the 10px left/right padding on the DIV to get 180px.

    Bottom line is, you just don't have enough horizontal space to fit.

    Have you considered using the IE DevToolbar? It's a free download.

    Also I'm curious why you have -10px side margins on these divs?

  8. iamzippy
    Member
    Posted 5 years ago #

    Interesting...

    I just updated the page, and you must have been editing it as I was typing. I see you floated the divs, and now it looks 'OK' in IE6/7.

    It also looks fine in FF, Opera, Safari.

  9. technotip.org
    Member
    Posted 5 years ago #

    Hi iamzippy,

    Thanks a lot for answering my question.

    Now everything works fine, but in IE the things change.There the margine after the 1st row ad is more.How can I reduce it in IE? Please open and see my blog in Internet Explorer.

    And in IE, my middle column([Homepage]where I have Commentators and Recommendation section) just drops down.Everything is working fine in Firefox.Problem only with Internet Explorer.

    @RoseCitySister, its a premium theme, and I have changed a lot from the original one.You can check my theme at http://technotip.org

    In firefox it works, but problem with IE.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.