homepage Welcome to WebmasterWorld Guest from 54.227.67.210
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Overlap on menu ribbon
absolute and relative positioning
batti3004




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

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

a#l1, a#l2 {
float:left;
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 {
font-size:12pt;
padding: 2px;
margin-left:-30px;
margin-right: 5px;
margin-bottom: 3px;
clear:both;
color:#fff;
-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?

 

webprutser




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

Tried z-index?

batti3004




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

Yes, but it dont works.

webprutser




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

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

rocknbil




msg:4270660
 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>.

NORMAL
------
MOUSEOVER

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">
<ul>
<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>
</ul>
</div>


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.

webprutser




msg:4271101
 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