Jump to content
Stef's Coding Community
Sign in to follow this  
antpower26

Div's overlapping other div's

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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:

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...