I have a sidebar in which there are certain li elements as an index, and on hover of each of the li elements, I have a specific image appearing 'over' the li elements (eg: position:relative;top:-25px;)
Let's say I hover over the first li element and the rollover images appears fine. However, the space between 1st and 2nd element increases while this hover is occuring. I am not able to understand why this is happening and I want to stop this from happening i.e. the image should appear over the li item without no spacing problem but only a simple rollover.
Here is a fiddle of the problem I am talking about: http://jsfiddle.net/PF35v/3/
I would use absolute positioning in this case, I usually do when dealing with images and top/side nav bars that are "glued" to one side of a screen. Alternatively, in situations in which I am set on using relative vs. absolute I use a little cheat....Here is what I changed in the above fiddle
ul#nav a:hover+img {
display: block;
position:relative;
top:-35px;
margin-bottom:-48px;
}
UPDATED FIDDLE
http://jsfiddle.net/PF35v/9/
However, if your images are all different sizes, you would need to individually set up the top and margin-bottom positioning.
adding "position:absolute;" to ul#nav a:hover#first_id+img is stopping the LIs being pushed down (tried this on Chrome). Did you try this?
Related
If you hover over the menu over on this website you see that the content is pushed down. I inherited the stylesheet from other people and it's a complete mess. Can anyone please explain to me why this hover is pushing down the content?
The menu is built as followed:
li > ul class .sub-menu > li > a class .sub_menu_item
I looked at the position and display CSS but I can't seem to find anything strange. Any help would be greatly appreciated!
add this line into your css file:
#navigation ul.sub-menu{
position:absolute;
}
The .sub-menu elements are not given a position so they remain in the document flow when they are shown. They need a position: absolute to remove them from the flow and prevent content shift.
When I check hover on first li in the 'three columns' div you can inspect the dropdown and see that it inherits the default "position: 'relative'".
You want to apply the styling "Position: 'absolute'" on the ul class="sub-menu", which will make it effectively in its own container so it can go mostly where it wants, so you have greater control of its positioning. This is unless a parent of it has the setting "position: 'relative'", which it will then follow the boundaries of that containing cell).
Heads up also - it looks like you'll need to increase the width or something for the border-radius on the right hand side of the dropdown cells if you apply position absolute.
I have a site with a dropdown menu. When the menu expands it goes behind some li that i have later on. The z-index on the li is 10 and currently the dropdown ul does not have a z-index but it has opacity:1. Tried every combination of opacities and z-indexes in the mentioned elements but i cannot make it work as expected. I want the li to be behind the dropdown ul when it expands. The li is relatively positioned (my design needs that) and has a float property. The only way i can make this work is by using z-index:1 for the li but i don't want that as it messes up with some other elements. Any ideas?
If you want to use the z-index property, we must put on the div position:absolute;, position:fixed; or position:relative;
You should maybe take a look at your positions tags,
If you don't give position value to your elements in your css, then your z-index value will not be considered by the browser.
Trying to get my styling working properly for some hovering boxes that I created but it's not going too well...
I kind of have my general idea down.. which is as you hover over items items to the right become visible and so on... One of my biggest issues that I have been consistently having, this project included, is having items at width 100% so that all lines are the same size... but I can't get that to work here, so I have to manually place everything in positions (i.e. left 500px etc.)
Another thing that has been giving me an issue with this, for the final hover where the part number shows up I can't get it to appear just to the right of the corresponding product (it used to all appear on 1 line), but instead I had to position it relatively, and then change up the positioning so now I get a space in between each line when I hover over the product...
Here is my fiddle... any help would be appreciated
http://jsfiddle.net/H9CTe/1/
This would probably be the line we need to work with, but I could be completely wrong
#ipc_cases ul li ul li ul li ul {
position: relative;
top:-18px;
left: 500px;
}
Try using a reset [1].
Simply checking the Normalized CSS[2] box in Fiddle Options solves this.
http://jsfiddle.net/H9CTe/2/
(will update)
I'm having some real trouble with CSS here... it's very odd.
I have a UL element wrapped within a Nav tag. I'm trying to apply some padding to the individual links and for some reason the padding isn't moving the element down and expanding the container as a result.
Here's a screenshot of what's happening:
As you can see, the padding is being noticed by the browser, but it's just overlapping with the element above (which is being floated). I can't find a way to push it down, or at the very least make the container expand to hold it properly.
For reference, I'm using the Skeleton responsive boilerplate as a base.
Here's a link to it live: http://richardsonweb.co.uk/
Try display:inline-block; on your li elements
I am currently working on some client work and I make use of a simple dropdown menu i built. It seems to work fine in most browsers, except for IE. Debugging has been a real pain as IE doesn't really offer much insight and I haven't been able to pin point the exact issue.
The dropdown is a div that has position: absolute and contains three <ul>'s. From what I can tell, the div is positioned alright, but the first ul is twice the width its supposed to be, with no clear reason and thus making it seem like the entire dropwdown is not alligned properly.
The dropdown can be found here: fatumdemo.platonlearning.com. Moving over the menu items in the top menu (blue) you can see the issue.
The code is very lengthy to all post here, but in case more information about the structure and CSS is needed, I'd be glad to post it.
Joey,
1) #navigation ul li --->to add position:relative property
2) #navigation ul li .dropdown -----> Put width:450px to 500px
3) #navigation ul li .dropdown ul -----> put width:160px or something higher.
Main problem reason is width and relative, when you add absolute position relative is must of the parent element and width and height are must it absolute element
The problem was with the fact that i was using elements other than li's as children of a ul. Internet Explorer apparently doesn't tolerate this behavior, unlike all the other browsers and treats the other elements as list-items, hence my dropdown being put in the wrong list-item in IE.