One div floating over the other. How do I make one more dominant?

G

Glenn

Member
I have one div that overlaps another. I want one to be more dominant where the second will now show through? The text of both right now are showing up.
 
G

Glenn

Member
No, I just don't want the words to show up. I'm using a :hover to bring up more information and the text below is showing up through the new text. Did that make sense??
 
ronaldroe

ronaldroe

Super Moderator
Staff member
Change the text color to color:transparent;

Or use RGBa and set the opacity to 0.0. Doesn't work in IE<=8, but I think CSS3 PIE adds support for it.

The other option is CSS3 text clipping, but support is super low for it.
 
Last edited:
CaldwellYSR

CaldwellYSR

Member
give the drop-down menu's a background. They'll cover up the text below. Use z-index to make sure which one is going to be on top
 
G

Glenn

Member
CaldwellYSR said:
give the drop-down menu's a background. They'll cover up the text below. Use z-index to make sure which one is going to be on top
Click to expand...

I've given it a background color. Do you mean a background image? If that's the case why is the image on the third one covered by the text?
 
CaldwellYSR

CaldwellYSR

Member
no just a cover will work. I didn't look that hard at the code but if you have a background image and you're still seeing the text from the bottom then ti's because of the z-index. The item with the higher z-index will be on "top". If none of them have a z-index then the on that come's up later in the html code will show through. So go to the dropdown menu, give it a background color, then give it a z-index of 10.
 
CaldwellYSR

CaldwellYSR

Member
I looked at the source this time.... have you googled "CSS navigation"? That content doesn't make any sense you've got all that text in a single div and then the div changes when you hover.... why? How will this be useable anywhere?
 
Phreaddee

Phreaddee

Super Moderator
Staff member
z-index does diddly squat when an element has no positioning.

if you add position:relative to .temp1 all the issues will disappear...
 
CaldwellYSR

CaldwellYSR

Member
That person used an unordered list for the navigation and then inside each list item there was an anchor tag and a div inside there with all the dropdown info. The dropdown info is set to display: none by default and then when you hover over the list-item they set the dropdown div to block instead.
 
G

Glenn

Member
CaldwellYSR said:
That person used an unordered list for the navigation and then inside each list item there was an anchor tag and a div inside there with all the dropdown info. The dropdown info is set to display: none by default and then when you hover over the list-item they set the dropdown div to block instead.
Click to expand...

I couldn't get that to work for me. I added a position:fixed, which worked on moving it over to where I wanted it but it keeps the overflow:hidden from working.

Can I get a div to inherit the position 2 div positions above it? In other words,

<div class="1"> <div class="2"> <div class="3"> </div></div></div>

The third div take the position inherited from class 1?

Or, maybe I need relative to class 1.
 
Last edited:
You must log in or register to reply here.
Top