I'm having some issue with a video div that will have a responsive width.
There's 3 images that need to stick to the video element
green (left side)
orange (right side)
red (bottom side)
The issue's is that
If I make it one big background image it will be stretched and the arrows lose it's aspect ratio.
How could I go about achieving this effects? Whilst keeping full responsiveness.
This presents an interesting challenge. I'm sure others have written something potentially more useful. I just wanted to practice my written communication skills.
I discovered a method to help with your question:https://codepen.io/viewtifulmoejoe/pen/yPvQmz?editors=1100
I'm putting in this code to fulfill the code requirement of SO.
<div class="viewer_component">
<div class="viewer_component__bgImg">
<img src="https://i.imgur.com/rQmri0X.jpg" alt="">
</div>
<div class="viewer_component__video">
<a href="#">
<img src="https://placehold.it/854x480" alt="" class="viewer_component__video--src">
</a>
</div>
</div>
I used this image to prototype a method: https://imgur.com/rQmri0X
The black outline serves as the imaginary frame around the video similar to the image you posted.
I used a placeholder image to imitate the video and used the dimensions of a traditional youtube video.
The method requires that the imaginary frame in the background image match the ratio of the video container. This is the only way I know to make the the effect work as expected without plugins/libraries/javascript.
Please let me know if this helps you with this challenge. Any questions, I'm happy to oblige.
A more scalable method would be to have multiple images saved out. 1 for the left/top/right/bottom of the video container and position them relative to the video. This method requires a bit of finesse.
This should not be too hard using either flexbox or display: table;. Take a look at the following example:
.container {
display: flex;
}
.container div {
flex: 1 1 auto;
border: 1px solid #FFF;
background: #CCC;
}
<div class="container">
<div></div>
<div style="flex: 0;">
<iframe width="300" height="100"></iframe>
</div>
<div></div>
</div>
The red bar at the bottom is just a block element. You could use background images to apply the image patterns.
A few ways to do it:
Use flexbox
Use display: table;, display: table-row, display:table-cell to build a table out of divs
Use tables
Related
How can I resize two images via a percentage of themselves (their native size) and have those images appear horizontally adjacent without space between them?
The trouble I am having is the containing divs appear to be sized according to the contained images original dimensions, not the resized dimensions. Setting display:inline-block; does prevent them from wrapping, but only if the width of the view is wide enough to accommodate the original image sizes. It does not reduce the size of the div. I feel like I am overlooking something obvious, but am too close to see it.
This code is based on this answer to this question. I tried it with figure elements instead of divs per the same answer and with many variations with no luck.
Some of the other answers I was not able to use because my solution constrained to an antiquated wiki html editor that filters out attributes and tags it does not like on save (e.g. srcset).
.img-box {
width: fit-content;
display: inline-block;
}
.img-box img {
width: 25%;
}
<div>
<div class="img-box">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div class="img-box">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
</div>
What I'm trying to do is put three images (this one: http://baseframe.co/a/img/animus.png) in a three column grid system with two layers.
I really struggle with putting divs next to each other so if anyone can explain it alongside the problem I'm having about, it'd be really helpful!
Thanks,
Aaron
EDIT:
Here is my code:
`http://codepen.io/aaronmtx/pen/PGdGyA`
You probably want to use display: inline-block. So...
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
<div>
<img src="...">
</div>
Where each <div> and <img ...> is styled...
div {
display: inline-block;
}
img {
width: 100%;
}
This is a very simple approach as you will likely want some additional styles to be applied. Constrain the width of each <div> to say 33% to get three equal sized images in a row. Then repeat the HTML so it will break the next three images on a new line. Applying a width of 100% to each <img ...> will ensure they don't spill out of their respective div containers.
Hope this is what you were looking for!
I want to incorporate an image that sits on top of an existing image (and maybe straddles two different divs. In general, I would just like to see what general html structure you'd suggest -- and any CSS rules I should include. I've spent hours trying to replicate the structure I wanted -- but after inspecting elements and trying to de-construct and re-construct I was unable to produce anything close to what I wanted.
Also, in the example provided below -- I noticed the overlapping image was placed inside a span tag. Any idea why? If you could just roughly describe how you'd approach this kind of design -- that would be awesome!
This is a pretty neat effect. This is one way out of multiple you can do.
The trick is to have a fixed height on your div with background, and inside it, another div that contains the image.
I've tried to keep height/widths pretty small so you can check them correctly on the embedded snippet. I've tried to keep styles as minimal as possible to recreate what you asked for.
Let me know if something like this does the job.
.first-image{
background: #eee;
height: 250px;
}
.container{
width: 95%;
margin: 0 auto;
max-width: 400px;
}
.container--padding{
padding: 1rem 0;
}
.second-image{
margin: 2rem auto;
}
<header>
<div class="first-image">
<div class="container container--padding">
<h2>I'm the cool title headline.</h2>
<button>Download</button>
</div>
<div class="second-image">
<div class="container">
<img src="http://placehold.it/400x190" alt="placeholder" />
</div>
</div>
</div>
</header>
In the example you're referring to, the images are not <img /> tags but <div /> overlapping on top of each other. Both of these <div /> have a background image.
There are multiple solutions to make 2 <div /> overlaps, you could use absolute positioning, float, negative margins, having the background in a parent <div /> with a height greater than the height of the background image, etc.
For example, using negative margins, if I have 2 <div /> following each other like:
<div class="bg1"></div>
<div class="bg2"></div>
I could simply add a negative top margin to the second one to make it appears on top of the first one to give an illusion of overlapping like:
.bg2 {
margin-top: -40px;
}
You can check an example using negative margin on this JSFiddle.
I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
I want to do this
How to do these with CSS?
Update
How do I align the cylinders on the same bottom, and how do I add the caption below them?
You have to split the cylinder image in three parts: The top, the middle (which will be repeated), and the bottom. Like this:
Call them top.png, middle.png, and bottom.png, for example.
Then you need three HTML elements, one for each part:
<div class="cylinder top"></div>
<div class="cylinder middle" style="height:300px"></div>
<div class="cylinder bottom"></div>
And the css:
.cylinder {
width: <width of the cylinder image>px;
}
.cylinder.top {
background-image:url('top.png') no-repeat;
height: <height of the top image>px;
}
.cylinder.middle {
background-image:url('middle.png') repeat-y; /* repeat vertically */
}
.cylinder.bottom {
background-image:url('bottom.png') no-repeat;
height: <height of the bottom image>px;
}
To change the height or the cylinder, you just have to modify the style="height:300px" on the middle element.
This solution will work in any browser, even IE6.
Here is a list of tutorials for the same
You can build one using a jQuery plugin as well
or you can try Google Chart Api
http://codepen.io/msvbg/pen/Lymko
This is just for fun. In pure CSS3, no JS or images. A better approach would probably be to simply use one of the many charting libraries out there.
Create a bottom image for the rounding.
Create a 1px high image for the pipe
Create a little image for the top.
Divide your image into different divs.
<div>
<div class="bar1">
<div class="bottom"></div>
<div class="middle"></div>
<div class="top"></div>
</div>
</div>
Now you can style this with absolute positioning and repeating background images. I don't think it is very easy to do with floating and all, because you have to work from bottom to top.
Doing this with pure CSS might be overkill. Of course you can use gradients, but you can't get that shadow on the bottom of cylinders with css only. I'm not sure how to do cylinders top with css either.
The easiest way to do that is to use good old background images.
You might consider using canvas if you don't want any images at all.
UPD: If you can use CSS3, you might wanna use multiple background images. That way you'll have only one <div> instead of three of them. Good semantics.
Take a look at http://icant.co.uk/csscharts/. It's easily customizable with your own styles and has a handy PHP script for generating the tables.
Well... it can be done with some "brute force".
First of all you should cut the bases of the cilinders and put them on a background of a div with bottom alignment.
then in another div with know and fixed height add two divs of same width that float left and have on the background,repeating on Y axis a slice of a cilinder. then control their height as you need it. Below the div that contains the other two you can add the captions.
Now you will have the cilinders of the same height. In order to "shorten" one you create another div inside it that has a certain height and a white background (repeating image or color).
ex {
<div id="chart"> <!-- this one has the bottom cut backgound -->
<div style="height:200px">
<!-- cilinder class has the background -->
<div class="clinder" style="height:100%"> </div>
<div class="clinder" style="height:100%">
<!-- this one has white bg -->
<div class="shorter" style="height:30px"> </div>
<div>
</div>
<div class="labels">
<div class="caption">
Indoor
</div>
<div class="caption">
Outdoor
</div>
</div>
</div>
It should work like this.
You can make cylinders with CSS3 by giving it a box-radius.
For example:
box-radius: 100px / 30px;
This will give you a box an oval look.
Just give it the desired width and height and it's done :)
Or use jqPlot as a jquery plugin. This plugin can make lots of graphs.