SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    position image absolutely at top?

    i've got a transparent gif (although i've put a blue box round it for the purpose of this question) that allows a particular area of a background image to be clickable.

    in the safari browser the box is many pixels lower than the top, therefore almost missing the intended area, but in explorer it's fine (they're the only two browser i've got installed). i'm assuming other browsers will also vary.

    the css that i've used is in the html. here's the page with a demo of what i'm on about: http://www.pinkgoblin.com/~cumminjo/...nnerclick.html

    how can i make sure the box is at the top, bearing in mind i wish to keep the layout as i have it - that is content within a centred box, and the background image strip is also centred to keep in line with content?

    maybe this isn't even the best way to do this? but the banner does need to remain in the background though so as not to make the browser display it's scroll bars

    any ideas much appreciated. thanks.

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is your use of <p> tags around the link that is pushing the content down.

    The <p> tag has an inherent amount of vertical spacing as it meant for use in denoting new paragraphs/passages of text.

    Either remove the <p> tags surrounding the first link or create a custom p class with css that removes the top and bottom margin space.

    css:
    Code:
    p.nomargin {
    margin: 0;
    }
    html:
    Code:
    ...
    <div id="Content">
    
    <p class="nomargin"><a href="testbannerclick.html">...
    Last edited by Bill Posters; Mar 23, 2003 at 16:00.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh yeah, cheers bill - went for the 2nd option, the custom <p>, as i believe that the <p> is required there - for correctness and all that, i think. custom <p> works great. thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •