SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    banner positioning question

    I am attempting to position a banner ad in a header in the upper right position. Floating right is not having the expected effect. You can see the ad here: cafepharma.com/drupe (the leaderboard ad in the header).

    The original position of the navbar (along the top of the header) seems to be causing the problem. However, I can't find anything that is causing the banner to be pushed down.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your banner is at the top of#header and as far right as it can be.

    If you are talking about the small gap above the header then that's where your menu lives.

    You have moved the menu below the header using relative positioning and a relatively positioned element is not actually moved at all! It only appears to be somewhere else but as far as all elements on the page are concerned the elements is where it originally was and they will react accordingly. This is what relative positioning means

    When you move an element with relative positioning it is only moved visually but not physically. The space it originally occupied is always preserved.

    If you want to remove it from the flow then use absolute positioning and apply some padding to the bottom of the header to protect it.

    Code:
    #menu
    {
      color:#fff;
      font-size:1.2em;
      font-weight:normal;
      height:20px;
      position: absolute;
      top: 114px;
      line-height:1.3em;
      letter-spacing:1px;
      margin: 0;
      padding:0;
      white-space:nowrap;
    
    }
    #header{padding-bottom:20px;}

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That helps a lot. 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
  •