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/
Related
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
Without fixing the widths of any of the elements, I would like the parent div element to ignore the text when setting it's width. I want the element's width only to be affected by the width of the image.
<div>
<img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/>
<p>I want this text to wrap once this paragraph element reaches the width of the image.</p>
</div>
div {
background: green;
display: inline-block;
}
my jsFiddle
Any advice is greatly appreciated
Change display property of div to table-caption
(Tested in firefox and chrome)
Updated jsfiddle
Here's the best that I've found:
http://jsfiddle.net/y8Qnd/3/
What I've done is to take the p tag out of flow with position: absolute so that the containing div has the width of just the image. Then, have the p tag inherit the width of its parent, the container. This does not fix the width of the p tag, and is completely cross browser.
This would mean you would have to move up the DOM tree, as you want the image to determine it's parent width. Moving up the DOM tree is unfortunately not possible (yet).
As an alternative, you could position the text absolute, to lift it out of the document flow, and therefore not influence the width of it's parent div. This however would also mean that the height does not get influenced, which is probably not what you are after. You could mimic the correct height by repeating the parent background, but the content underneath would not get pushed down, so that is also not really an option I think. I set up an example anyway: http://jsfiddle.net/y8Qnd/2/
The only option I can think of is javascript. Get the width of the image and apply it to the parent container. In jQuery (I will probably get bashed for using jQuery for such a trivial thing, but I am just not used to writing 'old school javascript' anymore...) it would look something like this:
var $wrapper = $('div'); // you will probabaly want to use some id or class here
var width = $wrapper.find('img').width();
$wrapper.css('width', width);
and an example: http://jsfiddle.net/y8Qnd/6/
With position: absolute, you place an element by defining one of it's corners (often using the top and left properties). Is it possible to place it by defining it's center? (without knowing it's width/height?).
I have answered a similar question with this jsFiddle link
Link to the similar question with my answer: Position the center of an image using css
You can then use top/left coordinates using pixels, and it will use the center of your object no matter which width/height and this may be dynamic fit to content. One problem may be you need to set some z-indexes and styles so the other wrapper divs won't bother the rest of your content, this may be a drawback to use this approach.
The solution lies in the fact to use a wrapper div, with the real positions, and within that another wrapper div containing styles: position: relative;padding-top: 25%;margin-top: -100%;margin-left: -100%;. The margin-left style will apply easily, but the margin-top needs the padding, hence the extra wrapper div.
If you want another approach, you will have to use Javascript I suppose.
I was wondering if there's any way to make a child more transparent than it's parent. I need to make a div show through more than the div it's contained in, any way to achieve this with CSS?
This is what I'm aiming for: I have a background with 0.6 opacity, the element on the left has 0.8, so it's darker, but I need the one on the right to be more transparent. Setting less alpha to it than the parent doesn't work, it just matches its parent.
It can't be done using CSS 2, but can be done using CSS 3 http://www.css3.info/introduction-opacity-rgba/
If you used rgba for backgournd-color for the parent, inside elements will not get opacity.
If you don't want to use css3, you have no way except putting the child outside the parent and play with positions.
Depending on what your situation is, you could try any of the following:
Give the child position:absolute and use CSS to move it to the location you want in front of the parent div.
Convert either the child or the parent into an image, then use opacity on the other as necessary.
Use CSS 3: http://www.css3.info/preview/opacity/
Compatibility of the CSS 3 technique in various browsers: http://caniuse.com/css-opacity
I'm trying to make a box with rounded corners where the height and width of the div depends on the content, so it's automatically adjust to it...
You can see the example here: http://pastehtml.com/view/1duizyf.html
The problem is that i can't get the "test_mid_left" (black background) and "test_mid_right" (turquoise background) to inherit the height from the "test_mid_center" (green background). I have tried height: 100% and auto, but none of thoose work. So how do I get them to inherit the height from the content?
(The reason why I have used "min-height: xx" in the left and right content on the example is just to show which boxes I am talking about)
As already mentioned this can't be done with floats, they can't inherit heights, they're unaware of their siblings so for example the side two floats don't know the height of the centre content, so they can't inherit from anything.
Usually inherited height has to come from either an element which has an explicit height or if height: 100%; has been passed down through the display tree to it.. The only thing I'm aware of that passes on height which hasn't come from top of the "tree" is an absolutely positioned element - so you could for example absolutely position all the top right bottom left sides and corners (you know the height and width of the corners anyway) And as you seem to know the widths (of left/right borders) and heights of top/bottom) borders, and the widths of the top/bottom centers, are easy at 100% - the only thing that needs calculating is the height of the right/left sides if the content grows -
This you can do, even without using all four positioning co-ordinates which IE6 /7 doesn't support
I've put up an example based on what you gave, it does rely on a fixed width (your frame), but I think it could work with a flexible width too? the uses of this could be cool for those fancy image borders we can't get support for until multiple background images or image borders become fully available.. who knows, I was playing, so just sticking it out there!
proof of concept example is here
The Problem
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
A Potential Solution
Now, I think the following article resembles what you're trying to do. Take a look at it and see if you can solve your problem.
Equal Height Columns with Cross-Browser CSS
I hope this helps.
The negative margin trick:
http://pastehtml.com/view/1dujbt3.html
Not elegant, I suppose, but it works in some cases.
You need to take out a float: left; property... because when you use float the parent div do not grub the height of it's children... If you want the parent dive to get the children height you need to give to the parent div a css property overflow:hidden;
But to solve your problem you can use display: table-cell; instead of float... it will automatically scale the div height to its parent height...
Most of the times, the Previous parent has a heigt manually set, so you can use that value as reference, no other dirty tricks will be needed, and if the number is not the same for any reason maybe a comment can be added with the original number so in case you need to change it, by searching at the all the values, this one can be adjusted or even changed, in the time someone resolve this one for us.