4 replies [Last post]
mpr
mpr's picture
Offline
newbie
Toronto
Last seen: 7 years 37 weeks ago
Toronto
Timezone: GMT-6
Joined: 2013-02-01
Posts: 2
Points: 3

I have a web page that has an .asp include for the navigation header. On the sides and the top of these, I need a click-able ad. I can't seem to figure out how to make all this work together. I don't even know if it's possible.

Here's a visual of what I'm trying to achieve:

divIssue.jpg

Here's what I have for the div that holds the ad in the background:

#ad {
    position:fixed;
    display: block; 
    margin-left:auto;
    margin-right:auto;
    margin-top:-200px;
    width: 800px; 
    height: 450px;
    z-index-1;
    cursor:pointer;
    background:url(myImage.png) no-repeat scroll center top transparent; 
}

The margin-top:-200px is so the ad can go to the top of the page.
The result of this is that only the bottom portion of the ad (just below the header) works in IE, and nothing is click-able in Firefox.

I created an example of this in jsFiddle, but it's not accurate since I can't create the include. I guess this can be used for a better visual: http://jsfiddle.net/masada/bdMB2

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 39 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Hi, mpr, welcome to the forum

Looking at your fiddle stuff, it looks like this should be your basic code:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <style type="text/css">
 
#wrapper {
    background-color:#FF6699;
    margin: 0 5%;
    overflow: hidden;
    }
 
#ad {
    text-align: center
    }
 
#ad-side-a {
    float: left;
    width: 150px;
}
 
#ad-side-b {
    float: right;
    width: 150px;
}
 
#page {
    overflow: hidden;
    }
 
#header {
    background-color:#b8c85e;
    padding: 1px 1.25em;
    }
 
#mainContent {
    background-color:#66CCFF;
    padding: 1px 1.25em;
    }
 
    </style>
  </head>
  <body>
    <div id="wrapper">    
      <div id="ad">
	<p>aaaaaaaaaaaa</p>
      </div>
 
      <div id="ad-side-a">
	<p>sidebar ad</p>
      </div>
 
      <div id="ad-side-b">
	<p>sidebar ad</p>
      </div>
 
      <div id="page">
	<div id="header">
	  <p>header</p>
	</div>
 
	<div id="mainContent">
	  <p>how 'bout them tummy gummers</p>
	</div>
      </div> <!-- end page -->
    </div> <!-- end wrapper -->
  </body>
</html>	 

Use your include statement to import your snippets into whichever containers they belong.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 39 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Addendum

The padding on the heading and main containers is to uncollapse margins vertically and provide space around the contents horizontally.

Whatever do you mean by background div? A div element is a non-semantic, general container. It is by nature meant to hold content, not background.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mpr
mpr's picture
Offline
newbie
Toronto
Last seen: 7 years 37 weeks ago
Toronto
Timezone: GMT-6
Joined: 2013-02-01
Posts: 2
Points: 3

gary.turner wrote: Whatever

gary.turner wrote:

Whatever do you mean by background div? A div element is a non-semantic, general container. It is by nature meant to hold content, not background.

If the div has a z-index of -1, it becomes a "background div." That's all I meant by that. It needed to be in the background in order for the main content to be interactive, but still click-able where the ads were.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 39 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Two points

A positioned element with a z-index of -[integer], most negative first, is not a background element; it is simply the first stacking level above the background. The kicker is that negative z-indices are not uniformly supported.

Did you try the example I posted? If so, what about it would you want to be different? If not, why not?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.