I have got three divs on a page, all floating side by side. With the css scale method, I'm scaling the middlemost div to 0.5. This works well.
The only problem is that scaling the div won't effect the position of the other divs. Seems like the scaled div still has an invisible container with the original scale. The desired result is that after scaling, the margins stay the same.
I added an example: http://jsfiddle.net/yxYdd/3/ (In real, the middlemost div is filled with lots of other elements)
Is there a neat way, without messing with margins etc., so that scaling will effect the positioning of other divs?
That's just how CSS 2D transforms work by design, unfortunately.
What you really want to do is avoid using CSS transforms for this example, and instead use another, simpler implementation.
I've done this for you here: http://jsfiddle.net/yxYdd/4/
The only change you really need is:
.scaleDiv{
width:75px;
}
Which does produce the effect you wanted. Isn't that funny? :)
Related
I want to make a carousel-style widget that is built with 3 images and two buttons.
My problem is that this whole thing needs to be responsive and scale up (to some maximum) and down, while keeping the relations between the images.
The shape is as follows:
The pixel sizes of the images are all known upfront, and any relation that is needed can be known upfront (e.g. the amount needed to move the green and blue boxes since they are not vertically centered).
I am not very experienced with HTML/CSS, and I managed to get this shape with flexboxes and translations, but I could never manage to get it to scale correctly with the rest of the page.
I don't quite understand if this is even possible with CSS, since it requires some sort of absolute positioning / translations / etc. that ruin its box model.
The next thing I thought of trying is to use a canvas instead and draw the images myself, while letting the canvas width to stretch as it wills (up to a maximum) while I control the height in JS, since I know the aspect ratio of the widget.
I would really prefer a simpler HTML/CSS solution though.
I suppose I could do the same without a canvas - a container that is controlled by CSS for width, but I control its height, and the images/buttons could all be absolutely positioned in it, but that's kinda weird as well.
Your goal can be accomplished by using percentage-based width values (heights being auto or unset) for the images at different CSS breakpoints (e.g. Bootstrap's listed at https://getbootstrap.com/docs/5.0/layout/breakpoints/). Practically from an aesthetic standpoint, I suggest setting buttons to pixel values (again, differing at breakpoints). Either a container (like a div element) or the body element will be the parent element to which your images and buttons scale.
To accomplish overlapping of images (and horizontal alignment of buttons mentioned in the next paragraph), for all elements you'll need to set z-index, which indeed does require either absolute or fixed positioning. Given your elements will be either absolute or fixed in position, you could modify vertical positioning using the top property.
Give the three images auto left/right margins. Set the buttons to the same z-index as the green image so that they'll rest against the green image. Give the L button a left margin of auto and right margin of 0. Give the R button a left margin of 0 and right margin of auto.
No JS required with this solution, as you'd prefer.
I have a <div>, inside of which some complicated content is rendered with a scale transform applied. My problem is that the <div> takes up the same space that it would have taken even if no transform was applied. I've made a jsFiddle snippet to illustrate what I mean.
I think I can understand why the behavior is like this, but is there any way to make it so that the container takes as much space as its content with scaling (and other transforms, if possible) applied?
I should note that explicitly setting the width and height of the <div> outside affects the contents of the scaled text (and this is not desired behavior in my case). Putting the scaled content in an <iframe> is something I'd like to avoid.
Without resorting to Javascript, there isn't any way to do this, I don't think. CSS transforms don't affect layout flow for elements near the transformed elements, they only change the coordinate system within that element; so children are affected, but not parents or siblings (MDN has some more detail on this).
There's a great answer here that might be a JS-based partial solution for you: https://stackoverflow.com/a/10913299/2524360
I don't know if this answers your question, but it doesn't seem to accept 0 as a value. The browsers scales from 1, as in 100% to e.g. 4, or 400%.
transform:scale(1,4);
I'm doing a scaleY on a div, and though visually it is working the way I want, the page is still acting like it is it's original height. I'm shrinking it, and don't want empty space above and below it. I know I can probably hack this together with negative margins or something but I'm wondering if there is a better way like I don't know about to have the page naturally collapse into the freed up space from the transform.
Thanks!
CSS transforms do not change the layout of the page, so all elements with transforms will take up as much space as it does without a transformation on it. That is the beauty of transformations. If you want to shrink the element, and have the page change then you will want to use the height CSS on the element.
I'm trying to create a 3D Carousel using CSS3 (transform).
But, there is a problem.
Look at the pictures below:
The first image is result of my current code (which likes looking carousel from inside, also with bugs :P ), but I want to get something like second image. (looking like a carousel from outside, and bug free!)
This is my code.
I can use negative values of degrees for this purpose; but if I do that, the height of left and right divs will be bigger than center div. Like this.
How to get something like the second image? Which CSS Transform codes should I use?
here is working Demo of what you want
EDIT:
In order to fix the height issue on applying the negative transform rotate, you need to give -ve translation along z-axis and also -ve and +ve translation along X-axis to left and right elements respectively.
EDIT:
well there are lot of tutorials explaining the use of css3 translation
I am pointing to one of those
http://www.w3schools.com/css3/css3_2dtransforms.asp
You simply need to reverse the perspective angles; for a1 you needed rotateY(-20) and for c1 you needed rotateY(20):
http://jsfiddle.net/thundercracker/upEC6/4/
EDIT:
Seeing your comment; the height of the div is going to be larger because the edge of the div is virtually closer to you. If you want the divs to appear to be the exact same height, you need to reduce their initial height a few pixels, or increase the height of the center div to 'zoom' it, like the edges of the rotated divs are 'zoomed in'. When the rotation angle is reversed you don't notice the height difference because it is small.
EDIT:
In addition the far edges of the div slightly smaller than the closer edges; if your divs were long enough one edge would be the height of the screen and then other would be a tiny point.
How positioning can save our time if we use in place of float on some place in layout coding?
How we can judge where positioning would give better result?
For example (i added just for example) if this is a design
So far i only use float + margin + padding, now if i can mix positioning and save time and get pixel perfection easily then float.
Guide me
Thanks in advance.
Update 1:
these are common elements of website. should i use positioning for any of them?
The Header
---logo
---serch box
---The Navigation Menu
---top links
---Breadcrumbs
The Text Area
---Paragraphs
---images( left , right or center align)
---Tables
---vertical ordered and unordered list
The Sidebar
---vertical ordered and unordered list
The Footer
---copyright
---Important Links (horizontal list)
Form elements
Update 2:
Does positioning have any
Compatibility issue(including IE6) than float?
Is positioning is only good for fixed
width design or it's good for both
liquid and fixed?
For that layout, you don't need to use nothing else than floats, margins and paddings. Positioning (relative, absolute, fixed) should be used only in 'special occasions', eg. when you want to lift an element out of the document flow and place it somewhere it would be otherwise hard to place.
You won't save any time and won't get any more 'pixel perfect' results with positioning. You should be able to do that using traditional methods.
The only reason you should use absolute positioning in that layout is because of the RSS icon, that's a 'special occasion' I was talking about.
Looking at the design there is minimal need to using positioning, the only I can see it may be need is t give the overlapping effect on the RSS icon but even then you could do some trickery with background images to give the effect that it is overlapping.
On my sites I use position if I need to give the user the experince that elements overlap outside of the box model. Otherwise you should be fine floating, padding and using margins.
One tip howerver if you are using position:absolute; make sure the parent element has position:relative;