Div's overlapping other div's

[antpower26]

Hi,

I am trying to finish my first website, however have had problems with the navigation. It is slipping down into the next div/container.

Initially I used negative margins to make it visible, however on some machines Firefox 3.6 on Ubuntu. It wasn't visible at all.

If I use negative margins also it appears higher up in firefox/ie, but lower in Chrome, so inevitably on some browsers it won't be there at all.

The question I have is why is the content of one div appearing in the lower div? I've used z-index to show what is happening and enclosed is the HTML and the CSS.

Ive created a nav/div which I've colored red temporarily to show where it is appearing, the menu itself needs to be positioned properly once this problem is solved.

So ignore that they are all over the place. I want to solve this problem without resorting to negative margins, as it is not a compete solution.

Any help appreciated.

Thanks Ant

Cambrianvacation.css

Day2.html

[Andrea]

Do by chance have this up and can provide a link? We do have the html and the css, but that only gets us this: http://aandbwebdesign.com/KSforum/Day2.html - I'm playing with it to see what I can come up with.

[antpower26]

Ok the website has been launched, cambrianvacation.co.uk however it is not finished:) I've been making it responsive and have just finished the mobile version

and will launch again. However the problem is the same I used negative margins here, and a developer friend of mine said he couldn't see the nav/menu at all, on firefox 3.6, maybe on Ubuntu. It was ok on Windows7. Yet there seems to be that the content div is overlapping the header div, and I have no idea how to fix

it. When I create the menu, it needs margin-top:-#; to appear. However to make this work everywhere isn't the right solution. If you look at the css source code you'll see for .Home there are negative margins and so on. To stop the menu from dissaperaing beneath the content div.

Thanks for your help.

Ant:)

[Andrea]

Before seing your ULR, I've gotten this far: http://aandbwebdesig...orum/Day2a.html - I left comments in CSS and HTML to explain my changes, however after the content part, it got really messy, and I'm out of time for now. Hopefully, what I have so far helps, and I'll look again later.

 

Note that the background colors are just to show where you have what, that's not my idea of good-looking design:

 

[Andrea]

Also, don't upload large images and display them small - you're still wasting bandwith. Create your images the exact size you want them displayed.

[antpower26]

Thanks very much, I really appreciate you taking the time to have a look, and make comments.

[Andrea]

http://aandbwebdesign.com/KSforum/Day2b.html - this is a loose interpretation of your content. I got rid of lots of redundant classes. I did force the images (all but the last one so you can see what I'm talking about) to downsize, which is what I said was bad practice.

 

I do not know why http://cambrianvacation.co.uk/images/boardwalk.JPG does not come up inside the page as the link itself is good....

 

Let me know if you have any questions and keep in mind that my review of the contents area was done on the fly.