How to Implement a Link Unit inside header image

Discussion in 'HTML & Website Design' started by JohnS0N, Sep 18, 2007.

  1. #1
    Hello, I need help.

    [​IMG]

    I have designed this topbar navigation and I would like to put adsense code 728*15 in it. I'm using a customized blogger theme.

    Thanks in advance!
     
    JohnS0N, Sep 18, 2007 IP
  2. MakeADifference

    MakeADifference Peon

    Messages:
    476
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Imagemap will help. You can find some tutorial online. It is very simple and straight forward.
    check this url: lightsphere.com/dev/ismaps/
     
    MakeADifference, Sep 18, 2007 IP
  3. JohnS0N

    JohnS0N Notable Member

    Messages:
    1,581
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    210
    #3
    I've been playing with it but don't quite understand it. I'm not a programmer.

    <img src="http://i197.photobucket.com/albums/aa256/TheWicker/topheaderbustathief2.jpg" alt="" usemap="#cube">

    <map name="cube">
    <area shape="rect" coords="1,1,37,37">

    Is this somewhat the code I use? Where do I place adsense code?
     
    JohnS0N, Sep 18, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    An imagemap isn't the appropriate choice here.

    Hang on, let me get home and I'll see what I can do.
     
    Dan Schulz, Sep 19, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ok, the first thing I'd do is ditch the tabs on the graphic entirely, and go with a Sliding Doors technique for the tabs instead.

    Then, I'd use negative margins to position the adsense code above the banner (yes, I said negative margins, not absolute positioning.
     
    Dan Schulz, Sep 19, 2007 IP
  6. JohnS0N

    JohnS0N Notable Member

    Messages:
    1,581
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    210
    #6
    Thank you very much for your answer! Now if you could explain in detail again for an average joe? I'm not skilled in programming, I can edit something or rewrite a small piece, other than that it's beyond me.

    Thanks!
     
    JohnS0N, Sep 19, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Actually I'll let A List Apart explain the Sliding Doors technique, since that's where it was originally published:

    http://www.alistapart.com/articles/slidingdoors/
    http://www.alistapart.com/articles/slidingdoors2/

    As for negative margins, I'd set a negative top margin to push the ads up (literally) where you want them. You may have to float them to the right if that's where you want them though. I'd have to see the link to your site though in order to write up a brief mini-tutorial on how to do that.
     
    Dan Schulz, Sep 19, 2007 IP
  8. JohnS0N

    JohnS0N Notable Member

    Messages:
    1,581
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    210
    #8
    Hi, my site is in the signature! Thanks for all the help in advance, I'll leave you double green rep :D

    If it helps I can also send you the full template?
     
    JohnS0N, Sep 20, 2007 IP