[mrgaskell]

How do I get an all CSS (ala Suckerfish) drop down navigation menu to float above the other <div>s? I have a top div, left, right, and middle divs with all but the middle div having absolute positions in a 3 column design. You can see a mock-up as I'm goofing around here: tester

Also, is there a way to get a image to extend all the way to the end of the page without having the image pop down with the sub-menus?

Thanks!

[Chris O'Brien]

You need to z-index the divs.

Well, just put z-index: 99; in the CSS rule for the drop down menus.

Edit:
After actually looking at your site and code, add it like so:

Code:
li li {
	display: block;
	float:inherit;
	background-color: transparent;
	border: 0;
        z-index: 99;
}

I imagine that'd work. Note that it doesn't have to be 99, just higher than everything else's z-index.

[registered_user]

Originally posted by Black Book:
snip

Why not add the z-index to the parent ul#nav ?

[Chris O'Brien]

yeah, it was an 'either or' situation...

[mrgaskell]

Okay, now how do I get the menu background to go all the way to the right?

[Millennium]

Originally posted by registered_user:
Why not add the z-index to the parent ul#nav ?

Why use ul#nav anyway? #nav will work just fine; since there is by definition only one #nav in the document the "ul" is redundant.

For that matter, you should probably enclose the actual menu stuff in "#ul li li" instead of just "li li"; otherwise the styles will leak into any other unordered lists you might use later.

[Synotic]

Originally posted by mrgaskell:
Okay, now how do I get the menu background to go all the way to the right?

I'm not completely sure what you're referring to but is there supposed to be a background on the menu bar/menus? If they aren't appearing, then the problem is probably twofold. First of all, just checking Safari's activity window, "ddbg3.gif" and "nav-bg.jpg" aren't loading because they're forbidden. Are your permissions correct on the web server? Secondly, checking your CSS code, it seems that you're using improper syntax which might cause a problem:

Code:
background-image:url(../siteimages/ddbg3.gif) bottom left no repeat;

'background-image' simply takes an image property, you're trying to feed it a position and repeat property though. You should use the 'background' shorthand, i.e.:

Code:
background: url(../siteimages/ddbg3.gif) bottom left no-repeat;

Also note that I put a dash between the "no repeat", I'm not sure sure how lenient browsers are, but there should be a dash in there.

Also, this is somewhat unrelated but also here:

Code:
font:Arial, Helvetica, sans-serif;

That should be 'font-family'. Again, I'm not sure how strict browsers are, but I've had problems with that personally (misusing the 'font' shorthand).

Anyways, this might be completely unrelated, but it'd probably be good if you fixed some of these problems, and the others might fix themselves

[registered_user]

Originally posted by Millennium:
Why use ul#nav anyway? #nav will work just fine; since there is by definition only one #nav in the document the "ul" is redundant.

For that matter, you should probably enclose the actual menu stuff in "#ul li li" instead of just "li li"; otherwise the styles will leak into any other unordered lists you might use later.

Two reasons. It's easier to describe here in the forums is the big one, and if in the event he should change his markup and use the id of nav to describe a div or something (uniquely as proper or in addition to the ul), things won't freak on him. It also provides a nice level of specificity, but like you said, it's a bit much.

[mrgaskell]

Thanks for the input. I have made the changes. I will start the style sheet over for the site that I want to actually use it for tonight or tomorrow. I really wish I could get the background color or image to scale along the screen under the banner image. Right now it stops at the last menu item.

[Oisín]

Originally posted by Black Book:
Well, just put z-index: 99; in the CSS rule for the drop down menus.

I'm not certain about this, but aren't there some browsers (older ones) that can't handle "jumps" in z-indexes? Ie. if the defined z-indexes are 1, 2 and 4, they can't handle 4 because it skips 3, and then it sets it to default (ie. under 1)?

I seem to recall Netscape doing that to me once...

Originally posted by registered_user:
Two reasons. It's easier to describe here in the forums is the big one, and if in the event he should change his markup and use the id of nav to describe a div or something (uniquely as proper or in addition to the ul), things won't freak on him. It also provides a nice level of specificity, but like you said, it's a bit much.

If he changes the markup and uses the #nav id on another element without removing it from the ul where it's used now, it won't work at all, because only one #something is allowed in a page. If there are more than one, neither will be formatted in any way (unless of course you're on the ever-lenient IE) and the page won't validate.

Originally posted by mrgaskell:
I really wish I could get the background color or image to scale along the screen under the banner image. Right now it stops at the last menu item.

Sorry, I've read through this line five times now and I simply don't understand what it is you want to do...

How do you mean "scale along the screen"? The banner image would be the John Gaskell image, right? Is it that you want the menu points (Students, Academics, Parents, etc.) to have the same background as the drop-down menus when hovered over? Or...?

[mrgaskell]

I'd like for the nav bar to scale along the same width as the image. Right now, the nav bar stops when it gets to the last menu item. How do I get a nav bar's background image to go all the way to the right? The width command doesn't work. Should I give the image's dimensions (width 1000px, height 100px) in the background: url (xxxx) line?

Thanks again!

[Chris O'Brien]

Try using repeat-x instead of no-repeat and see what happens. Also, make sure the menu has a width of 100% (give it a 1px border or something to see it's boundaries...

That's assuming it's a repeating background... If it's just a block image, then the image will need to be made the correct width to work with no-repeat. I don't recommend that.