I have horizontal list with list items. If you hover the mouse on it, it expands horizontally to make space to show more infos (not implemented)
However I can't figure out why the items are moving down when i hover over it.
https://embed.plnkr.co/51WuwdhmH7yS3pSnkqFY/
(The overlapping thing is just is just plunker i guess)
Thanks!
This problem has a very simple fix: in your CSS add vertical-align: top; to .thread-item. This will keep the elements on top at all time ;)
Related
I am trying to keep an element horizontally and vertically centered while it grows inside a container, but while also allowing you to scroll and see the rest of the growing element. I made a codepen that demonstrates my problem.
I am using transformX and transformY while also using position:absolute with left and right set to 50% as well. The goal is that when you click the grow button, you should be able to scroll up, down left and right and see the whole image. Currently something with the transform seems to be preventing you from getting back to the top and the far left of the image. Any ideas?
CodePen
EDIT
I am using flexbox instead now, but still have the same problem. Its visible in the updated CodePen.
I am trying to do something that should be simple but is apparently not so. I just want to make a simple single line navigation bar using a list tag. Thats fine, I can do it. The problem is making it wrap gracefully and still keep the same layout when it needs to appear over multiple rows due to not enough horizontal browser space.
As I say, I'm using a list tag and I have the ride side border of each LI item with a visible vertical line to make the divider appear. The final item I am not shwoing that with a last-child pseudo class. Its important that the far left and right buttons DON'T have vertical borders. This is clear in the top image.
The UL tag itself also has a top/bottom border line visible and in the first demo in the image you can see this clearly.
So now what happens when the menu bar wraps... well there there are 2 key problems...
1) The main issue is that when the menu wraps I can't think of a way to make the new MIDDLE horizontal line appear [shown in red in the 2nd image]
2) Multiple list items now don't need a right side border value. In the example 2 list items don't need a right side border. This could grow to 3 though for some screen displays.
Does anyone have any ideas for resolving this?
Note that I am trying to make the menu wrap naturally, not at fixed pixel break points as its so unreliable for something like this with different pixel density screens and font zooms in certain browsers.
On a website I am creating I have a navigational bar across the top of the page which I want to expand/animate vertically when hovered on. I am also using the :after pseudo element to create a ribbon effect. The problem is that I can't seem to make the "Ribbon part" move down when the menu item is hovered over. I have played about with it for a while now and I know it's something simple but I just can't figure it out.
I have the code on pastebin here: http://pastebin.com/FTf4pBEi
I increased the hover height and the ribbon seems to work. I'm not sure exactly what you're after since there are no submenu items.
http://jsfiddle.net/Kts5y/3/
.menu_item:hover {
height:150px;
}
So I have two div elements on my page, one directly on top of the other. One has visibility:hidden and the other is visible. I have a button that swaps their visibilities, each time it is clicked the visible div is hidden and the hidden div becomes visible. The divs both have heights which require the browser to be scrolled vertically, however their heights are different. If I make the shorter one the visibile one, I can still scroll as far down as i would be able to if the taller one were visible. So when the shorter div is displayed, there is a bunch of empty space beneath it because you can scroll down far past it. How do I make it so the window will only scroll as far as it needs to display the VISIBLE content? Thanks.
use display:none instead of visibility:hidden. Then if you want to show the hidden div again, just use display:block.
visibility:hidden retains the space used by the div, it just doesn't render it. In contrast, display:none effectively removes the element completely, including the space it would normally occupy.
This ought to help you out. visibility: collapse hides the div completely, while still keeping it on the page. Having them both should solve your problem.
visibility: collapse;
display: none;
I have a Radmenu which has 6 buttons in it which need to have equal spacing between them in my horizontal menu. I have managed to get this right using a percentage value but what if someone decides to add another menu button?
Is there a way of aligning my UL menu in the middle of my wrapping DIV and then spacing the buttons equally.
To top this off, the left button needs to be floated left and the rmLast button needs to be floated right, then the buttons needs to be distributed evenly.
Many thanks!
James
This is one of those problems that could be solved with a table in about 20 seconds.
Anyway, the following link might help:
http://joomlapanel.com/joomla-article/joomla-tutorial/247-fixed-a-liquid-columns-with-css-a-jquery-.html
This technique uses a combination or stylesheets and javascript (jQuery) to accomplish this.