homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Overlap on menu ribbon
absolute and relative positioning

Msg#: 4269565 posted 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?



Msg#: 4269565 posted 1:47 pm on Feb 20, 2011 (gmt 0)

Tried z-index?


Msg#: 4269565 posted 4:57 pm on Feb 20, 2011 (gmt 0)

Yes, but it dont works.


Msg#: 4269565 posted 5:27 pm on Feb 21, 2011 (gmt 0)

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


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

Msg#: 4269565 posted 6:19 pm on Feb 22, 2011 (gmt 0)

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.


Msg#: 4269565 posted 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved