www.webdeveloper.com
Results 1 to 5 of 5

Thread: A centered page with tower ad offcenter

  1. #1
    Join Date
    Oct 2008
    Posts
    2

    A centered page with tower ad offcenter

    I have a forums type site that is about 760px wide. I have it centered on the browser, and if the browser is resized smaller than then the 760, the content pushes to the left edge of the browser, and then the right hand side is pushed outside the boundries of the browser. This is what I want. But I want to add something else.

    Off to the right side of my centered page/content, I want to add a google adsense tower ad. I realize that some visitors won't be able to see the whole ad, assuming a smaller width setting on their browser. But for those that are a little wider, I want them to be able to see that tower ad.

    The important thing here is to not offcenter the content of the page. I don't want the tower ad to be part of the whole page, but rather just sitting off to one side. What would be even better is if the page is wide enough, display the ad - if it isn't wide enough (say - <810px) don't even try.

    Can this centering / offcentered ad thing be done with css easily? I must have looked at a thousand css example layouts, and none of them discuss this concept.

    I have attached an image showing what I am wanting.

    - Thanks.
    Attached Images Attached Images

  2. #2
    Join Date
    Sep 2008
    Location
    Old North Sacramento
    Posts
    80

    Thumbs up

    show me some code dude

  3. #3
    Join Date
    Oct 2008
    Posts
    2
    I can't "show you some code dude" because I don't know what the code IS, hence the purpose of my post. The reason I am posting and asking is because I don't know how to do what I am wanting to do, and I want to know if anyone DOES know how to to do it.

    Does anyone know how to create a layout as described above? Is it even possible?

  4. #4
    Join Date
    Sep 2008
    Location
    Old North Sacramento
    Posts
    80

    Thumbs up

    Code:
    <html>
    <head>
    <style type="text/css">
    #all {width:952px;margin:0 auto;}
    #all2 {width:700px;position:relative;left:210px;}
    #head {background-color:blue;width:950px;height:75px;border:1px solid black;}
    #right {;width:154px;height:400px;background-color:orange;border:1px solid black;border-bottom:none;float:right;}
    #content {float:left;background-color:red;width:500px;height:400px;border:1px solid black;border-right:none;border-bottom:none;}
    #foot {float:left;width:499px;height:30px;background-color:green;border:1px solid black;}
    </style>
    </head>
    <body>
    <div id="all">
    
    <div id="head">
    Header
    
    </div>
    
    <div id="all2">
    <div id="content">
    Content
    </div><div id="right">
    Ad
    </div>
    <div id="foot">Footer</div>
    </div>
    
    
    
    </div>
    </body>
    </html>
    Last edited by Natdizzle; 10-12-2008 at 03:13 AM.

  5. #5
    Join Date
    Sep 2008
    Location
    Old North Sacramento
    Posts
    80

    Thumbs up

    by the way,

    chill

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles