• 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.zipFetching info...

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/

  • 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 :).

  • 0
Grand Master

primexx

Posted
Posted
  On 16/01/2012 at 08:56, emilxp said:

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.

  • 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.

This topic is now closed to further replies.
 Share
Go to question listing

  • Posts

    • Microsoft launches Copilot Vision on Windows, allowing AI to see what is on your screen

      By leonsk29 · Posted

      Switch to another OS if you're into tinfoil hat mentality, or just uninstall the app. Oh, wait, even after uninstalling it, can Microsoft still be looking at everything? We'll never know, so, yeah, that's that. If you use Windows, you need to live with those options.
    • Politically funny images of the World

      By +Raze · Posted

    • Minecraft Chase the Skies update and Vibrant Visuals graphics overhaul lands next week

      By LoneWolfSL · Posted

      Minecraft Chase the Skies update and Vibrant Visuals graphics overhaul lands next week by Pulasthi Ariyasinghe The second major game update of the year for Minecraft is almost here. Mojang today announced that its next Game Drop, Chase the Skies, is landing on June 17. Alongside it, the highly anticipated graphics overhaul, dubbed Vibrant Visuals, will be available too, making the day a rather big occasion for Minecraft fans. The Chase the Skies update has a large number of gameplay features and content, but one of the biggest is the expansion of the Ghast. Now, players will be able to find Happy Ghasts as a tameable mob, letting up to five players ride them on journeys across the skies. To get one, players will have to find small, dehydrated Ghasts near fossil structures in the Nether, then bring it to the overworld and feed it plenty of water. It is also possible to craft dried Ghasts from Nether materials. Other features of this update include a handy player locator bar, better leads functionality, craftable saddles, a new music disc, and more. As for the Vibrant Visuals upgrade, Mojang is touting a visual refresh that lets players witness how lights and shadows affect the Minecraft world. "Fly high with your happy ghast to watch the sunrise reflect on the rippling ocean, make art with shifting shadows, descend into dark depths, or simply sit back and enjoy the vivid beauty of each biome," says the studio. "With updated in-game visuals you’ll see how light and shadow transform the Overworld – water reflects, forests become shaded, fog drifts, and waterfalls glimmer in the light." The currently supported devices for Vibrant Visuals include Xbox Series X|S, Xbox One, PlayStation 4, PlayStation 5, PC, as well as Android (Android: Adreno 640, Mali-G68, Mali-G77, or Xclipse 530 or higher) and iOS (A12 or M1 or higher.)   Unfortunately, the Vibrant Visuals upgrade will only be available on the Bedrock Edition of Minecraft, at least for now. Mojang has said that it plans to bring the visual overhaul to the Java Edition of Minecraft at a later date, but no information or release window has been announced just yet.
    • Samsung Galaxy Watch8 series to adopt the squircle design across all models

      By naap51stang · Posted

      Once people get use to the square-ish case, they'll probably switch the display to square as well.
    • Microsoft launches Copilot Vision on Windows, allowing AI to see what is on your screen

      By Pishaw · Posted

      Why would you think it's not enabled all the time? Because they said so?

  • Recent Achievements

    • One Month Later
      POR2GAL4EVER earned a badge
      One Month Later
    • One Year In
      Orpheus13 earned a badge
      One Year In
    • One Month Later
      Orpheus13 earned a badge
      One Month Later
    • Week One Done
      Orpheus13 earned a badge
      Week One Done
    • Week One Done
      serfegyed earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      560
    2. 2
      ATLien_0
      255
    3. 3
      +Edouard
      163
    4. 4
      +FloatingFatMan
      158
    5. 5
      Michael Scrip
      110
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!