I am using display: inline-block; to keep some div's next to each other. I do not know why but on hover the div will move up. I think the amount it moves up has to do with the padding of an element in its non hover form(The .title class element). This is very odd and I cannot figure out why this is happening because all values are reset in the hover form. JSFiddle Note I'm using Sass so the css might look a bit weird
.option {
vertical-align:bottom;
}
Because you declare the elements inline, they follow the same vertical alignment rules as all flowing content of a page - sort of centered. Force it to a fixed position of the entire line and it's solved.
Adding the above line to the element I wanted to hover helped me solve this problem:
.example {
border: 10px solid transparent;
}
.example :hover{
border: 10px solid;
}
Related
I'm trying to build a pure-css mouse-over menu, where a DIV appears to the right of an item that is hovered. The basic idea is to use an absolute positioned DIV that appears on :hover
It will look like this (colors for debugging purposes)
Result
Relevant CSS
.hoverDiv:hover .hoverItem
{
background-color: green;
}
.hoverDiv:hover .hoverMenu
{
display:inline-block;
}
.hoverMenu
{
display:none;
position: absolute;
background-color: green;
left:100%;
top:0px;
}
This works great. However, if there are too many items I would like to have a (vertical) scrollbar. But when I add overflow-y:scroll, the hover effect also triggers a horizontal scrollbar.
See https://jsfiddle.net/g2g1zutb/12/ , the red section is 'wrong', the yellow section is OK, but has no scroll.
What would be the best way to solve this? Is it even possible in CSS only?
I have a series of 50% width elements that are next to each other, and I want to give each of them a 20px white border to separate them, the reason for this is that I have a responsive layout and I always want there to be 40px white space in between the elements.
I have a hover effect over them too, but when you use border on the main element, when you hover over the border or outline, you trigger the hover effect, which I don't want.
http://jsfiddle.net/keleturner/6PqJt/
Try hovering on the red border and outline (outline you need to hover in between the two blocks to trigger hover).
The only solution I found was to add a new element to wrap everything inside the .main and give it a border there, but that is very non-semantic and having to extra markup for something like this doesn't seem right.
the line
.main:hover .inside { background: blue; }
is wrong, it should be
.main .inside:hover { background: blue; }
http://jsfiddle.net/6PqJt/5/ EDIT - updated fiddle to fix bottom .main - also added some css to fix the hover of the second one
I have an issue with inline list elements.
The issue is that when I limit the width of my menu, which contains inline list elements, to put it onto multiple lines (for mobile devices) the right-side of elements is being cut off.
Here's a JSFiddle showing this: http://jsfiddle.net/vk2bK/7/
The menu in the orange with:
width: 210px;
background-color: #ffc20e;
In this JSFiddle the right-side of the 2nd list element is cut off. There's lots of space beside it in the div with the class 'menu', so it's not because of that. I assume it's because of some inline list property I'm unaware of.
How do I prevent the right-sides of inline list elements being cut off when the list expands onto a second line?
Simple CSS fix should do it.
You need to modify the li elements so they are inline block with a defined width:
.menu li {
display: inline-block;
width: 90px;
}
See it here: http://jsfiddle.net/vk2bK/21/
EDIT
I played around with it, see if this is what you want: http://jsfiddle.net/vk2bK/22/
ok i found a solution : JsFiddle
.menu a {
display: inline-block;
}
.menu a {
width:80px;
background-color: #7dc242;
line-height: 30px;
margin: 3px;
}
i removed the lists and made all elements inline-block u can edit their width and height if u need to.
More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix.
Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle.
.container-node {
margin: 10px;
background-color: #0f0;
}
.content-node {
margin: 20px;
background-color: #f00;
padding: 5px;
color:#fff;
}
.border {
border:1px solid #00f;
}
The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border.
I appreciate any help or documentation on this. Thanks
http://www.w3.org/TR/CSS2/box.html
Read carefully 8.3.1 Collapsing margins
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.
Fiddle
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
As already pointed out it is a "problem" with collapsing margins. A really good read about this issue can be found here:
http://reference.sitepoint.com/css/collapsingmargins
You could just add a padding of 1px and reduce the margin by 1 like so:
.container-node {
margin: 9px;
background-color: #0f0;
padding: 1px;
}
Applied to your problem:
http://jsfiddle.net/n65bX/1/
The .content-nodes margin doesn't work properly, it doesn't have an element to push from. With the border property you define the contour of the element(Based on the border, the margin can push from there).
To easially fix this, you can add a padding to your .container-node instead of the margin on .content-node:
.container-node {
/*margin: 10px;*/
padding: 20px;
background-color: #0f0;
}
Also you are creating your yellow border with a margin. I would suggest you to use also padding for this on the proper element:
.root-node {
border: 1px solid #bababb;
background: #ff0;
margin: 10px 0;
padding: 10px;
}
with proper i mean to the relevant element. You gave an yellow background to .root-node element, so you should also define the size of that element on that element.
It's far more logic to use it this way :)
When you want to create an inline spacing use padding, if you want it to go outside use margin.
jsFiddle
This might also be usefull: When to use margin vs padding in CSS
Update
So you may ask yourself: why isn't the element(.content-node) pushed away based on the parent(.container-node) element?
Well it's fairly simple why this happens. The margin still pushes the element(.content-node) away, only it's based on the wrong element(it is pushed from the .root-node). This is why your yellow border is bigger as the one with the border.
So why is it pushed at the root element?
To debug it even more; let's only set margin to the left and right of the .content-node:
margin: 0 55px;
jsFiddle
It seems that only the top-margin didn't work. And it indeed seems that the margin is collapsing.
I found this topic about this matter: Why does this CSS margin-top style not work?
So i would suggest to use padding so margins aren't conflicting with each other (paddings can never interact in the same 'flow' with each other).
I will try to explain this the best I can.
In the element containing the "container-node", there is no 'area' for that container to give margin to.
By adding sample text before/after , you will see the margin working. Likewise, if you give the "container-node" a border or even padding, you will then provide that element with something for the "content-node" to position against.
I created a fiddle that exemplifies the problem:
http://jsfiddle.net/vZtBb/
This is working exactly as I want it, but the problem is that in IE7 the absolutely positioned span (hover-tooltip-container) starts at the top of the line instead of at the bottom like it does in the other browsers. If you add a border to hover-tooltip-container, you can see this.
This is a problem because I want the tooltip to go up, but the anchor to still be exposed. You should be able to mouse over the tooltip as well, but the gap in IE7 makes this impossible.
If there is any way to get the hover-tooltip-container span to start in the same place on the line in IE7, IE8, and FFX, that would be perfect.
Javascript is not a solution.
The most simple thing you could do with the code you already have, is add a star hack to adjust the bottom rule within .hover-tooltip, for IE7.
.hover-tooltip {
display: block;
padding: 15px;
position: absolute;
margin: 0 auto;
bottom: 1em;
*bottom: 0;
width: 100%;
border: 2px outset #c0c0c0;
background-color: #f0f0f0;
text-align: center;
}
However, the double, nested absolute positions of .hover-tooltip-container and .hover-tooltip seem unnecessary.
I did something quite different (also renamed your classes, to much of a hassle to play with those looooooooooong name).
http://jsfiddle.net/vZtBb/16/
I removed the nested absolute positionning : They are the one causing the issue, since element in absolute position are taken out of context. So, 2 solo, nested absolute positionned element means that one element is in nothing (glitchy and really not wanted).
Instead of that, I placed your tooltip box in absolute, but made it start higher than the anchor by use of a negative position (top:-70px). It's sketchy a bit, but you should get my point.
Trying putting this after the .hover-tooltip div:
<div class="clear fix"></div>
and this css:
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block; }
html[xmlns] .clearfix {display: block; }* html .clearfix {height: 1%; }
I was able to solve the problem by having the "container" element float left and have relative position. This achieves the appearance of breaking out of containers but still provides a reference for the tooltip to go up from.