At this website, i make a full screen slider.
Website link
It works well on Chrome and IE, but on firefox, it shows only 50% of the screen.
This is the code i used:
.q_slider {
width: 100%;
overflow: hidden;
position: relative;
z-index: 10;
}
.carousel-inner .slider_content_outer {
position: relative;
height: 100%;
width: 1100px;
margin: 0 auto;
z-index: 12;
}
Did i do something wrong?
I think if you remove the following negative margin top values it will work...
Related
I have the following setup:
HTML
<div>
<img src="https://placehold.it/300x300" />
</div>
CSS
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
img
{
height: 100%;
}
When I load the page it renders correctly. However, if I adjust the height of the browser, the left side of the image remains in place while the image expands outside (or shrinks inside) of the viewport.
If I refresh the page then it immediately redraws correctly. The issue appears to be present in all browsers.
I found the following question but not sure if the issue is quite the same. The non-JS solutions didn't work; I didn't attempt any of the JS suggestions.
Does anyone why this might be happening and know of a fix (using CSS) to make the div/image redraw when I resize the browser?
Its because the browser doesnt redraw the div as it does not know it suppose to be 100% wide.
Try this setup:
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
width:100%;
}
img
{
height: 100%;
position: absolute;
top: 0;
right: 0;
}
Check out this fiddle: https://jsfiddle.net/ash06229/z55827t9/
div
{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
img
{
max-height: 100%;
max-width: 100%;
}
This might have been answered but I am really struggling to describe this issue.
On my website I have map div, a transparent slider div on top and non transparent info div below the transparent slider.
<div id="map"></div>
<div id="spacer"></div>
<div class="info"></div>
The css allows the info div to be slid over the map.
html {
overflow: hidden;
height: 100%;
}
body {
overflow: auto;
position: absolute;
height: 100%;
width: 100%;
margin: 0;
}
#map {
position: fixed;
width: 100%;
height: 90%;
}
#spacer {
width: 100%;
height: 90%;
}
.info {
z-index: 999;
position: absolute;
background-color: white;
width: 100%;
min-height: 100px;
box-shadow: 0px 0px 10px slategrey;
}
Here is a picture of the undesired effect.
It shouldn't be possible to pull the sliding div away from the bottom of the browser.
Is there a html & css solution?
I think what you are looking at here is a browser drawback, which can be overriden in safari under ios by using a non-standard webkit rule called -webkit-overflow-scrolling , you can find information about it here on MDN. I have ran into this issue numerous times in the past, but I can't remember finding a fix for it.
You can try this simple "hack" to bypass it, but I don't think this is a good idea though:
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
You can find more information about this issue here.
I have an image that could be smaller than the user's browser, or larger, vertically centered in a div. I'd like a CSS-only solution, but based on the amount of research I've done I am beginning to be skeptical.
More precisely: if the image is smaller (height-wise) than the browser's height, it should be vertically centered -- if the image is taller than the browser's height, there should be a scroll bar to see the rest of the image. This works perfectly in Firefox, but not in Chrome -- and I cannot figure out why.
On Chrome, the image is vertically shifted above the scrollbar so it is still being centered, even though it is too tall. Any ideas? Minimum browser requirements is IE9+, Firefox, Chrome, and Safari (all latest versions of those).
/* This element just fills the entire browser window */
.container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
/* This has a little bit of horizontal spacing, but is centered and takes up the full height of the screen. */
.item {
position: absolute;
min-height: 100%;
top: 0;
left: 0;
overflow-y: auto;
text-align: center;
width: calc(100% - 200px);
margin: 0 100px;
}
.item img {
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<div class="item">
<img src="dummy.jpg">
</div>
</div>
So, I've got something working -- but it still has one problem (reduced a bigger problem to a smaller one).
/* This element just fills the entire browser window */
.container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
/* This has a little bit of horizontal spacing, but is centered and takes up the full height of the screen. */
.item {
position: absolute;
height: 100%;
top: 0;
left: 0;
overflow-y: auto;
text-align: center;
width: calc(100% - 200px);
margin: 0 100px;
}
.item-box{
background-image: url(dummy.jpg);
background-position: center;
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
min-height: 100%;
}
.item img {
max-width: 100%;
opacity: 0 !important;
max-width: 100%;
}
<div class="container">
<div class="item">
<div class="item-box">
<img src="dummy.jpg">
</div>
</div>
</div>
This works as the original problem was posed, in that now if the image is smaller, the box will be centered, but if the image is too tall there will be a scrollbar. No cutoff in non-firefox browsers. The new issue is that the image is not entirely selectable, because the invisible image is fixed to the top instead of centered (the original problem), so you can't "right-click to download image" or any of the stuff that the entire point of using an img tag, was meant for.
Any further ideas on how to use this solution?
I can't seem to center my navigation or footer in IE8.
I had to float my navigation just to get the dimensions to show correctly in IE8.
I'm using divs for the footer and nav because I know this language isn't going to be translated in IE8 and I'm still having issues. Below is the CSS that I am using for my footer, which works fine in Firefox and Safari. Also, I need this to be stationary so it somehow needs to involve margin: 0 auto; my issue can be viewed at http:www.vslateart.com/index.html (homepage alignment)
.footer {
display: block;
margin-left: auto;
margin-right: auto;
width: 200px;
}
Is there any sort of workaround so that this can translate to IE8?
Similar question: Using "margin: 0 auto;" in Internet Explorer 8
Your code looks perfectly valid.
Are you missing a doc type at the top of your page? Without the DOCTYPE, IE automatically goes into Quirks rendering mode.
<!DOCTYPE html>
Failing that - have you set the width of your parent to be greater than the width of .footer?
this code center a div to center (fiddle):
.footer {
display: block;
margin: 0 auto;
width: 200px;
}
I think you want to do this
.footer{
position: absolute;
display:block;
width: 200px;
margin-left: -100px;
left: 50%;
}
This should do the trick!
margin-left shoud be negativ and the width/2
so margin-left = (-1)*(width/2)
The position could be relative(may work better)
EDIT
I use this code to center my homepage
position: absolute;
width: 1000px;
min-height: 100%;
margin-left: -500px;
left: 50%;
This will make then window center until the window is 999px wide then it will missmatch.
Then use something like this
#media only screen and (min-width: 1000px){
div.screen-size-wrapper{
position: absolute;
width: 1000px;
min-height: 100%;
margin-left: -500px;
left: 50%;
}
}
#media only screen and (max-width: 999px){
div.screen-size-wrapper{
width: 100%;
min-height: 100%;
}
}
Tell me if this dosen't work :)
EDIT - This works for your webpage (i tried it)
Paste this in you container css
margin-right: auto;
width: 1200px;
margin-left: -600px;
left: 50%;
position: absolute;
I have a div which needs to fill out the height of the browser's viewport,but still says in the same position when the user scrolls the web page up and down. position: fixed; does this, but I am unable to use it as it's making the overflow scroll bar of the div jerky and slow. Is there an position or method that I can use so for example I currently have:
div.panel {
position: absolute;
top: 36px;
right: 0;
overflow: auto;
background: #636362;
padding: 0 0 20px 0px;
width: 290px;
height: 100%;
}
I'm not sure what you mean with "jerky and slow", because all scrollbars act the same. This is how I would resolve your issue:
HTML:
<div class="fixed">I'm fixed!</div>
<p>Rest of page</p>
CSS:
html, body {
/* make sure the page is at least height of viewport */
height: 100%;
}
body {
/* because the fixed div is no part of the flow,
make sure it is not overlapping the webpage */
padding: 0 0 0 100px;
}
.fixed {
height: 100%;
width: 100px;
left: 0;
position: fixed;
background: #e0e0e0;
/* only vertical-scrolling, but can be changed of course */
overflow-y: scroll;
}
JSfiddled Live example
Works in at least IE7, IE8 and Firefox.