Jump to content

I Can't Fix It :cry:


username132

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

Link to comment
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. =)

Link to comment
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. =)

Link to comment
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.

Link to comment
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... :)

Link to comment
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?

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...