I have a div which I rotate inside a container. I have not been able to get the rotated div to "stick" to the left-most side of the container. Please see this fiddle to see what I mean.
You need to set the transform-origin (-webkit-transform-origin and so on) to top left, and add translateX(-100px) after the rotiation (so like this: transform: rotate(-90deg) translateX(-100px)). Otherwise you are rotating around the center point (set a background on the rotated element and you'll see).
Side-note, make sure the filter isn't applied in IE9 (use a conditional comment), because otherwise both will be applied and the result is a black box.
Updated fiddle
Related
I need to scale up a div which contains other nested divs
Using zoom property works fine:
https://jsfiddle.net/aq11qjro/1/
But I know as some issue on Firefox browser, so I would like to use instead CSS scale property
Using transform: scale:
https://jsfiddle.net/aq11qjro/
I cannot get the desired effect.
What am I doing wrong here?
To increase the size to 250%, you should use scale(2.5, 2.5) instead of scale(2, 2):
But more importantly. transform: scale scales the div and centers it in its original space. Because it is larger in size, it will be outside of the screen. You can add transform-origin: top left; to specify that the top left corner of the scaled element should be anchored to the top left corner of the original space.
Updated fiddle with correct scale and transform-origin: https://jsfiddle.net/aq11qjro/7/
You need to set the origin to top left
transform-origin: top left;
fiddle
(edit: I linked the wrong fiddle: corrected)
I got these settings.. The red is a image.
I used
marging-left: -8px;
on the image so the left goes outside his parent div. But what my question is how to counter the gap on the right side. (at the arrow in the second picture).
Easiest solution is probably to not assign a width to the element. Then you can use a negative margin-left to achieve your effect.
See this fiddle for an example...
I used a CSS triangle, but it should work with an image as well.
I'm working on a simple design here, but i have a little issue.
Please have a look at the final design example here: http://ronnieaarebrot.com/demo/cms/
On the menu to the left and right, you can see a small border going from the top to the bottom (following the height of the center content).
How can i do this? i was planning on having a background-image with the small border on both sides, but how should i "calculate" the height of the center content? or make the two borders follow the height of the center div. This is a bit hard to explain.. but check the image and here is an html example of how far I've come. http://ronnieaarebrot.com/demo/cms_html/
Any good solutions?
The easiest way would be to contain the centre content in a div element and use the border CSS property to apply it. You can then adjust padding and margins to butt the centre and side elements against one another. Given the model, it seems like some padding on the centre element combined with almost no margins on the sides would do the trick.
If you put overflow:hidden on the #page_wrap element that it will extent to the height of its contents (the left, center and right parts).
So you can put the backgorund image (1px height repeated vertically) on that element and be sure that it will extend all the way down..
So, I have a layout where I have a repeating transparent shadow element set to the background of my parent container element. Set atop this, and supposedly hovering over the topmost edge of this background, is supposed to be an image with a frame and drop shadow.
However, because the image frame continues the parent element, the background image also continues upward. This is visible as the vertical lines above the top edge of the frame's drop shadow. See screenshot below:
This happens regardless if I use a transparent image or CSS3's box-shadow property. Setting negative margins doesn't work to bring it out of the parent element, nor does setting positioning as relative or absolute.
Normally I'd try to "fake" the transparency effect by setting a solid image at the top edge of the image frame, but there's a repeating stucco pattern set as the body background, which means there'd be a visible, unnatural-looking edge. (Insert cursing re: repeating patterns here.)
Any suggestions how I could prevent a parent element's background from showing through a child element, or offsetting the image frame somehow?
Many thanks!
I figured it out.
I was modifying the WordPress TwentyEleven theme, which has #primary and #secondary divs as floats atop the main content div. In order to make the background extend all the way to the bottom of the content div (I.e., past the two floats), I had overflow: set to auto.
Since I don't need to float anything (It's one column with no sidebar now), I removed both floats and removed the overflow declaration I had. Tah-dah, totally works now.
If someone else finds him/herself in this issue, have a look at my jsFiddle, which I used to figure it out. Thanks to Paker for the suggestion.
Is there a way to let the repeating background 'start' fixed at the bottom of the div and overflow on the top? (the other way round than default)
Small example to show what I'm trying to accomplish. The red lines on the image below are the (horizontal) borders between several divs. The middle div is used as a transition between the upper and lower one, with a single non-repeating image. The background of the lower div consists of a repeating darker image with a paper hole, resulting in the paper border seen below.
Now the upper div (with sizable content) should have a repeating background image starting at the bottom and repeating upwards. This for maintaining the correct distance ratio between the holes instead of ending up with a smaller distance or even a partial hole in the 'paper border'.
Preferably it should be compatible with method 4 of equal height columns, but I don't see a problem there.
Just make sure you set background-position: right bottom; to the top div, and the background image should start from the bottom and "overflow" out the top.
Example in shorthand:
.my-div {
background:#fff url(my-bg.png) right bottom repeat;
}
Some reference in case you'd like to explore this further:
http://reference.sitepoint.com/css/background-position