I have this fiddle : jsfiddle.net/kxmzqbtL/
How can I make that the elements above other elements dont move these under them.
#fiddle : when hovering first three childs, it moves 4th and 5th child to fix its hover /width/ effect. How can I make it overlay these elements insted of moving them? Or other way to make it looks better, like scale first element up instead of down.
Thanks.
Add to the .item:hover:
margin-bottom: -15%;
z-index: 1;
Negative margin will make items placed below go up instead of down (so in this case it will negate added height and items will stay in the same place).
Fiddle: http://jsfiddle.net/kxmzqbtL/2/
Related
I know this question has been asked multiple times, but I can't get it to work.
I have 1 screen container, in which I want 2 div's (1 content, 1 menu) next to each other.
1 div is positioned relative,
left:-830px.
So I can create a slide in effect using overflow:hidden and jQuery.
Here is a JSFiddle: http://jsfiddle.net/XWsS8/4/
Does anyone know why this isn't working?
I've seen more examples using inline-block which causes two div's to be next to each other, why does it not work in my example?
Thanks in advance :)
P.S. I don't want to use float
Has nothing to do in this case with inline-block but rather that you have #menu as position: relative instead of position: absolute. See fiddle with change.
A position: relative still causes the element to occupy the same space in the layout as it would if it were static (here's a good explanation), it just shifts the element's display rendering by the adjusted amount (-830px in your case) relative to itself (where it would have been if static).
So the second element in your case is being displaced by the "void" left from where the first element is still taking up layout space, but has been shifted outside it for rendering.
Another solution would be to keep the relative on #menu and set margin-left: -830px on the #content div to "pull" it over the space the #menu layout is taking up, as seen in this fiddle.
Both solutions offered, when the menu animates, will "overlay" the #content assuming #menu is given a z-index: 1 (see 1st solution fiddle and 2nd solution (with menu at -430px), whereas if you wanted the second solution offered to "push" the #content down below the menu on animation, then you would also have to change the margin-left back to 0 at the time of menu animation, like this fiddle shows.
I am having two div's next to each other, first one will be rendered on Ajax call and will be filled with more content, so its content height is not known.
I want the second div to always appear at the bottom of first div regardless of the first div's height, I mean: after the Ajax call rendering completes, the second div should be positioned immediately under the first div.
Will something like this work?
Note: I am not applying the below CSS. I gave it as an example.
.seconddiv
{
position: relative;
top: (top of first + height of first);
}
you don't have to set anything.
this is the default behavior of block elements: to be stacked one after each other.
sometimes, less is more.
Here is a Working Snippet for you to try. [notice the empty CSS panel except outlining, that is for you to see that the positioning works]
Try this, it worked for me
keep the position of the dynamically generating div as static
position:static
Now give the position property for next div as absolute
position:absolute
and then give your "top" or "margin-top" whichever you are trying with
If I have an item with float: right and for whatever reason the item has appeared on the next line for reasons such as too much content to the left of it, or the window is too small; how do I select items which match this case?
I wish to do this as the parent item uses a background image which looks fine, but it the floated item falls out it does not appear visible as the color and background-color are both the same.
is this at all possible?
The only way I see is to use javascript and detect relative position of the floated div. If this one has a y coordinate greater than 0, it has probably fall. Add a css class or whatever behavior you want in this case.
I'm hiding an inline-block element inside of a parent div with overflow:hidden. I am then offsetting the original child element using the left property (negative), so it is hidden. I can make it reveal itself back into the parent using CSS3 transitions, but I'm having to give that negative offset a fairly large number (the width of the parent div), making the timing depend on how much text there is. I need it to be perfect (for reasons not explained here). It would be perfect if the left value always matched the width value of the inline-block element.
Is there any way to find the width of an inline-block element and apply that value to its left offset in CSS3?
I have a feeling I'm going to have to use jQuery, I'm just hoping someone here might have a wonderful solution. :)
Example here:
http://jsfiddle.net/RD7Yv/1/
try left:-100%, This should work.
EDIT:
fiddle
If you just want to "reveal itself back into the parent using CSS3 transitions", it seems like it would be easier to not move the element at all and just animate it's visibility in place. For example, here's animating it's opacity:
http://jsfiddle.net/jfriend00/BqmQK/
All, we use JS for is to add/remove a class from the element and CSS3 does an opacity animation for us. This way the element can be left it it's original position and we don't have to do any size or position calculations.
This same animation can even be done with no javascript if it is triggered by hover.
If you want to see the image sliding into place, then you can set it's initial position to:
left: -100%;
and animate it to:
left: 0;
You can see that working here: http://jsfiddle.net/jfriend00/P2H4Z/
I have a table with many rows.
I want to have an on hover effect on the rows. When someone hovers over a row a popup div displays with some additonal information about that row.
I was planning on doing this with a div and on hover making the div visible/invisible.
Now my problem is with the html/css.
How do I make the table with a div that appears on hover but does not affect the look of the table.
I was thinking z index, with position relative. But I cannot get it working.
You should use position:abolute; top: 10px; left: 20px; z-index: 1 for the div and position: relative for the tr. (top and left are only assumptions. use these for positioning the div relative to your row)
Relative positioning the row, holds it in the context. Absolute positioning the div makes its position absolute to its parent (here the row). If the row doesn't have relative the div would be positioned absolute to the body or an parent element which has set a position.
If the elements have the same z-index then the browser will display them in the order they appear in the html. So you don't have to set z-index at all. You can do something like this DEMO. (Hover over the top left cell, or the 3rd from top in the second column.) So long as the divs you want to display are below the table in which you wish to highlight.
Is it important to use only html and css in your project ? If not you could handle the hover functionality over to Javascript.