The following example shows a div inside a div. The inner div is
position: fixed;
When I add
transform: translate(0px, 0px);
to the outer div, the inner div will no longer behave as fixed
Link to the example: http://dabblet.com/gist/1723937
So, does translate actually change the viewport? Can anyone help me to keep the inner div fixed using css, when the outer div has a translate style?
Thank you,
Felix
Here is an article on it:
http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
Hope you find it helps.
Related
I want to create this triangle in CSS.
http://acceptatie.foursites.nl/foursites/vierkant.jpg
But it must be a fluid triangle. How can i make this I try with skewY. But than the triangle is broken at the to of the element.
Thank you for helping me!
Instead of using borders to make the triangle you can use transform to rotate a div and just hide the overflow of the parent element.
If use transform instead of borders you can have box shadow on the div to :)
Tranform code for rotating a div
-webkit-transform: rotate(357deg);
-moz-transform: rotate(357deg);
-ms-transform: rotate(357deg);
-o-transform: rotate(357deg);
and as i said just hide the overflow on the parent element, in your case the body tag
overflow: hidden;
But here is an example on jsfiddle
Hope you can use it.
I have a small issue with which I'm struggling.
I need to align a element to the top of a percent div with bottom: 100% but I can't get it to align within the parent div.
So what I need is bottom: 0% to be aligned with the bottom of a div and bottom: 100% to be aligned with the top.
Any ideas?
EDIT:
http://jsfiddle.net/GmAEx/
I want the gray bar in that sample to be aligned to top: using 'bottom' 100%
It don't really understand what you mean with bottom: 100%, maybe you mean bottom: 0;?
Also see your updated example.
=== UPDATE ===
Thanks for the comment, I think now I know what are you want to get. The problem is, that bottom: 100% for the 'slider handle' means that it is completly outside the parent div.
Add a wrapper around the parent div which has the complete height minus the height of the slider handle and add a padding with height of slider handle. Replace the parent height with 100%. Move the with, background-color and margin-top to the wrapper too.
Also see bottom: 0%: updated example.
Also see bottom: 100%: updated example.
Presumably this is being dynamically generated, otherwise you'd just use top: 0 instead.
If this is the case, then you probably have something like:
child.style.bottom = y+"%";
In which case, it's a simple matter of adding:
child.style.marginTop = (child.offsetHeight/100*y)+"px";
I have certain generated shapes using css3. I want to display only some part of block eg: 25% of above or 25% of bottom. How do I achieve this?
eg: In http://jsfiddle.net/HNyHM/1/ ; I want to display only 25% from above.
Check this. http://jsfiddle.net/LB8mC/
Wrap you CSS shape inside a div, give it the height, width exactly how much you want show the shape. Then position the shape absolutely with respect to the wrapper.
Here is what I have used in fiddle.
.shape-wrapper {
position:relative;
overflow:hidden
height: 25px;
}
.shape-wrapper > div {
top: -25px;
left: -25px;
}
You can keep on changing the position of child div (top 25% or bottom 25% like you were asking using JS.
Adding a wrapper div might help. See http://jsfiddle.net/HNyHM/3/ for a start with fixed sizes though.
A more convoluted example of this question is here: child div height of 100% being ignored (a working solution is yet to be found)
Validating test case for my question: http://www.elucidatedbinary.com/tmp/layouttest_100percentheight.html. I want the #main div (yellow background) to expand to 100% of the height of it's parent div (#container).
My question is simple, can this be done without
Reverting to jQuery (yucky!) or
Reverting to tables (yuckier!)
I am yet to find a single example of how this can be done using the CSS layout model.
Thankyou.
EDIT: When I say "expand to 100% of the height of it's parent div" I mean expand all the way to beneath the footer. The header is supposed to leave a pink gap at the top.
try:
#main { position: absolute; top: 0px; bottom: 0px; }
i´ve got elements inside a containing div with a class.
i could use text-align: center on the div and that will center all elements.
how could i position the elements with exact pixels from the left?
(i dont want to use css on the element but on the containing div)
You can use padding-left on the container div. However this will augment the width of the div itself, since you're adding left padding to it. To solve this problem you should use margin-left on the inner divs, for example:
/* apply a margin left to all the divs
* inside div.container
*/
div.container div {
margin-left:20px;
}
The closest you could get with only the div is to play with the padding, but the correct solution would be to apply left/top to the inner elements.
Also, this belongs on doctype.com.
Set position: relative
Set top: ..px
Set left: ..px
I think this solution is prettier than setting margins/paddings.
(I'm typing this on an iPhone can't format it for ya)
Hello this is what your looking for
< div style="position:absolute;height:100px;width:100px;top:100px;left:100px;">
You can put that style on any tag you want Enjoy!
and to be into the middle use I.E
< div style="position:absolute;top:0px;left:50%;">