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.
Related
I'm trying to get more efficient with building responsive websites and since I'm using Bootstrap (not particularly important for this case - I believe), I was looking into Bootsnipp. I decided to view the site's source and noticed one thing I've never seen before: they did not set a height for any of their containers except for the whole page wrapper and the footer. This baffles me because everything falls into place with the website and it's super repsonsive. I understand the elements where they use Bootstrap's classes like "col-sm-4" and whatnot but does anyone understand the art of making the header, a content container, etc calculate heights without specifying in css? Can anyone explain this concept? I tried Googling but not sure of the correct keywords to find answers.
Also, if you need to see yourself, here is the link to their CSS.
Thanks
Understanding the Box Model is important. As an (overly simplified) rule of thumb, you can think of it like this; there are 2 primary types of elements: inline (span, b, strong, ...) and block (div, p, ...).
Block tags by default are width: 100%. That is to say they will naturally stretch to fill their horizontal area.
Inline tags you can think of as being constricting. They shrik to fit the size of their inner elements. This makes sense when you think of a bold tag: it is not unlike highlighting the text you want to be bold. It stays small to fit the content.
In both cases, though, unless you specify a height, both block and inline tags will shrink their height to fit their inner elements. Because of this, you can think of a website as being a bunch of elements stacked on top of each other, where the top of the page is the bottom of the "stack".
Here is an example of divs without specified heights having their heights changed by the size of the interior content. http://jsfiddle.net/S3q2C/ Notice all the divs have a border to easily see its relative size.
If you don't set an explicit height, containers will automatically grow to fit the content (respectively). Sometimes this is desirable, other times not (think overflow hidden). A possible reason why people use explicit heights in containers could be because of absolute positioning, or if they want to align a nested element that is 50px tall, with another that is 200px tall. An explicit height could also be used to maintain perspective say for a picture or other element (maybe a series of elements). While this answer is the end all be all you might be looking for, the key thing I'm trying to pass along is that an explicit height is used when needed, not all the time.
Here's a quick demo showing you two <div> containers, one with a height set, and another with no height.
http://jsfiddle.net/xrZ73/1/
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?
I am building a module to display html divs(pages) which are designed to in a later stage be printed out as A4s. The area where these divs are displayed is however to small to display the full width of the divs and thus the pages and their content need to be scaled down to fit within the display-area at hand.
The children of the a4-pages are styled with both set widths/heights and percentages so it would be a nice approach to use the CSS3 Tranform scale to scale the pages down just enough so that they can be displayed but this becomes problematic since the scale is done after rendering and thus creates an white area around the pages.
I'm using jquery to rescale the pages when window is resized and will also implement this when page is loaded.
How do i scale several divs within a common wrapper and also readjust the parent so that the scaled div is showed without any padding around it?
Edit: I've put together a simple fiddle displaying the issue http://jsfiddle.net/96jkU/
#toBeScaled should display over the full width of #displayArea but still be scaled to 0.5
If I understand the question correctly, you want the scaled div to sit in the top left corner of the parent div.
In that case, the problem is that the transform origin is set to 50% 50% by default. This is good for rotations (you typically want to rotate something around its center) but not really for scaling; your div gets shrunk down to the center of where it would originally be.
Solution: all you need to do is add
transform-origin:0 0;
(with the proper prefixes) to the style for #toBeScaled.
See updated fiddle.
I had an idea for a background but I don't know if it can be done, and if it can, what the best method would be. Just to let you into my idea, it's a grid of squares as the background for a page but when you mouse over one it changes color and slowly shifts back(I know how to do the animation portion). The grid is supposed to span the entire page, width and height, and overflow would be hidden. I'd also wish that it could re size itself if the page does
So I'm wondering if this can be done. If it can, how would I generate the grid?
I'm at a complete loss. Any ideas?
I would use <canvas>. Or maybe fill entire body with equally sized DIV's with height and width defined in percentages. Lets say that would be grid of 10x10 DIV's. Or you can create on -the-fly with jQuery as many DIV as you want (to fill whole height). You can float those DIV's to fill entire viewport, and if window is resized use media queries to arrange them. On hover, you can apply some animation on every DIV. Of course, you can put other elements over those DIV's.
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.