• 0

A really annoying <div> overlap problem.

Asked by GüntherJung,

 Share

Question

Community Regular

GüntherJung

Posted
Posted

Hello everyone. I am a bit new to web programing and I have a problem. It's hard to describe so I will upload the HTML page. The problem is that some stuff a behind other stuff and these stuff must not be there. I have been experimenting for hours and I didn't find a solution. If you can make these red divisions to be NOT in the back I will be really happy :) . I have tried z-index and it don't works. Even without z-index it must be OK but it isn't.

PS: These 2 red divisions are not the only one that mustn't be on the back. You'll see what i mean :). And the site uses CSS3. And sorry for the validation bugs. Ou, for validation bugs, if you know what "end tag for "html" which is not finished[XHTML 1.1]" mean tell me please :). And sorry for not separating HTML and CSS. I'll do it later :).

site with bug.zip

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Grand Master

primexx

Posted
Posted

of course you'll run into problems if you use an <img> as a background. that's what 'background' is for. the entire structure of your file is completely presentation-oriented, trying to debug that would be a pain in the ass.

the html validation error is because you don't have a <head>

you should learn a bit more first before trying to re-write the page. this is a great resource: http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/

Link to comment
Share on other sites
  • 0
Community Regular

GüntherJung

Posted
  • Author
Posted

I haven't used an image as a background. The background is in the body tag in the style attribute. The second base image is in a separate division az a background image in the style attribute too. I have separated the base image from the other components, because I want just the base image(not the background image) to have transparency, not everything. And thank you for the answer primexx :).

Link to comment
Share on other sites
  • 0
Grand Master

primexx

Posted
Posted

I haven't used an image as a background. The background is in the body tag in the style attribute. The second base image is in a separate division az a background image in the style attribute too. I have separated the base image from the other components, because I want just the base image(not the background image) to have transparency, not everything. And thank you for the answer primexx :).

but you're using an image (the big one with the sections) for the purpose that a background (or even borders, with css3) better serves. html is terrible for layering stuff on top of each other (z-index only works for positioned elements). you'd want to do that some other way.

Link to comment
Share on other sites
  • 0
Community Regular

GüntherJung

Posted
  • Author
Posted

I will explain the structure. I first use the body for the background image. Then i use a division for the base image. Then I make another division for the navigation. The navigation uses divisions+anchors for the menus and paragraphs+anchors for the register and log in/log out. Then go out of the navigation division and make a divison for the main content. The main content is contructed from four divisons+and image in the middle that will be used as a link. This is the structure. I will soon go to school and I will go back in about 6-7 hours maybe.

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing