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

Discussion in 'Web Design' started by Glenn, May 4, 2012.

to remove all ads.
  1. Glenn

    Glenn Member

    Messages:
    189
    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.
     
  2. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    So you want to change the opacity?
     
  3. Glenn

    Glenn Member

    Messages:
    189
    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??
     
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    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: May 4, 2012
  5. Glenn

    Glenn Member

    Messages:
    189
    Than I won't be able to see it at all.
     
  6. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658

    This confuses me a bit...
     
  7. Glenn

    Glenn Member

    Messages:
    189
    Take a look
    glennbates.com/sites/site6
     
  8. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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
     
  9. Glenn

    Glenn Member

    Messages:
    189
    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?
     
  10. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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.
     
  11. Glenn

    Glenn Member

    Messages:
    189
    I'd already done that. Didn't work.
     
  12. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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?
     
  13. Glenn

    Glenn Member

    Messages:
    189
    No, I was reading about overflow and started trying this.
     
  14. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    z-index does diddly squat when an element has no positioning.

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

    CaldwellYSR Member

    Messages:
    658
    Learn something new everyday!
     
  16. Glenn

    Glenn Member

    Messages:
    189
    WOW! That solved everything! Thanks!
     
  17. Glenn

    Glenn Member

    Messages:
    189
  18. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    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.
     
  19. Glenn

    Glenn Member

    Messages:
    189
    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: May 9, 2012
  20. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978

Share This Page