Layering two div layers on top of one another WITHIN a centered 'container' div?

Hi all, I’m a CSS newbie, esp when it comes to using CSS w/div layers, so please bear with me.

Basically, I want the content of my page to always remain centered, so I created a ‘Container’ that is 500px wide and always remains at the center of the page when you change the size of your browser window, etc.

Then, within this Container, I want to layer two images on top of one another (the topmost of the 2 layers will be a set of linked buttons).

But I’m having some trouble with the absolute/relative aspects of layering these two. If I do relative, the 2nd layer just ends up showing directly beneath the 1st instead of on top of it. If I do absolute, the two layers end up positioned accordingly but OUTSIDE of the Container I created that is intended to keep everything centered. So in short, the two layers no longer remain centered.

(I realize I could just keep it all one image and use an image map to link the buttons, but I’m using a couple different javascript/jquery functions with the links so that won’t work.)

Here is my CSS:

body {
	margin:0px 0px; padding:0px;
	text-align:center;
	}
	
#Container {
	position: relative;
	width:500px;
	margin:0px auto;
	text-align:left;
	z-index: 1;
	}
	
DIV#logolayer {
    position         : relative ;
    top              : 10px ;
    left            : 0px ;
    background-color : #FFFFFF ;
    z-index: 2;
    }

DIV#buttonslayer {
    position         : relative ;
    top              : 10px ;
    left            : 0px ;
    background-color : #FFFFFF ;
    z-index: 3;
    }

:focus { -moz-outline-style: none; }

Please help me correct this code so it’ll work! And please be specific as possible and maybe even modify the code itself with your corrections. Thank you in advance!

Hi laila1212. Welcome to SitePoint. :slight_smile:

You need to post your HTML too for us to help with that. (CSS without HTML is like paint without a wall.)

From a quick glance, you seem to have covered the bases, so we need the HTML to see what’s wrong. :slight_smile:

Thanks for your reply Ralph! Here’s my HTML (fyi, the places where XXXX appears are just where I have personal information, like my full name, as this is a portfolio website):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXXX XXXX</title>


<link href= "lovestylesheet.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>

<script type="text/javascript">
Shadowbox.init({
    handleOversize: "drag",
    modal: true
});
</script>

<!-- Load jQuery -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery","1.3.2");
</script>


</head>
<body>

<!-- jQuery Rollover -->
<script type="text/javascript">
jQuery(document).ready(function() {

$("img.rollover").hover(
function()
{
this.src = this.src.replace("_off","_on");
},
function()
{
this.src = this.src.replace("_on","_off");
}
);

});
</script>




<div id="container">


<p><br><p><br><p><br>

 <div class="myStyles"
       id="logolayer">
<img src="XXXXlogo.jpg">
 </div>

<div class="myStyles" id="buttonslayer">

<a href="about/index.html"  rel="shadowbox; width=755; height=385">
<img class="rollover" src="buttons/btn_about_off.png" alt="About" /></a>
&nbsp; &nbsp;

<a href="http://XXXXXXXX.tumblr.com" rel="shadowbox; width=855; height=535">
<img class="rollover" src="buttons/btn_portfolio_off.png" alt="Portfolio" /></a>
&nbsp; &nbsp;

<a href="http://XXXXinthesky.tumblr.com" rel="shadowbox; width=800; height=573">
<img class="rollover" src="buttons/btn_blog_off.png" alt="Blog" /></a>
&nbsp; &nbsp; &nbsp;

<a href="contact/index.html" rel="shadowbox; width=755; height=385">
<img class="rollover" src="buttons/btn_contact_off.png" alt="Contact" /></a>

</div>

</div>


<p><br>






</div>

<script src="domroll.js">
</script>


</body></html>

OK, firstly CSS is case sensitive, so #Container {} won’t target id=“container”. It needs to be #container {}.

Anyhow, I don’t think you need all of this positioning, as you probably just need a background image on your navigation. But the CSS and HTML don’t really show much without the images. Could you upload an image to illustrate what look you are after?

Thanks Ralph. Actually, I thought the same about the Countainer vs container issue, but when I decapitalize the C (or capitalize the little ‘c’ in the HTML) it actually messes up the centering of the page. It centers, but off to the right a little bit. I have no idea why. Would this have something to do with a different error in my CSS?

And I’ve uploaded a partial version of my website temporarily, so you can take a look! Hopefully this will give you a better idea of what I’m trying to do. Basically, I want the row of black buttons to go on TOP of where they currently are in the main image (I will then be editing the main image so it no longer has those buttons in it).

http://people.oregonstate.edu/~sawirn/test/

I’m not sure what you mean creating a background image, because if you mean turning the main image (with the girl, ‘Welcome’, etc.) into a background, I don’t see how that would keep it centered on the page at all times.

OK, great, that makes things much easier.

Now, what you need to do here is this:

  • firstly, that image should only contain the silhouette and the blue lines. The 'Welcome" text should be actual text (even if it ends up being “replaced” by the Welcome image: the text will remain there nonetheless).
  • create a continer div and place the remining image as a background on that div. E.g.

div {background: url(girl-lines.gif"}

Decorations like this should be background images, served via CSS, not in the HTML itself.

  • ideally, the links should be marked up with an unordered list (<ul>) rather than just <a>s. We can show you how to do this.

  • so in the HTML, you’d have your containing div with decorative bg image, then inside that an <h1>Welcome</h1>, then an <ul> with the links.

We can help you with this step by step.

PS–Yes, any other problems with “container” are caused by other CSS issues. Don’t worry, they can easily be fixed.