Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Overlap on menu ribbon

absolute and relative positioning



8:46 pm on Feb 19, 2011 (gmt 0)

Hi, i use on my site, i use as a logo:

a#l1, a#l2 { 
margin: 5px;
a#l1 {
height: 231px;
width: 164px;
background: url('graphics/logo.gif');
a#l2 {
height: 124px;
width: 88px;
background: url('graphics/logo2.gif');

And a ribbon

p.h1, p.h4, p.h6 {
padding: 2px;
margin-right: 5px;
margin-bottom: 3px;
-moz-box-shadow:0 2px 0 rgba(0,0,0,0.1);
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.1);
-o-box-shadow:0 2px 0 rgba(0,0,0,0.1);
box-shadow:0 2px 0 rgba(0,0,0,0.1);

How can i make the logo overlap the ribbon?


1:47 pm on Feb 20, 2011 (gmt 0)

Tried z-index?


4:57 pm on Feb 20, 2011 (gmt 0)

Yes, but it dont works.


5:27 pm on Feb 21, 2011 (gmt 0)

I see no positioning mentioned. Z-index only works on positioned elements: [w3schools.com...]


6:19 pm on Feb 22, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

HA! I had one of these today. The short story: create a parent container, or, assign to the parent container position: relative, then absolutely position/z-index the internal elements inside that container. Then make sure your document and CSS validate [validator.w3.org] or it's likely it may fail.

The long story: Visualize a menu like this:

home / products / blah / bleah / contact

See the slashes? The design has slanted lines, just like that, so how does one do mouseovers with full background color fills with this? Navs have to fit in square boxes, so for any given mouseover, it must occupy part of the space next to it. It's similar to your problem. As we all know, it's impossible for two masses to occupy the same space, even on the Internet. :-)

The solution was surprisingly simple.

Absolute positioning doesn't mean your entire layout needs to be absolutely positioned. What I did was start with a floated div (floated, only due to other elements in the surrounding layout : )

#nav-container { float: left; width: 700px; height: 50px; position:relative; }

The key here being the position: the absolute elements inside it will now position relative to this parent container.

Next comes a little bit of graphic wizardry to pull off this sleight of hand. The graphics have transparent edges, with a single image for non- mouseover and mouseover states. Important that the edges are transparent, I used .png to avoid sharp edges.

this is transparent to here ->/MOUSOVER/<-- also transparent outside angle

Stack them in a single image with non-mouseover state on top, mouseover state on bottom, exactly twice the height of the containing <a>.


Then, for each of the internal elements, I absolutely positioned them relative to the parent. A sample thrown together:

#nav-container ul,
#nav-container li,
#nav-container li a { margin:0; padding:0; list-style:none; outline:none; height: 50px; }

#nav-container li,
#nav-container li a { width: 100px; display: block; }

#nav-container li { position: absolute; }

#first-nav { left: 0; z-index: 1000; } /*left not needed really */
#second-nav { left: 95px; z-index: 1005; }
#third-nav { left: 190px; z-index: 1010; }
#fourth-nav { left: 285px; z-index: 1015; }

#first-nav a { background: url(img-1.jpg) top left no-repeat; }
#second-nav a { background: url(img-2.jpg) top left no-repeat; }
#third-nav a { background: url(img-3.jpg) top left no-repeat; }
#fourth-nav a { background: url(img-4.jpg) top left no-repeat; }

#first-nav a: hover, #second-nav a: hover, #third-nav a: hover,
#fourth-nav a: hover { background-position:bottom left; }

And the HTML something like

<div id="nav-container">
<li id="first-nav"><a href="">I am the</a></li>
<li id="second-nav"><a href="">Egg Man</a></li>
<li id="third-nav"><a href="">Coo Coo</a></li>
<li id="fourth-nav"><a href="">Ca Choo</a></li>

Behind all, a single nav bar hides and aberrations of the overall effect. Note how each nav is 5px less than it's predecessor to the left, creating an overlapping tile . . . and it works. :-)

Note: Had the navs all been the same width as in the above sample, there are other things I could have done, but they weren't.


4:01 pm on Feb 23, 2011 (gmt 0)

As a somewhere-in-between-tables-and-boxmodel person positioning still has a lot of secrets for me. The above is not easy to understand for me, at least your solution. I'll bookmark it for later reading.
I have however, by your description, a better picture of your actual problem or better: by the problem you had.
Was dealing this week with a same sort of thing. I use wave-shaped buttons and had conflicting anchor areas. Like you say: navs have to fit in square boxes.
I fixed my problem by adapting my images. I cut them into three parts and put them in two div classes giving each top part of a button a little margin. I now have all buttons positioned without any transparent space between them AND without conflicting navigation, as I have three parts I can link to the page they need to be linked to. It was one of these nights in my case. Went to bed having the idea of this possible solution, which made it impossible for me to fall asleep.

Featured Threads

Hot Threads This Week

Hot Threads This Month