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.
Page 2 of 2
  1. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    as for your problem
    1. class or id's cannot begin with a number so a class of "1", "2", "3" doesnt work.
    2. quote from the document I just linked.
    without quoting the entire document, it has all the answers you need.
     
    Phreaddee, May 9, 2012
    #21
  3. Glenn

    Glenn Member

    Messages:
    202
    That didn't help me get the 3rd div to line up with the first div.
     
    Glenn, May 9, 2012
    #22
  5. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    it would if you read it all.
    1. it will tell you how to do it
    2. it will tell you why its not doing it currently
    3. it will tell you how to actually use positioning, and how not to use it.

    sure it wont s-p-e-l-l it out for you but its all there.
     
    Phreaddee, May 9, 2012
    #23
  7. Glenn

    Glenn Member

    Messages:
    202
    I know. I was just using for demo.

    It didn't have what I needed.
     
    Glenn, May 9, 2012
    #24
  9. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    well it all depends on what position value you have on box 1,2 and 3

    if box 1 is relative and box 2 has no positioning on it and box 3 is absolute top:0;left:0 it will sit in top:0;left:0 in box 1

    HTML:
    <!DOCTYPE html>
<html>
<head>
<style>
#one {
position:relative;
top:100px;
left:100px;
}

#three {
position:absolute;
top:0;
left:0;
}

p {margin:0;padding:0;)
</style>
</head>
<body>
<div id="one">
<p>some paragraph</p>
<div id="two">
<p>some paragraph</p>
<div id="three">
<p>some paragraph</p>
</div>
</div>
</div>
</body>
</html>
     
    Last edited: May 9, 2012
    Phreaddee, May 9, 2012
    #25
  11. Glenn

    Glenn Member

    Messages:
    202
    My problem still stands. When I give box 3 a position of absolute, it overrides the overflow: hidden and shows up without the box 2: hover.
     
    Glenn, May 9, 2012
    #26
  13. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    well, without an "in situation" problem, we are only hypothesising, if you care to share a link to what your working with I may be able to understand your specific issue a bit better.
     
    Phreaddee, May 9, 2012
    #27
  15. Glenn

    Glenn Member

    Messages:
    202
    glennbates.com/sites/site6
     
    Glenn, May 9, 2012
    #28
  17. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    OK
    so looking at what you've got there I'm guessing you are wanting to line up the hovers on all four menus to start at the left edge?

    try adding
    Code:
    .main-nav ul li:nth-child(1) .secondary-nav .secondary-nav-container {
left:0;
}
.main-nav ul li:nth-child(2) .secondary-nav .secondary-nav-container {
left:-100px;
}
.main-nav ul li:nth-child(3) .secondary-nav .secondary-nav-container {
left:-200px;
}
.main-nav ul li:nth-child(4) .secondary-nav .secondary-nav-container {
left:-300px;
}
     
    Phreaddee, May 9, 2012
    #29
  19. Glenn

    Glenn Member

    Messages:
    202
    I've done that one before but here's my problem with that. After I get things working, the nav bar becomes more complicated. Look now.
     
    Glenn, May 9, 2012
    #30
  21. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    thats because you've now removed the width on the list items.

    because .secondary-nav-container is absolute, and .secondary-nav is relative.
    .secondary-nav-container starting point is ALWAYS left:0 of .secondary-nav

    if you dont know how far removed from the initial position it is you cannot set a compensation value.
     
    Phreaddee, May 9, 2012
    #31
  23. Glenn

    Glenn Member

    Messages:
    202
    So, there's no way to make the third div relative to the first div?
     
    Glenn, May 9, 2012
    #32
  25. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    either put the width back in, and stop creating headaches for yourself or find a javascript alternative.
    your whole menu bar is 800px, why not have the li be 100px, that gives you 8 menu items to add. keeps the math simple, and besides odd shaped menu's look ugly. always. and they break the grid entirely. but you know, its your call...

    and... there are only 2 divs. where does this third one come from?
    .secondary-nav-container +
    .secondary-nav
     
    Phreaddee, May 9, 2012
    #33
  27. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    even now that you've got it centred, if you had a width on the list item you could neatly line up the hovers...
     
    Phreaddee, May 9, 2012
    #34
  29. Glenn

    Glenn Member

    Messages:
    202
    I just thought of something. I used to have an image of something and the numbers 1 through 5 below it and as I hovered over each number, the image above it would change. I can't remember how I did it. That would work. I think.

    I remember onmouseover and target. I'm not sure this could be used in a overflow:hidden situation
     
    Last edited: May 10, 2012
    Glenn, May 10, 2012
    #35
Page 2 of 2

Share This Page