Hello! I have a site, that I use to learn those web building languages. I have a problem with the menu tabs layout:
A div contains many a's but, and it is supposed to cover the path behind them, but: this is what happens.
I have tried position:absolute; but then, the menu overlap the contents of the page, so... please help me! Thanks!

Recommended Answers

All 5 Replies

Hello! I have a site, that I use to learn those web building languages. I have a problem with the menu tabs layout:
A div contains many a's but, and it is supposed to cover the path behind them, but: this is what happens.
I have tried position:absolute; but then, the menu overlap the contents of the page, so... please help me! Thanks!

Not really sure what you mean here, so you can use div's, can you use css? l can help you build a menu in css if need be.

Use 'overflow:hidden' property to the div which hold the navigation menus. I check your HTML and the div is 'ExternalMenuBarEHL1'. So, add this to the CSS property of 'ExternalMenuBarEHL1'.

overflow: hidden

It is not what you want, post again clearly. Good luck.

Thanks, that was useful for me! (tested it in FireBug), but the real problem, is that ExternalMenuBarEHL1 is just a thick line; it should be a div that all the options is inside. Just look at this. Here I use position:absolute in ExternalMenuBarEHL1, but then, if you resize, it will overlap the other elements in the page. So what should I do to make it look like that without using position:absolute?

EDIT: Notice that the server is kind of unstable, so if you can't connect, just wait for like 5 minutes!

Yeah, it worked! Sorry my fault, but now it works, thanks to that owerflow:hidden. Thanks, Zero13!
But it doesn't seem logic to me, that if works just because the overflow is hidden... Explain? Thanks!!!

Overflow control how to display the contents which are flow out of its parent. The contents can flow out from it's parent when the layer was floated or positioned absolute, or negative margins.

Absolute position can overlap another layer with 'absolute' or 'relative'. You can control what the layer is upper or lower with 'z-index' property. Here is some:

HTML:
<div id="layer1">First Layer</div>
<div id="layer2">Second Layer</div>
CSS:
#layer1 {
     background: green;
     left: 0;
     height: 22px;
     position: absolute;
     top: 0;
     width: 200px;
     z-index: 2
     }
#layer2 {
     background: blue;
     height: 22px;
     left: 100px;
     position: absolute;
     top: 0;
     width: 200px;
     z-index: 1
     }

You will see the layer1 is upper and the layer2 is below. The layer is top, when the 'z-index' value is greatest. You can use with 'relative-position' like this way.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.