Jump to content
Sign in to follow this  
username132

I Can't Fix It :cry:

Recommended Posts

I've put together my first website for my university college and I'm having trouble with the CSS. It doesn't help that every browser shows it differently, but working from Mozilla, I'd like the sub navigation bar (secondary_nav) to be located below the image of the crest and to have a red strip that extends up behind the image, as in the case of the primary_nav.Link to stylesheet.Incidentilly, I was also wondering why Opera shows the red strip of the primary_nav, on top of the image, despite the image having a z-index of 1?I never knew web design could be so fustrating! :)

Share this post


Link to post
Share on other sites

Hi. :)You can use padding to put the menu below the image. As for the red strip, set a width to the div. Like this:

#secondary_nav {float: left;background: #bb1042;padding: 60px 0; /* Sets the top and bottom to 60px, with no left or right padding. */width: 40px;}

It's not quite perfectly the way you want it but it's a progress. =)

Share this post


Link to post
Share on other sites

That's great. I gave it some margin to the left and altered the padding and it's pretty much what I wanted.I think I only have one problem left now which is that I'd like the footer to span the entire bottom of the screen, but since the submenus are FLOATED to the left, the submenus and the footer crash into each other on small pages (e.g. services and activities pages)!

Hi. :)You can use padding to put the menu below the image. As for the red strip, set a width to the div. Like this:
#secondary_nav {float: left;background: #bb1042;padding: 60px 0; /* Sets the top and bottom to 60px, with no left or right padding. */width: 40px;}

It's not quite perfectly the way you want it but it's a progress. =)

Share this post


Link to post
Share on other sites
I think I only have one problem left now which is that I'd like the footer to span the entire bottom of the screen, but since the submenus are FLOATED to the left, the submenus and the footer crash into each other on small pages (e.g. services and activities pages)!

You can use the CSS clear property.
#footer {   clear: left;}

Which clears the left floating.

Share this post


Link to post
Share on other sites

Thanks F-Man! I don't suppose you've got a trick to just make it all work with internet explorer, have you? Making a website for standards compliant browsers is hard enough without browsers that have a mind of their own. Opera (they used to charge for this?) apparently hasn't heard of z-index either... :)

Share this post


Link to post
Share on other sites

The website is looking better in internet explorer and opera now that I've changed some positioning to absolute, but now I'm back with my old problem again since clear: left can no longer be used (it is used but isn't effective because the float of the submenus is trodden on by the absolute positioning).Is there anything else I can use?

Share this post


Link to post
Share on other sites

I've created a minimal test case to enable someone better at CSS than I am, to more easily see what's going on.Page;http://username132.tasminslair.com/min_tes...ges/welcome.phpCSS;http://username132.tasminslair.com/min_tes...esheets/all.cssMenus;http://username132.tasminslair.com/min_test_case/menus (there are three involved).The problems are;a) primary_nav is squashed over to the left in IE, considering it is supposed to have a min-width or width of 85% - removing the home_image CSS causes it to shoot into the middle fo the page, although it doesn't actually get any wider:) secondary_nav and tertiary_nav (the submenus on the left) are really wide in IE despite width: 25px; specificationc) secondary_nav and tertiary_nav are displaced about 80px to the right in IE and Opera, despite their absolute positioning(Website looks fine in Netscape and Firefox (at least in regard to these issues).Thanks for any help or general advice offered.

Share this post


Link to post
Share on other sites

What you're experiencing is a IE problem. IE is going to force the width out as long as something within it's element is wider than it is. Put your background stuff in a different element than your links and then see if you can get it to work right.

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.

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