css help required

dj Mag · 03-16-2008

Hello,

I am trying to construct a page which has 2 sections,
one below the other, but with an image overlapping
the 2 sections.

I have tried a couple of different ways to do this,
but so far to no avail.

I have trouble with the transparency not working;I get
the content div failing to show its background colour.

Can anyone give me an outline of the direction to go?

Jacorre · 03-16-2008

Do you have an example you can show us?

dj Mag · 03-17-2008

yes here it is ........................ c the attachment

Jolt · 03-17-2008

how about a link to code, not an image?

agentxi · 03-18-2008

well I think DJ's problem is that he doesn't know where to start.

but I must admit your attempted code, or at least the actual jpg of the design would help... my reasoning, is cuz I would like to know if i can add his "image" to the background of the wrapper, or will that wrapper have a background image already. ...stuff like that. so the finished design posted up would be nice to look at.

Jolt · 03-19-2008

What he want's done could be accomplished fairly easily with position properties. But seeing how it's specifically desired would help in creating proper code. For instance, what do the top and bottom divs contain? is there content in this overlapping image or is it just an image?

dj Mag · 03-19-2008

well hope its a better view... In this attachment u c the right bar or menu whatever u call the one which is over the banner the text includes "welcome to our church".. i wanna make something like that i do in photoshop.. I've done lots of templates in photoshop but i want to make them with css.. i've seen so many site in css and they looks so good and proper positions, overlaping blah blah..

well hope u understand now what i want now i need ur further assistance..

Jolt · 03-20-2008

My take on that image is that it's not two divs with an overlapping div. It's simply a header image, a footer image and sidebar class and then a main content div. The header and footer images make it appear s though the content is split differently, but in reality it's not.

See the test layout I've attached here. It was done quick and dirty but it shows how. CSS and XHTML included in zip. Setting it up this way requires no positioning ensuring better cross browser compatibility.

Jacorre · 03-20-2008

The calendar area you have circled can be positioned there using absolute positioning. Absolutely positioning a div will make it "float" on top of the page allowing for anything else to take up the space it leaves behind. So the content area would need some right padding to push it over to the left so it wouldn't get lost under the calendar area.

The wrapper div would have position: relative defined and the calendar div would have position: absolute defined and you will need to define top and right to position it to your liking.

The other thing to point out is that the screenshot shows the calendar div floating over the footer area. If there was more content to the page, making the page grow vertically, then the calendar div would stay positioned where it was and it wouldn't still float over the footer because the page height grew.

If you need a tutorial on absolute positioning I have one available here.

cancer10 · 03-22-2008

I know there is a z-index thingy in css, which helps you to overlap an object over other