SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Php code for fixed banner at the far sidebar of the website

    hellow can someone help me with a code in which i will put my banner 160 by 600 fixed at the far sidebar of the website, example take a look on this site banner at the far side bar they are fixed as you scroll down the site. here is the link http://www.inauzwa.com

    any help i will appreciate

    regards

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Css controls page presentation not php

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

    You basically need to position the banner using position:fixed but you have to set it all up correctly to work.

    Here is the bare -bones html and css to make it work.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type"text/css">
    
    #outer{
    	width:940px;
    	margin:auto;
    	min-height:600px;
    	border:1px solid #000;	
    	position:relative;
    	z-index:2;
    }
    #ad-container{
    	width:940px;
    	margin:auto;
    	position:fixed;
    	top:20px;
    	left:0;
    	right:0;	
    }
    .ad-left{
    	float:left;
    	width:160px;
    	height:600px;
    	background:red;
    	margin-left:-170px;
    }
    .ad-right{
    	float:right;
    	width:160px;
    	height:600px;
    	background:red;
    	margin-right:-170px;
    }
    
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<h1>Content comes here</h1>
    		<p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet l</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    </div>
    <div id="ad-container">
    		<div class="ad-left">Left advert goes here</div>
    		<div class="ad-right">Right advert goes here</div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You basically need to position the banner using position:fixed but you have to set it all up correctly to work.

    Here is the bare -bones html and css to make it work.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type"text/css">
    
    #outer{
    	width:940px;
    	margin:auto;
    	min-height:600px;
    	border:1px solid #000;	
    	position:relative;
    	z-index:2;
    }
    #ad-container{
    	width:940px;
    	margin:auto;
    	position:fixed;
    	top:20px;
    	left:0;
    	right:0;	
    }
    .ad-left{
    	float:left;
    	width:160px;
    	height:600px;
    	background:red;
    	margin-left:-170px;
    }
    .ad-right{
    	float:right;
    	width:160px;
    	height:600px;
    	background:red;
    	margin-right:-170px;
    }
    
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<h1>Content comes here</h1>
    		<p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet l</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    		<p>scroll</p>
    </div>
    <div id="ad-container">
    		<div class="ad-left">Left advert goes here</div>
    		<div class="ad-right">Right advert goes here</div>
    </div>
    </body>
    </html>
    Thank you very much Paul appreciations..

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Remember that the ad-container needs to be outside the main pages html (#outer in my example) so that it does not sit on top of the page and obscure links. #outer has a higher z-index and position:relative to keep the content on top and clickable.


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
  •