Why are UL classes always on top?

[ryanod]

I have a page where I have a ul class and a div class in the same container div. The ul class always ends up on top of the image. I want the ul class to be behind the div class with the image in it. How can I control the 'levels' of these two objects without using z-index. . .they are not absolutely positioned.

Also, I have a CSS based drop down menu in its own division class. It uses lists as well. The drop down part is its own ul class. When the drop down menu is triggered, it drops over part of the container div. This too always ends up behind the ul class in the container div.

It is like the ul class is ALWAYS the topmost part of the page. What's with that??

I cannot post the code, but it anyone has experienced this phenomenon, I would be interested in what you did to fix it.

Thanks.

ryanod

[Diego]

hey there,
with out source to even see what your doing its hard to offer effective help, however...
you can control which element on a page is infront of another element using the css attribute "z-index" valid code ranges from "z-index:0;" up to whatever you'd like (note negative index values will not validate and thus shouldn't be used)

ul can be styled if you don't need to div around the ul you should take it off.

re: the drop down nav, again use z-index to push the container ul above the other elements in the page. be warned though, pure css drop nav's will not work as a list across browsers. IE is the worst enemy in this case, you can hack around it a few different ways. most common way is to add javascript to force the drop down. you should check out the navigations that are in dynamic drive.

again if you post a link to the problem you will get better answers, if not a solution.

good luck

[ryanod]

Ahhh, yes!! I suppose I can post a link to the page. . .

www.gsassoc-inc.com

It should be noted that I had nothing to do with the international pages.

I used the CSS based drop down menu detailed on A List Apart. The issue is that when the drop down menu was dropping down on the right side of the menu, it would appear behind any ULs I had (see other pages on the site). The site used a lot of lists that I had to use in the redesign.

Anyhow, all this forced me to move the drop down to the left side. . .which, in the end I liked better. BUT, I don't understand when the drop down list always goes behind the list in the container division.

One more thing. . .how do I change the drop down menu CSS code so it doesn't screw up all the other lists on the page??

Thanks a lot!!

ryanod

[Diego]

Hey ryanod,
nice clean fast site. and good work around with the nav over to the right. sometimes the most easiest turns out to best.

the issue with the nav going below the ul's on the content side leads to the last question you asked. right now the lists are define only by their tag "< ul >", so whenver you use a ul or li somewhere else it too has the properties assigned for the nav since they are using the same css. so to fix that we need can assign some classes and id's to each and any tag you'd like to control.

check out the css files and the source code in this test page i made here:
http://redesign_06_hab-tfoley.intera...om/cssnav3.php

i have a script writing it so the format isn't the easiest to read, the css has more documentation on it, not fully but it's there.

also on a side note, when i opened a side bar in my browser on yoursite, the width of everything shrunk, but the images poked out. generaly i find it to work best to use a fixed width for a site layout. that way the layout doesn't look different in different browsers or at different resolutions.

here's an example of how i start a basic layout, this works for me it may not for you, i've tried all sorts of different ways to layout in css over the past few years and have come up with a sort of standard frame work that i use on all my builds; (see the main site as an example of a build in css)
http://www.centexporchstreet.com/boxtest.php

let me know how it works out; and ask if you have any questions.

_good luck

[ryanod]

Hey, thanks. That makes sense. I'll mess with it and see what happens.

When you say the 'images' poked out. . .do you mean the list items or the images?? I messed with my browser with and was not able to get any images to break out of the content division.

Thanks for your help. It sure is appreciated.

ryanod

[mwinter]

I have a page where I have a ul class and a div class [...]

Excuse me? I think you mean element, not class.

The ul class always ends up on top of the image.

And what image would that be?

Also, I have a CSS based drop down menu in its own division class. It uses lists as well. The drop down part is its own ul class. When the drop down menu is triggered, it drops over part of the container div. This too always ends up behind the ul class in the container div.

It is like the ul class is ALWAYS the topmost part of the page. What's with that??

It isn't the list that is on top, but rather the list items. You indescriminantly position every list item within every unordered list (ul) in the entire document. This alters how the lists stack.

Your drop down lists only exist within a particular region, therefore restrict the scope of the relevant CSS rules. For example, set a class attribute on the menu list, and prefix each selector with that attribute value. After that, add

z-index: 1;

to the selector that (currently) begins 'li ul'; the one that absolutely-positions the submenus.

Mike

[ryanod]

Thanks. I get it now.

ryanod

[mwinter]

I forgot to mention that you shouldn't place the menu items to the left. It doesn't take that narrow a viewport to cause the menu text to disappear off the left-hand edge.

Mike

[ryanod]

Yeah, I thought about that. I'll get back into the CSS file and make some changes. Thanks.

ryanod