Topic: CSS Questions - Can a Box (Div) overlap an image in another box?

Okay, I'm just now trying to teach myself CSS...so please bear with me. Sorry if this has been covered before.

I have made a layout..well part of one in PS7. The main image has two areas in it where I want content to go, thus I was Divs to go there...

What I dont know is, once I place this image on my site..my divs go below that image...I.e. the spacing defined in the CSS goes from the image not from the top of the page. How can I make it ignore the image and go over them.

Gee, I hope this made sense.

I COULD use the image as the pages background..then the divs would show over it..however..I need to use a diff img (tiled) as the bkg so this won't work.

I hope this makes sense.

Check out my page (click on WWW in my sig) and look at my header, it overlaps my content box... Is that kinda what you are going for? If so, you are talking about Z index...



:: WWW || Contact || Deviations || ThoughtPrism ::

Sorta, in a way. Not using it that way, but I do believe that's what it is.

Basically the image has a "text area" and I want the div to go over the image..not below the image.

Im gonna look at Z-index and see what I can find. Thanks for the idea :P

I'm pretty confused. I know it's easy stuff, I just havn't figured this stuff out yet.

Here is the short, easy to understand version of what I'm trying to do.

First: Place an Image.
Second: Have Div Box1es for Nav and Content that go OVER the first image.


EDIT://

Now that I think about it, I believe the way I would have to do it would be to instead of using an Image tage, use another div, with the image as the bkg, then the others divs should go over it.

I think that should work..I hope =D

(Edited by Shifter on 01-24-2005 06:34)

Hmm... If I understand correctly:

img.first {
z-index:0;
...whatever else...
}

Then the image: <img src="image.jpg" class="first" />

Then the div's for navagaion/content:

.content {
z-index: 1;
...whatever else...
}

.nav {
z-index: 2;
...whatever else...
}

Then for the img.first, set the positioning and whatever else you want... I think I got that correct, if not, it should be a start for you on finding what you need... With my site, I set the z-index for my header as 5, so it is above everything else, so all you need to do is do the opposite, have it set at 0 so it is the absolute bottom...



:: WWW || Contact || Deviations || ThoughtPrism ::

(Edited by Ensellitis on 01-24-2005 07:21)

And of course, you can always use

.image_div {
background: url('image.jpg');
z-index: 0;
}

That way it is just another div but with an image background instead of an actual image... Good luck =)



:: WWW || Contact || Deviations || ThoughtPrism ::

Yah I got it working, but I'm having one hell of a time trying to get everything lined up. FIrefox it's perfect...but in IE it's always farked up. I hear I should just get it worked in Firefox..then go from there...

IE is farked.

EDIT://

Okay I went and changed some stuff, the positioning seems to be working in IE and Firefox, but I can't get the Z-index to work.

My img div is first..I set it's z-index to 0 but the other divs are still showing below it.

Can't figure out why...

Here is a lil example:

#content {

 	float: left;

	margin: 0px 0px 0px 0px;

	background: transparent;

	overflow: auto;

  	height: 430px;

	width: 523px; 

    border:1px dashed green;

	}

	

#nav {

    float: left;

	margin: 158px 0px 0px 132px;

	background: transparent;

	height: 422px;

	width: 148px; 

	}



#header {

    position: absolute;

	background-image:url('bkg.jpg');

    background-repeat:no-repeat;

	left:50%;

    top:50%;

    width:1007px;

    height:631px;

    margin-left:-503px; /* width/2 */

    margin-top:-315px; /* height/2 */

    border:1px dashed green;

    background-color:#eee;

The header is the one that I want on bottom. I tried adding in z-index: 0 to it..and even put the other 2 divs at z-index: 1 or 2 or even 5 but it wouldnt work.. Setting header to z-index: -1 however made it vanish..so I know it was partially working..just can't get the other divs above for some reason.

(Edited by Shifter on 01-24-2005 08:31)

Can I have the link?



:: WWW || Contact || Deviations || ThoughtPrism ::

