Topic: CSS Questions - Can a Box (Div) overlap an image in another box? Pages that link to <a href="https://ozoneasylum.com/backlink?for=24783" title="Pages that link to Topic: CSS Questions - Can a Box (Div) overlap an image in another box?" rel="nofollow" >Topic: CSS Questions - Can a Box (Div) overlap an image in another box?\

 
Author Thread
Shifter
Bipolar (III) Inmate

From: Mesquite, TX 75149
Insane since: Aug 2000

IP logged posted posted 01-24-2005 06:19 Edit Quote

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.

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 01-24-2005 06:22 Edit Quote

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 ::

Shifter
Bipolar (III) Inmate

From: Mesquite, TX 75149
Insane since: Aug 2000

IP logged posted posted 01-24-2005 06:24 Edit Quote

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

Shifter
Bipolar (III) Inmate

From: Mesquite, TX 75149
Insane since: Aug 2000

IP logged posted posted 01-24-2005 06:32 Edit Quote

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)

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 01-24-2005 07:20 Edit Quote

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)

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 01-24-2005 07:23 Edit Quote

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 ::

Shifter
Bipolar (III) Inmate

From: Mesquite, TX 75149
Insane since: Aug 2000

IP logged posted posted 01-24-2005 08:20 Edit Quote

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:

code:
#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)

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 01-24-2005 08:38 Edit Quote

Can I have the link?



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

Shifter
Bipolar (III) Inmate

From: Mesquite, TX 75149
Insane since: Aug 2000

IP logged posted posted 01-24-2005 08:44 Edit Quote

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:

code:
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;
}

Shifter
Bipolar (III) Inmate

From: Mesquite, TX 75149
Insane since: Aug 2000

IP logged posted posted 01-24-2005 08:47 Edit Quote

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)

Shifter
Bipolar (III) Inmate

From: Mesquite, TX 75149
Insane since: Aug 2000

IP logged posted posted 01-24-2005 09:00 Edit Quote

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 :\

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 01-24-2005 09:11 Edit Quote

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



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

Shifter
Bipolar (III) Inmate

From: Mesquite, TX 75149
Insane since: Aug 2000

IP logged posted posted 01-24-2005 09:29 Edit Quote

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.

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 01-24-2005 09:40 Edit Quote

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 ::

Shifter
Bipolar (III) Inmate

From: Mesquite, TX 75149
Insane since: Aug 2000

IP logged posted posted 01-24-2005 09:43 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu