Adsense with images without tables

Discussion in 'AdSense' started by cray, Oct 17, 2005.

  1. #1
    Hi all,

    What would be the most effective way of positioning images close to Adsense without bloating the code on the page and using tables/columns/rows? For example if you were using a 4 advert/250x250 with border and positioning the images either side of each ad?
     
    cray, Oct 17, 2005 IP
  2. MattL

    MattL Well-Known Member

    Messages:
    838
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    118
    #2
    Using CSS positioning
     
    MattL, Oct 17, 2005 IP
  3. cray

    cray Peon

    Messages:
    58
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Could anyone provide any examples of the CSS code for this?
     
    cray, Oct 17, 2005 IP
  4. kawebspy

    kawebspy Peon

    Messages:
    491
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #4
    here's an example from a beginner like me:

    #admain {
    width: 300px;
    height: 250px;
    }

    #adimage {
    width: 50px;
    height: 250px;
    align: left;
    }

    #adadsense {
    width: 250px;
    height: 250px;
    align: right;
    }




    The implementation on the body:

    <div id="admain">
    <div id="adimage>
    note: image here
    </div>

    <div id="adadsense">
    note: adsense here
    </div>

    </div>

    hope it helps...
     
    kawebspy, Oct 17, 2005 IP
  5. cray

    cray Peon

    Messages:
    58
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi, appreciate the help thank you.

    So could this additional code be placed anywhere in my page? for example at the very bottom of my pages code? How is the code positioning the adsense on the page in a ceratin place? or does the CSS code need to be placed in the code exactly where the adsense should appear? Does your example just show the adsense with one image?
     
    cray, Oct 17, 2005 IP
  6. MattL

    MattL Well-Known Member

    Messages:
    838
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    118
    #6
    The CSS code would be in it's own file(preferably) or in your head section.

    The divs go in your html code (as shown above).
     
    MattL, Oct 17, 2005 IP
  7. Jafar Calley

    Jafar Calley Peon

    Messages:
    255
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #7
    The tutorial at http://www.w3schools.com/css/default.asp got me started with css programming. There are also plenty more learning resources around if you Google about. ;) I suggest learning a bit and then playing about with it, then if you aren't fully confident you can download pre-built css code which you can then tweak to your satisfaction using your new found knowledge.
    Have fun :)
     
    Jafar Calley, Oct 17, 2005 IP
  8. Eric Giguere

    Eric Giguere Peon

    Messages:
    541
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You might want to try the open source (free) web authoring package Nvu, which has CSS support in it. Makes it simple to try things out.
     
    Eric Giguere, Oct 17, 2005 IP
  9. kawebspy

    kawebspy Peon

    Messages:
    491
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Okay...

    It was already explained by previous posters where to put the CSS code. Basically, the CSS code is placed on the head section of the page or inside the:

    <head> and </head>

    while the implementation of it or those codes with <div> </div> will be placed on the section of the page (inside the <body> and </body> tags where you want the image with Adsense to be displayed.

    About the image, you better create an image that you wanted to be displayed with your adsense.

    Let's take my Trend Update blog as an example. Take a look at the image on the side of the adsense.

    Well the image has four images of cellphones arranged in a column. But they are not separated with each other. They are all part of an image.

    Anyway, with regards to it, it only depends on you, your plan, your trick and your way.

    Now to use CSS in doing this, you need to have basic knowledge on CSS. Thus you need to study it first using tutorials available on the net.
     
    kawebspy, Oct 17, 2005 IP
  10. lingeriediva

    lingeriediva Peon

    Messages:
    268
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #10
    By the way, while it is not nearly so cool as CSS, there is nothing all that terribly wrong with tables.
     
    lingeriediva, Oct 17, 2005 IP
  11. vegasfreak

    vegasfreak Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    When i'm not perusing this board and learning valueable lessons from its great members, I design html templates for a monstrous dot com.

    Here's an easy way with css all inline. You can break the div styles into classes on an external style sheet if you'd like.

    <div style="float:left"><img src=image.jpg></div>
    <div style="float:left">adsense script</div>
    <div style="float:left"><img src=image2.jpg</div>
    <div style="clear:both"></div>


    Don't forget the "clear:both", it acts as a carriage return and ends the "float row". You can wrap a div around the whole thing too, if you'd like, but its not necesscary.

    My first post!

    -vegasfreak
     
    vegasfreak, Oct 18, 2005 IP
  12. Eric Giguere

    Eric Giguere Peon

    Messages:
    541
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #12
    No, but there are advantages to using CSS if you can do it. The resulting page is simply more elegant from a coding standpoint, and easier to maintain. But more importantly, it's easier to make sure that the most relevant content is near the top of the page and to use CSS to move non-content things around on the page as necessary. Though it's true this is now less of an issue for AdSense publishers with section targeting, it's still good for general SEO to put all the important stuff at the top.

    That said, I wouldn't go around changing an already-developed site from tables to CSS without some better reasons. But I think new site development should be done primarily with CSS if possible.
     
    Eric Giguere, Oct 18, 2005 IP
  13. Critters

    Critters Guest

    Messages:
    754
    Likes Received:
    87
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I love tables, use them loads, and I think any CSS will "bloat" the code just as much.

    and a table with 4 boxes for images like this:

    <table border=0 width=728><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></table>

    Is only around 85 bytes of data. and if you are talking about visual bloating and not file size bloating, then just tab your code.

    I trust tables to look EXACTLY the same on all browsers, and after all, this is positioning a few images next to some other code, no need to over-engineer it :)
     
    Critters, Oct 18, 2005 IP