SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict AshleyH's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Off centre banner

    Hi All,

    I'm struggling to get my head around this. I would like to have a <div id="wrapper"></div> that sits nicely in the middle of the page...easy right...right. However, I would also like to place a banner to the right hand side just like this site: New Media, Marketing, Advertising & Interactive News & Jobs | NMA.

    Any ideas how I go about this?

    Many thanks!

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    there are quite a few ways actually. which one you chose would probably depend on the semantics of the banner. for the sake of argument, lets say it's advertorial content.

    i would give your #wrap position:relative; and then the banner position:absolute and left: 100% ( if you ant some more space use margin-left: x-amount or since #wrap is probably a specific amount you can use left: (#wrap width amount)+ (your desired amount);

    after that done use top: ( whatever amount) to adjust it's vertical position.

    hope that helps..

  3. #3
    SitePoint Addict AshleyH's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will give it a go! - Thanks for your response!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It's not really clear what you mean by "banner". Which element are you referring to?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's not really clear what you mean by "banner". Which element are you referring to?
    It's the right banner that hangs off the side of the page I believe.

    We actually had a quiz on this where we eliminated the hanging banner from causing a horizontal scrollbar.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
    }
    h1, p {
        margin:0 0 1em
    }
    #page {
        width:760px;
        margin: auto;
        text-align:left;
        background:red;
        position:relative;
        z-index:2;
    }
    #adholder {
        width: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        z-index:1;
    }
    #adinner {
        width:760px;
        margin:auto;
    }
    .adright {
        width:160px;
        position: relative;
        margin:0;
        height:600px;
        overflow: hidden;
        background:#52b502;/* for testing */
        z-index:99;
        display:inline;
        float:right;
        left:170px;
    }
    </style>
    </head>
    <body>
    <div id="adholder">
        <div id="adinner">
            <div class="adright">Advert goes here</div>
        </div>
    </div>
    <div id="page">
        <h1><a href="#">Centred page content goes here</a></h1>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Addict AshleyH's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your responses ralph.m by 'banner' - I mean the side banner hanging off the page.

    Paul - that worked perfectly! Thanks very much!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by AshleyH View Post
    Thanks for your responses ralph.m by 'banner' - I mean the side banner hanging off the page.
    Yes, silly me. Didn't see that. My browser window must have been narrowed. Been messing with it a lot today. Glad the others sorted it for you.


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
  •