Adverts to the side of page and no scrollbar?

HTML & CSS
1

Hello.

I’m trying to build a section on my website which allows two fat clickable skyscrapers (the red things) to fit on the side of my page, and have achieved it like so.

Example of my webpage with the code

Just one problem though, the CSS works well but inside my wrapper I have the word click me! but in Firefox it won’t let me click it. I know it’s a z-index issue but can’t seem to work it out.

Anyone please help?

Thanks

2

Rayzor. That really does help. I was in the process of z-indexing all my elements throughout my website as I thought it could not be done. That’s brilliant - thanks

3

Thanks, that kinda worked - but…

That was an example page with a simple <p></p> tag, within that container i’ll have could have several other linked things here within this area like menus and other links like so…

Further Example of my webpage with the code

Is there any way I can simply just somehow put a z-index it on everything there which makes everything in that container produce links in Firefox, or do I have to z-index every element within that container (which will be a lot of things)?

Thanks

4

Hi,
There are a couple of problems with your markup and css.

You are trying to nest the AP <div id=“adholder”> inside your #wrapper but it needs to sit outside of it.

You had a z-index set on your #wrapper but you did not have any positioning applied to it. An element must be positioned as absolute, fixed, or relative in order to take on a z-value.

The other thing is that a child can never climb above it’s parent’s stacking level. If the parent is z-index:1; and you set z-index:1000; on the child it is only on top of the stack in the parent div but as far as other elements in the page are concerned it is only z-index:1 just like it’s parent.

I don’t see any need to float your ad divs either, I set RP on the <div id=“adinner”> so it will become the containing block for the now AP’d ad divs.

I changed some widths around so I could see what was going on but I made comments of the original widths.

You can have the <div id=“adholder”> last in the source order but you will need to set a higher z-index on the #wrapper as I did below. That keeps it stacked on top and fixes your original problem. Now everything inside the #wrapper will be safe.

Normally we would not have to set a z-index on the <div id=“adholder”> but due to the IE6/7 z-index bug it needs to be set lower manually.

Hope that helps :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test z-index</title>

<style type="text/css">
body {
    font-size:100&#37;;
    margin:0;
    padding:0;
    background:#000;
}
#wrapper {
    position:relative;/*needed for stacking context*/
    z-index:2;/*set it higher than #adholder*/ 
    margin:0 auto; 
    width:870px;/*was 980px (set at 870px for testing BG colors)*/ 
    min-height:600px;/*do not set a fixed height*/
    padding:12px; 
    background:#EEE; 
    overflow:hidden;
}

/* All elements of Advert Holder */
#adholder {
    overflow:hidden;
    position:absolute;/*remove from page flow and set z-level*/
    z-index:1;
    width:100%;
    left:0;
    top:12px;
    background:yellow;/*test BG color*/ 
}
#adinner {
    position:relative;/*containing block for AP ad divs*/
    width:904px;/*was 1004px*/ 
    height:600px;
    margin:auto;
    background:lime;/*test BG color*/ 
}
.adright,
.adleft {
    position:absolute;
    width:160px;
    height:600px;
    top:0;
}
.adright {right:-170px;}
.adleft {left:-170px;}

a img {border:none;}
</style>

</head>
<body>

<div id="wrapper">   
    <p><a href="click.php">Click Me</a></p>
    <ul>
        <li><a href="link.php">Link one</a></li>
        <li><a href="link.php">Link two</a></li>
        <li><a href="link.php">Link three</a></li>
        <li><a href="link.php">Link four</a></li>
    </ul>
    <h1><a href="link.php">Headline</a></h1>
    <p><a href="link.php"><img src="fat-sky.jpg" height="100" width="100" alt="Click Here to View our Advert" /></a></p>
    <p>And could have several other linked things here within this area...</p>
</div>    
<!-- end wrapper -->    
 
<div id="adholder">
    <div id="adinner">
        <div class="adright">
        <a href="click.php"><img src="fat-sky.jpg" height="600" width="160" alt="Click Here to View our Advert" /></a>
        </div>
        <div class="adleft">
        <a href="click2.php"><img src="fat-sky.jpg" height="600" width="160" alt="Click Here to View our Advert" /></a>
        </div>
    </div>
</div>
<!-- end advert --> 

</body>
</html>
5

I was in the process of z-indexing all my elements throughout my website as I thought it could not be done.

Glad I caught you before you went to all that trouble. :slight_smile:

This was actually one of the CSS Quizzes a while back, it was Quiz #24.

There is another way to do this that will save you from having to use that inner ad div.

If you look at the 2nd code example of The Solution you will find Erik J.'s method.

The first code example is Paul’s, it is similar to what you are doing now but it has the adwrap first in the page source so it is able to get around the need for z-index on the wrapper. Elements lower in the page source naturally have a higher stacking order when no z-values are set.

Just thought you might like to look through these alternative methods. :wink:

6

On the paragraph, put: position:relative; z-index:3;.