Need <li> to hover outside of menu item, layering bkgrds, can't clear float

HTML & CSS
1

I working on a design and having trouble with a few things:

#1: On the left navigation menu (with the green background), how do I get the arrow to hover outside the box? For example, I need the hovering arrow to hover at least 20px to the left of the menu item. If you hover over it, you’ll see that it is within the <li>; I’m having a pickle of a time trying to get it to hover at least 20px to the left of the <li>. I’ve tried setting a padding and then a negative background on the hover, but it disappears.

#2: The top background box (the one with the green nav menu and the image on the right), the bottom of the box actually has a shadow, but for some reason the bottom box is covering it. I’ve tried using z-index and setting positioning to relative on the containers, but I’m not having any luck there. I’m trying to get the bottom of the top box to sit above the bottom box to show the shadow.

#3: The bottom box background white is layering over the background image, filling in a transparent area (you can see on the sides with the borders covered). How do I fix this? I’m using two gradient backgrounds: one above the other. As the content lengthens, the top one stays stationery and the bottom one flows with the content (which is what I want), with white background as the filler, but not to stick out beyond the width of the background image.

#4: I’m having trouble clearing a float. When I try to clear <div id=“logoheader”>, the rest of the content below winds up on the bottom of the screen. If I don’t clear the float, then it looks fine but I can’t apply any top margins or padding above the heading, thus the necessity to clear it.

I appreciate a little education here. Thank you for your time!

2

Luki_be, thank you for that bit of information! I did change it to :hidden. Any clue regarding my shadow not appearing because of that bottom box layer? I’m still working on it, but I’m wondering if I’m going to have to reinvent the wheel if I can’t get z-index to work in my favor.

3

overflow:auto? Why would you use that? Do you want to control scrollbars?

Although overflow:auto should work, it can cause internal scrollbars with certain combinations of margin/padding. Overflow:hidden doesn’t have that effect :slight_smile:

4

You could put a repeating white image background (with equivalent borders on each side) on #bottom, and move the top and bottom bg images to the next divs down.

5

#4: adding overflow:hidden to logoheader?

6

Actually, I added overflow: auto and it worked great! Now, just trying to figure out #2.

7

You should be able to resolve the first question with something like this:

#menuleft li a {
	padding:12px 0 0 [COLOR="Red"]12px[/COLOR];
}

#3: …white background as the filler, but not to stick out beyond the width of the background image.

The white background isn’t sticking out. The background images have a dark border on them, so they can’t match a white background.

8

Ok. I now have #1 & #3 solved. Any ideas on #2 & #4?

9

Doing that makes the hovering background go within the menu item. I need it to go OUTSIDE the menu item.

What I wound up doing was making the LI A padding to padding: 12px 0px 12px 12px;, added a negative left margin of 12px;, removed width: 170px; from the LI item, and removed the margin from the UL.

As for the white background, I understand why, I just don’t understand how to fix it at this point.

10

funny thing you should say that, I’m doing that right now! :slight_smile:

11

Glad it worked out :slight_smile:

12

I finally figured out the last problem: the height on my top box was not at its fullest, thus the shadow never shown.

Thank you for your all your help guys!