1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

728 x 15 AdSense ad below header - won't go all the way across screen

Discussion in 'CSS' started by GPS Mapper, Jun 5, 2006.

  1. #1
    Ok, confession to start with. I know nothing about CSS. Nevertheless, I have managed to place a 728 x 15 ad in a WP blog, but can't get it working in my TypePad blog. It is centered, but only goes part way across the screen. It's a three column blog and I want the ad under the header, but above the three column break.

    I've modified the templates, and am pretty sure the only changes that need to be made are in my style sheet. Any suggestions of what to try? I realize I'm not giving you much to go on, but I don't really speak the language.
     
    GPS Mapper, Jun 5, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Give us a link, and we can figure it out.

    cheers,

    gary
     
    kk5st, Jun 6, 2006 IP
    GPS Mapper likes this.
  3. GPS Mapper

    GPS Mapper Peon

    Messages:
    267
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    GPS Mapper, Jun 6, 2006 IP
  4. brian394

    brian394 Well-Known Member

    Messages:
    226
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #4
    Looks fine to me. Perfectly centered in all the browsers I tested (Opera, FireFox, and IE). What do you mean by "it only goes part way across the screen"? Are you talking about it's width? The number of links inside the link unit? Maybe you can post a screenshot so we can get a better idea of what you're seeing.
     
    brian394, Jun 6, 2006 IP
  5. GPS Mapper

    GPS Mapper Peon

    Messages:
    267
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yes, it's centered, but it doesn't run the full width of the header. Image below.

    [​IMG]
     
    GPS Mapper, Jun 6, 2006 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    There are two problems. First are the <style></style> tags that surround the ruleset. Second, the #adsense div has no background color, so it defaults to transparent. That's why you see the green around Google's table. Do this;
    
    #adsense {
        background-color: white;
        }
    Code (markup):
    Don't forget to remove those tags.

    cheers,

    gary
     
    kk5st, Jun 6, 2006 IP
  7. GPS Mapper

    GPS Mapper Peon

    Messages:
    267
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Done! Dude, you rock my world. I'd give you more reputation points if DP would let me. Gotta give it to someone else first tho I guess.

    Happy happy joy joy
     
    GPS Mapper, Jun 6, 2006 IP
  8. fusionmanx

    fusionmanx Peon

    Messages:
    79
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    the problem is problem in the html if it is running off table make sure the colspan is right.
     
    fusionmanx, Jun 7, 2006 IP
  9. GPS Mapper

    GPS Mapper Peon

    Messages:
    267
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Hey Gary,

    If I wanted to increase the verticla height to 30 px, centerting the 15 px ad on it vertically, how would I do that?
     
    GPS Mapper, Jun 9, 2006 IP
  10. brian394

    brian394 Well-Known Member

    Messages:
    226
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #10
    
    #adsense {
     [B]margin-top: 8px;
     margin-bottom: 8px;[/B]
     background-color: white;
     text-align: center;
     margin-left: auto;
     margin-right: auto;
    }
    
    Code (markup):
     
    brian394, Jun 9, 2006 IP
  11. GPS Mapper

    GPS Mapper Peon

    Messages:
    267
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thanks Brian. I put it up on the test blog, but it looks like I picked up space below the ad, but not above.
     
    GPS Mapper, Jun 9, 2006 IP
  12. brian394

    brian394 Well-Known Member

    Messages:
    226
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #12
    That's because you have an extra space between the 8 and the px...

    margin-top: 8 px;

    Try changing it to...

    margin-top: 8px;
     
    brian394, Jun 9, 2006 IP
  13. GPS Mapper

    GPS Mapper Peon

    Messages:
    267
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Thanks for catching that Brian. I made the change, but it doesn't appear to have made any difference.
     
    GPS Mapper, Jun 9, 2006 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #14
    Does this do something like what you want?
    #adsense {
        padding-top: 10px;
        height: 20px;
        background-color: white;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        }
    Code (markup):
    I'm not familiar with how the ads are written, other than the DOM showing a table. You do need to lose the center tag; it's no longer a part of html. As long as the #adsense div is full width,, the margin: auto; thingies don't do a thingie. :oops: couldn't help myself. :)

    cheers,

    gary
     
    kk5st, Jun 9, 2006 IP
  15. brian394

    brian394 Well-Known Member

    Messages:
    226
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #15
    hmm, I thought that would get it, but I guess margins are not quite what we're looking for in this case. :D Try this instead...
    
    #adsense {
    [B]padding-top: 7px;
    padding-bottom: 3px;
    height: 20px;[/B]
    background-color: white;
    color: black;
    text-align: center;
    width: 100%;
    }
    
    Code (markup):
    You can always tweak the values of padding-top and padding-bottom to get it to the exact position you like.
     
    brian394, Jun 9, 2006 IP
    GPS Mapper likes this.
  16. GPS Mapper

    GPS Mapper Peon

    Messages:
    267
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Thanks guys. That did it!
     
    GPS Mapper, Jun 10, 2006 IP