Disclaimer: This is some weird whitespace that glitches.
I was making a Image slideshow using html, css and js. But after I added images like this.
<div class="wrapper">
<div class="slides-container">
<div class="slide-image">
<img src="./public/assets/ironman.png" alt="captain" />
</div>
<div class="slide-image">
<img src="./public/assets/captain.png" alt="captain" />
</div>
<div class="slide-image">
<img src="./public/assets/blackwidow.png" alt="captain" />
</div>
<div class="slide-image">
<img src="./public/assets/blackPanther.png" alt="captain" />
</div>
</div>
</div>
</div>
.wrapper {
position: absolute;
width: 100%;
}
.slides-container {
position: relative;
z-index: 9;
height: 100vh;
transition: all 0.5s;
}
.slide-image {
position: absolute;
height: 100%;
}
.slide-image img {
height: 100%;
transform: translateX(80%);
}
But this is showing some weird white space after my footer. When I removes the Images this issue is fixed i.e. this issue is caused by images only.
But the actual issue is really confusing as this whitespace sometimes just disappears out, by just stretching the browser window and sometimes reappears out of nowhere. This really confuses me as it doesn't show any particular breaking point.
Here I did nothing to any code, but just refreshed the browser and did some stretching browser window. And now it's fixed.
And after few more stretches and after another refresh the whitespace reappeared.
What could be done. Please ignore the other part of the html, they're not any issue.
I'm so confused. Help would be appreciated.
I can't replicate the problem but I've had a similar issue in the past. I don't know if it's exactly the same but your images are absolutely positioned. That removes them from the document flow.
Try setting a background color on the wrapper and recreate the glitch. That'll tell you if you're seeing the wrapper as the white space. If that's the case (and maybe even if not) you could try putting something relatively positioned with 100% width and height before the images. They'll absolutely position themselves above it.
I don't like it as a solution but without recreating it myself I can only guess.
Related
I'm learning CSS and got stuck creating a layout that contains a header and an image that fills the rest of the screen. Using the following code, I'm able to achieve what I'm looking for:
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<!-- <div class="image-container"> -->
<img src="https://picsum.photos/500/300"/>
<!-- </div> -->
</div>
</body>
</html>
Now the problem is that I want to wrap the image element into a div as I'd like to position an overlay on top of the image. As soon as I nest the img within a div, the resizing doesn't work properly anymore. If the screen is wide, the image overflows to the bottom, creating a vertical scrollbar.
I've tried a lot of things, but nothing's worked so far. Can you explain to me why introducing the div (image-container) changes the layout and how to make it behave like the version without the div? That'd be great, thanks in advance!
EDIT:
I want the image to be displayed exactly like in the snippet I posted. It should be as large as possible, but only so large that the whole image is still visible and nothing is cropped. For a wide window, there should be blank bars left and right of the image. For a narrow but tall window, there should be blank bars above/beyond the image.
My issue is that as soon as I add the <div class="image-container">, the image always takes the whole width. For a wide window, I get scrollbars and can't see the whole image anymore. I'd like to know how I can get the image to scale like in the version without the additional <div>. I'd also like to understand why adding the <div> changes how the image is scaled.
EDIT 2:
Someone suggested to add overflow: hidden; on .image-container, but deleted their answer. This does in fact work (overflow: hidden/scroll/auto; work, overflow: visible; does not), but now I'm completely confused to why that's the case. I thought that overflow would control if overflow is visible, but wouldn't affect the size of the content being displayed. In this case though, it seems like the overflow property does have an effect on the size of the picture being displayed. That's weird and if anyone knows what's going on, please let me know!
Flex is already helping the image take up as much space as possible, so the height: 100% and width: 100% were causing the image to grow.
For getting something to appear on top of the image, I would recommend looking into position: absolute or position: relative
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.image-container {
display: flex;
justify-content: center;
}
img {
object-fit: contain;
}
<html>
<body>
<div class="container">
<div class="header">
<h1>Test Page</h1>
</div>
<div class="image-container">
<img src="https://picsum.photos/500/300" />
</div>
</div>
</body>
</html>
I have a relatively simple skeleton for a 1-page site.
The header area I'd like to stay put which I accomplished (at least in Chrome and my smartphone's native browser) by setting overflow:hidden on the overall container, then setting overflow:scroll to the scrollable area.
But then I went to double check this on FireFox and basically ran into all sorts of issues. Troubleshooting resulted in a mind-numbing amount of things falling out of place.
<div id="mainBlock">
<div id="tabContent">
<div id="one">
<h1>one</h1>
</div>
<div id="two">
<h1>two</h1>
</div>
<div id="three">
<h1>three</h1>
</div>
<div id="four">
<h1>four</h1>
</div>
</div>
<div id="bottomBlock">
<div>hellow</div>
</div>
</div>
with these styling rules
#mainBlock {
overflow-y: scroll;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-flow: column;
align-content: center;
align-items: center;
}
#tabContent {
height: 100%;
width: 100%;
}
#tabContent > *{
height: 500px;
}
#bottomBlock {
background-color: #444;
height: 24px;
width: 100%;
}
When working, this results in the head area staying put while allowing for the rest of the content to scroll, with bottomBlock appearing at the end of the scrollable area.
However, in firefox, while scrolling is possible bottomBlock is stuck at end of initial viewport. As in if the viewport height is 900px, bottomBlock is seemingly absolute positioned at 901px.
If I move bottomBlock to within tabContent, then it works as it should.
But this issue has given me far too great of a headache to simply let it go.
I'm not sure how to make a fiddle of this, since the scroll bar is the main issue here, and fiddle's render box also has one.
Any help is greatly appreciated!
It works for me in firefox 45.0.1 if you remove the height:100% from #tabContent completely. What do you need it for? As the last block element #bottomBlock will always be on the very bottom.
Maybe it's a wierd css overriding/priority issue. I could imagine FF can't calculate the overall content height correctly because of the competetive #tabContent > * and #bottomBlock selectors.
Did you also try making tabContent as a class? Sometimes that solves strange css inherit or override problems (for me).
I am currently trying to use svg files instead of images for modern browsers on a new fluid site. The idea is to use an SVG as a background image on a fluid div which can then be changed on hover and we can use modernizer (or similar) to fallback to the use of img backgrounds for unsupported browsers.
In theory this is all fine however on certain browsers (particularly Firefox) the right and bottom edges of the svgs have some strange pixelation at certain sizes which doesn't happen for imgs.
So if you view http://jsfiddle.net/deshg/xuq6812g/ you can see a grid of 4 x 25% columns each with a div or img (that is 100% width). Each one has either a div with svg or img background or an img element with the svg/img as the src. If you view this in FF and make it bigger/smaller you'll see at certain sizes the degradation i'm talking about. You can also see this in the image below (the areas circled in blue are the degraded bits which you can see occurs on the svg but not the img).
Can anyone shed some light on why this is happening and how to prevent it as it makes SVGs largely unusable in this way if it can't be fixed
CSS
body, html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.container {
float: left;
width: 25%;
height: 100%;
}
.container img {
width: 100%;
}
.container div {
background-size: cover;
width: 100%;
padding-top: 100%;
}
HTML
<div class="container">
BACKGROUND SVG:<br>
<div style="background-image: url('https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg');">
</div>
</div>
<div class="container">
BACKGROUND IMG:<br>
<div style="background-image: url('https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png');">
</div>
</div>
<div class="container">
SVG IN IMG TAG:<br>
<img src="https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg" alt="">
</div>
<div class="container">
IMG IN IMG TAG:<br>
<img src="https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png" alt="">
</div>
From working with vector images for years and years, when you crop them accurately, yet they need aliasing, then the crop looks odd -- flattened at the curves. So circles, text, logos, and so forth need some extra edge in the view box. Here I've add a lot more, but you get the idea.
DEMO with before and after: http://jsbin.com/buquw/1/edit
ORIGINAL -- cropped accurately, but too close, because this image needs aliasing.
NEW VERSION -- you don't need this much, used to exaggerate the situation:
I have a thumbnail image and another smaller image which overlaps the thumbnail image. But the padding changes for the smaller overlapping image as I zoom in and out and the problem exist only with the CHROME browser. Its working fine with IE and firefox. I tried using percentage to set the padding values for the smaller image but the problem still exist.
Here are the images.
This is the HTML
<div class="car-item">
<div class=" car-image">
<img src="/~/media/images/thumb.ashx" alt="Image 1" />
</div>
<div class="car video">
VIDEO
</div>
<div>
position for car video is absolute
position for car item is relative
and for car-image is static
You will have issues at times when using percentages. This is a good example of when to use absolute positioning.
I have no idea what your code looks like so here is a basic example of how to accomplish what you have pictured above with absolute positioning. I used a span tag instead of an additional image tag but it should work all the same.
You might have to modify your HTML and CSS a little furthor to get it to work in your environment.
http://jsfiddle.net/6C8gT/
Here is an updated jsFiddle (http://jsfiddle.net/6C8gT/1/) that uses your markup and another one with reduced markup (http://jsfiddle.net/6C8gT/2/). You don't really need those DIVs unless you have plans for them in the future.
I just did what I have posted below but modified the CSS to match your HTML. You'll have to check out the jsFiddles.
HTML
<div class="container">
<img class="thumb" src="http://lorempixel.com/300/200/" />
<span>Video</span>
</div>
CSS
.container {
position: relative;
}
.container img {
display: block;
}
.container span {
color: white;
background-color: black;
padding: 5px 10px;
position: absolute;
left: 0;
bottom: 0;
}
I have a page where the header is a gradient and on first load everything looks perfectly fine. When I refresh the page the gradient gets messed up and it seems like it puts in 2 gradients (1 really small) example below:
The first one is after a reload and the second is on first hitting the page.
The small gradient on top that I don't want is the same height as the padding in that div.
I've also noticed that imgs get resized on reloads like this as well and I've solved that by setting the height in css. I can't set the height in css because the height should be dynamic.
Can anyone explain to me why this might be happening and a way to solve it? I would really prefer a non-javascript solution because I already know how I might solve using jquery.
Some Code:
HTML:
<header>
<a id="settings-gear" href="#"><img src="/img/gear.png"> </a>
<div id="logo">
<img src="logo" alt="logo">
</div>
</header>
CSS:
header {
background: -webkit-linear-gradient(top, #F0F7F7 0%,#B8D9DD 100%);
max-height: 122px;
padding: 12px;
position: relative;
display: block;
}
header #logo img {
display: block;
margin: 0 auto;
}
header #settings-gear img {
height: 33px;
}
Well, it's difficult if we can't see a link or example, but the first think that comes to my mind is set the background as image and tell it to fit only the content with background-origin:content-box;. Try put that line into the header properties, and hope it helps. Note that the background-origin property don't work in IE 5, 6, 7 or 8...