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

Phreaddee

Phreaddee

Super Moderator
Staff member
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.
The values of this property have the following meanings:
static
The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply.
relative
The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
absolute
 The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.
fixed
The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled. In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a print-preview, for example). For other media types, the presentation is undefined. Authors may wish to specify 'fixed' in a media-dependent way.
Click to expand...
without quoting the entire document, it has all the answers you need.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
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

Phreaddee

Super Moderator
Staff member
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:
G

Glenn

Member
Phreaddee said:
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
Click to expand...

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.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
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

Phreaddee

Super Moderator
Staff member
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;
}
 
G

Glenn

Member
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.
 
Phreaddee

Phreaddee

Super Moderator
Staff member
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

Phreaddee

Super Moderator
Staff member
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

Phreaddee

Super Moderator
Staff member
even now that you've got it centred, if you had a width on the list item you could neatly line up the hovers...
 
G

Glenn

Member
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:
You must log in or register to reply here.
Top