Member Avatar for ErlendHL

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!

  • 3 Contributors
  • 5 Replies
  • 113 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

Good point from — that overflow change “fixed” the menu because it changed how the browser contains child layout, but the root issue is about elements taken out of normal flow.

If the menu items are floated, the parent can collapse (height becomes zero) and other content slips up underneath. Setting the parent to an overflow value other than visible creates a block formatting context (BFC) so the parent wraps its floated children — that’s why you saw an immediate fix. If the entire menu container itself is position:absolute, however, it is removed from normal flow and will overlap page content; hiding overflow will not make an absolutely positioned element push other content down.

Two practical, robust fixes (pick one):

  • Use a clearfix when children are floated:

    /* contain floated links without using overflow */
#ExternalMenuBarEHL1::after {
content: "";
display: table;
clear: both;
}

  • Use modern layout with flexbox for a responsive horizontal menu that won’t overlap and can wrap on small screens:

    #ExternalMenuBarEHL1 {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#ExternalMenuBarEHL1 a {
display: block;
padding: 8px 12px;
}

If you need dropdowns, keep the main nav in normal flow (not absolute) and absolutely position only the submenu panels; give the nav item position: relative so submenus are positioned correctly.

Quick debug checklist: inspect computed position and height in DevTools, add temporary outlines/backgrounds to visualize container size, remove position:absolute temporarily to see flow changes, and test resizing with flex-wrap or by letting items wrap. These steps explain why ’s suggestion worked and how to make the menu stable and responsive without overlapping content.

Recommended Answers

All 5 Replies

Member Avatar for dlannetts

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.

Member Avatar for ko ko

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.

Edited by ko ko because: forgot some infos
Member Avatar for ErlendHL

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!

Edited by ErlendHL because: Server is unstable
Member Avatar for ErlendHL

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!!!

Member Avatar for ko ko

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.