Another developer has made a menu in a nav tag that is like this:
_layout page
<div>#Html.Partial("_menu")</div>
then in the _menu.cshtl page:
<div>#Html.RenderMenu("mainMenu")</div>
In the C# code a bunch of ul and li nested elements are generated, which looks fine at first on the page.
But when you hover over one of the elements the nested elements drop down and the div right below that gets pushed down the page. It's ugly. How do I fix this? Is there some CSS magic I can do to make it overwrite the div below rather than pushing it down?
Just add position with a property value of absolute and a higher z-index to the element that shows on hover. You can control the position with Top, Bottom, Left and Right properties values.
Example:
ul {
position: absolute;
left: 0; /* Adjust as needed */
right: 0; /* Adjust as needed */
}
Note: Make sure that the element that contains the element that shows on hover has a position property value of relative to help contain the Ul(in this case). Otherwise, it will overlap.
Hard to see without the code, but you can apply absolute positioning to overlapping element.( I have no clue which one is that as you didn't provide any code). So:
position: absolute
You have to make the position of the ul element relative.
ul{
position: relative;
}
Related
I have been creating a website for the school and it consist of a hoverable drop down menu.
The problem is that when ever I hover over the menu the drop down items are not aligned with the dropdown tabs
Here is an image to show you
It seems that your problem is mainly around box positioning. You must always specify your content position when using absolute positioning. This will avoid making your submenu flying around, instead of being exactly where you want it to. Also, make sure that the parent element has relative position, so that your submenu may inherit box properties from it.
.firstlevel-menu-item {
position: relative;
}
.my-submenu {
position: absolute;
top: 100%; /* 100% of firstlevel menu's height */
left: 0; /* align to firstlevel menu's left side */
width: 100%; /* width of firstlevel menu */
}
Aligning the content to the end of the parent's box should solve your issue.
There goes a JSFiddle for enlightenment.
I suggest you to search a bit more about box positioning, since it is of critical importance for building dropdown menus and a variety of other features that would rely on absolute/relative positioning.
Take a look at the fiddle below:
Fiddle: http://jsfiddle.net/TE8hD/
In it you can see my problems:
The list items within the <ul> are not centered as there is a big margin to the left while there is no gap at all to the right.
Also the <ul> itself cannot be properly positioned the way I want it to. I want it to be 200px from the right and 0px from the bottom. However when I try this I can only get the right property to work.
I've been trying to fix this for the past 2 hours, changing everything from position, float, display, margin, padding etc. Nothing seems to do the trick, if I could get some help solving this it would make my day.
Add:
padding: 0;
margin: 0;
To your .dropdown class.
And look into implementing a reset.css file, which typically resets margin, padding, and other properties on a lot of elements so that you have a blank slate when creating your CSS.
Also, you seem to lack an understanding of what position: relative and position: absolute do. Do some research on that. But if you want your UL to be positioned absolutely at the bottom of its containing element (.header), then .header needs to have position: relative and .dropdown needs position: absolute;
Fiddle: http://jsfiddle.net/TE8hD/2/
Please take a look at this page
If you click on "Obesity Surgery", there is a drop down menu that is supposed to display. (It's using Twitter Bootstrap drop down menu).
I can confirm the menu is there, but it gets hidden behind the underlying content even though it has an absolute position with a high z-index.
Do you have any idea how to fix this?
Obviously the problem lies with the z-index. But the problem is actually all the way up to the top parent. The header element with banner class has z-index: 1. Setting it to a higher number fixes the problem.
.banner {
position: relative;
z-index: 10;
}
You should set the z-index:9999; of the menu element and its children to ensure that they are always on top.
You can play with the z-index of other elements to keep them above others on the page.
Check if the overflow setting is set to hidden, if it is remove the value.
.banner {
overflow: hidden // remove
}
The issue was actually due to the very top image (image of the clouds) being set with the position absolute and a high z-index. Thank you all for your help.
Try adding the following styles to class dropdown:
.dropdown {
position: fixed;
z-index: 9999;
}
Hi I am not sure if this is the right way to do it but I am trying to position a div tag back
over the previous div element
This is what I have working
my css that I have used to get this to work looks like
.page-frame {
background-color: #fff;
padding-top: 40px;
position: relative;
top: -35px;
}
so for the top part the div element looks the way I want it to however the bottom on the element hasn't adjusted for the -35px;
I have tried adding a clear div after the element however that doesnt help. What do I need to change to remove the space between my .page-frame div and the next div?
The use of position: relative only shifts the appearance of the element in the page, but not the actual "space" it takes up on the page. So what you have done made your visual change to show the element 35px higher, but it does not cause other elements to reflow around it. Probably, what you need to add is a margin-bottom: -35px to get the final effect you want.
EDIT: Added better fiddle example to show reflow with margin.
Use position: absolute; instead of relative
Take a look at this page and click on the arrows to activate the carousel: http://bethhaim.spin-demo.com/browse/divisions/i
As you can see, the ul overflows over the div with the black background, I need to fix this.
I've created a class called .stop_overflowing_plz and inside of that I've put a ul which is part of the carousel you see. The purpose of that new class is to stop the ul from overflowing all the way over the black div, but isn't working as intended.
Anyone know what I could do in order to keep the ul inside of .stop_overflowing_plz and stop it from overflowing like it currently is doing?
You appear to have the following CSS applied to the ul:
.le_carousel .overview {
list-style: none;
position: absolute;
padding: 0;
margin: 0;
left: 0 top: 0;
}
You need to change position to relative otherwise it will always position itself relative to the page and not the surrounding div.
You need to add position: relative to your stop_overflowing_plz div.
As you're setting position: absolute on your ul, you need to make your div the containing block.