Yeah, keep in mind this is all just int he works, and it's my first..and the layout isn't finished..just trying to learn more before I go ahead =D

Lemme upload what I have right now, and here it is:

http://www.rememberingelvis.com/test/

Here is my css file:

body {

	margin: 0px 0px 0px 0px;

	padding: 0px 0px 0px 0px;

	font-family: verdana, arial, helvetica, sans-serif;

	color: white;

	background-color: #516F6D;

    background-image:url('bg.jpg');

	}

a {

	text-decoration: none;

	font-weight: bold;

	color:  #ccc;

	outline: none;

	}

a:visited {

	color:  #ccc;

	}

a:active {

	color:  #ccc;

	}

a:hover {

	color: #ccc;

	text-decoration: underline;

	}





h1 {

	font-size: 24px;

	line-height: 44px;

	font-weight: bold;

	margin-top: 0;

	margin-bottom: 0;

	}

h2 {

	font-size: 18px;

	line-height: 40px;

	font-weight: bold;

	margin-top: 0;

	margin-bottom: 0;

	}

h3 {

	font-size: 16px;

	line-height: 22px;

	font-weight: bold;

	margin-top: 0;

	margin-bottom: 0;

	}

h4 {

	font-size: 14px;

	line-height: 26px;

	font-weight: bold;

	margin-top: 0;

	margin-bottom: 0;

	}

h5 {

	font-size: 12px;

	line-height: 22px;

	font-weight: bold;

	margin-top: 0;

	margin-bottom: 0;

	}

h6 {

	font-size: 10px;

	line-height: 18px;

	font-weight: bold;

	margin-top: 0;

	margin-bottom: 0;

	}

img {

	border: 0;

	}

#content {

    float: left;

	margin: 0px 0px 0px 0px;

	background: transparent;

	overflow: auto;

  	height: 430px;

	width: 523px; 

    border:1px dashed green;

    }

	

#nav {

    float: left;

	margin: 0px 0px 0px 0px;

	background: transparent;

	height: 422px;

	width: 148px; 

    border:1px dashed green;

	}



#header {

    position: absolute;

	background-image:url('bkg.jpg');

    background-repeat:no-repeat;

	left:50%;

    top:50%;

    width:1007px;

    height:631px;

    margin-left:-503px; /* width/2 */

    margin-top:-315px; /* height/2 */

    border:1px dashed green;

    background-color:#eee;

    z-index: 0;

	}

		

pre {

	font-size: 12px;

	line-height: 18px;

	}

Hah. Omg. Duh. I think I just figured it out..or partially.

I noticed it when reading my own post.. I don't have my other 2 divs set with a position...thus it ignores z-index.

EDIT:

Yah, it is working right now..course in IE6 the position is still a little off...when I move the right div..the left one moves over a little and shouldnt..guess I will get it workign in Firefox then go from there.

(Edited by Shifter on 01-24-2005 08:52)

Seems to be working decent now, except in IE6 the 2 secondary Divs seem to be misposition about 10 pixels to the right.

I have 0 padding on anything so not sure what's causing this or how to fix it :\

You got me, the positioning in my site does the same thing in IE



:: WWW || Contact || Deviations || ThoughtPrism ::

Well I got it working now pretty good =D

I'm so glad.

Now if I can just figure out why the mousescrollwheel won't work on my css page for the lil div with the scrollbar..yet works in IE.

Not that it's a huge deal..but I hate having to actually click a scroll bar =D

Nice job on your page btw.

I was watching awhile back as you were workign on it and had it under the review area.

They are overflow div's right? They never wheelscroll in Firefox for some reason... =\

Thanks for the page comment... And I have to say, yours looks awsome, I love how you did that, gives me ideas on future layouts.



:: WWW || Contact || Deviations || ThoughtPrism ::

Thanks for the compliment. =D

And thanks for the help, you're actually how I solved my problem..even though I found it on my own..it woulda taken forever had we not been messing with it.

And actually, you told me how to do the z-index...which was the right solution =D

Shame about the overflow divs, and shame that colored scrollies dont work in anything but IE too...but ah well.