I have two divs
<div class="one">contains a massive image with fixed height and width</div>
<div class="two">contains popup</div>
.one {
background-image: url("image");
background-position: left top;
background-repeat: no-repeat;
background-color: transparent;
height:900px;
width:1000px;
margin:0 auto;
}
.overlay {
background:rgba(0,0,0,0.8);
bottom:0;
left:0;
position:fixed;
right:0;
top:0;
z-index:4;
display: block;
opacity: 1;
}
.popupwrapper{
background:white;
height: 100%;
max-width: 300px;
width: 100%;
max-height: 320px;
text-align: center;
padding:3em;
margin: 0 auto;
margin-top: 120px;
//for small screens
margin-left: 40px;
}
The problem I have is that, since the div "one" is a fixed size when I view it on mobile phone, the popup isn't actually displayed in the center of the screen but rather how it would be displayed on a laptop screen. I have tried fixing this with using margin left on small screen which centers the div in the middle of a mobile screen. However, when I scroll because the div has a margin-left it doesn't sit in the center as I scroll.
Additionally, this only seems to happen in Safari ( without the margin-left or fixed max-width the div seems to be huge on mobile screens) but in Chrome is fine?
Two questions:
How do I stop the div from scrolling? I have tried overflow but it still scrolls.
Is there a CSS hack for just Safari? I have tried many but none of them seem to work?
I understand from your question that you want to show a overlay that's always in the middel of the screen and on top of the rest.
If the size of the modal is fixed, then you can do it like this:
.one {
position: absolute;
top: 50%;
left: 50%;
margin: -450px 0 0 -500px;
width: 1000px;
height: 900px;
}
Example: click
Only the size of the overlay is way to big for a mobile device.. Maybe use media queries to have a different size on mobile screens?
May be height of any element is more than its actual height. That's why scrolling is coming.
Related
I wanted to have an Image on 100% width, with a max-height. When scaling the window and you're reaching the max-height, the width should still be at a 100% but "cropping" the image bigger (provided image size is fitting). This means you can see more of the image sides (left and right) when its on a big scale window, and you can see less on a small sized window. I'll post my css try down, but i don'thave a clue how to do that at this point. Hope you're getting my issue, i'll attach a visualisation.
My Code, don't get confused, I wanted to do a slider but lets focus on only one picture now, so sliders out of the game for now:
.slider-inner img {
display:none;
max-width: 100%;
height: auto;
}
#main-slider {
width: 80%;
min-width: 500px;
height: 450px;
min-height: 400px;
overflow: hidden;
margin: 0 auto;
}
.slider-inner{
width: 100%;
height: 450px;
margin: 0 auto;
position:relative;
overflow: hidden;
float:left;
padding: 0px;
}
What i want (visualisation):
If I understood you correctly you want your image to maintain its height and crop the width when window size is smaller.
Check this example:
div{
height: 300px;
position: relative;
overflow: hidden;
}
div img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div>
<img src="https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4d542ff4e10ff7de9d35d2ec8a467454&w=1000&q=80">
</div>
You do this with background image:
.box {
height:200px;
background:url(https://picsum.photos/1300/300?image=1069) center top/auto 100% no-repeat;
}
<div class="box">
</div>
Also you had "max-width:100%" and "height: auto" before. 100% is a relative unit, saying to take up 100% of the parent container's width, and auto was telling it to scale with the width while keeping aspect ratio.
I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?
CODE:
body {
text-align: center;
}
div.container {
text-align: left;
width: 710px;
margin: 0 auto;
border: 12px solid black;
border-radius: 10px;
}
div.content {
width: 700px;
min-height: 400px;
background-color: white;
padding: 5px;
}
#-webkit-keyframes mini {
from {
left: 410px;
}
}
.mini {
position: absolute;
top: 280px;
left: 950px;
width: 166px;
height: 70px;
z-index: 10000;
-webkit-animation: mini 3s;
animation: mini 8s;
}
<div class="container">
<div class="content">
<img src="Media/buscartoon.jpg" class="mini" />
</div>
</div>
maybe set initial left and top values
.imganim {
width:100px;
height:60px;
position:absolute;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
left: 0;
top: 0;
}
Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.
Pop this on your .content div:
position: relative;
the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.
If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:
left: calc(100% - 100px)
...where 100px is the width of the element.
edit: jsfiddle example https://jsfiddle.net/w56r2xnr/
Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).
You can now adjust the top to make it as you see fit.
CSS changes:
div.content {
width: 700px; min-height: 400px;
background-color: white; padding: 5px;
position: relative;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
Sample: http://codepen.io/Nasir_T/pen/ZBpjpw
Hope this helps.
[Edit - Code changed in question]
I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute. Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.
For the updated code in question please check the following code sample:
http://codepen.io/Nasir_T/pen/ObRwmO
Just adjust the key frame left percentage according to your need.
I am building a product builder for an online store. I got the image to zoom in on hover and scroll but it scrolls to the top left. when I set the origin to center it zooms in at the center but does not scroll to the left or to the top. Also non-mac users are not able to scroll left-right with the mouse scroll wheel so I'd like to be able to scroll by dragging. Any help would be greatly appreciated.
Here's the code:
HTML:
<div id="option_image" class="rotationViewer option_image spritespin-instance" style="max-height: 544px; -webkit-user-select: none; overflow: hidden; position: relative; width: 3600px; height: 3600px;" unselectable="on">
<div class="spritespin-stage" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: block; background-image: url("//www.shappify-cdn.com/images/78432/86058914/001_first-screen.png"); background-size: 500px 500px; background-position: 0px 0px; background-repeat: no-repeat;"></div>
<div class="spritespin-preload" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: none;"></div>
</div>
CSS:
#option_image:hover {
width: 500px !important;
height: 500px !important;
overflow-x: auto !important;
overflow-y: auto !important;
}
.spritespin-stage {
transition: all .2s ease-in-out;
position: absolute !important;
}
.spritespin-stage:hover {
margin: center;
transform: scale(5);
transform-origin: top left;
}
Not sure why those styles are set inline and the rules within the style tag are being set with !important. That is specificity creep. Also, the width of the container is being fixed inline and then clipped in a max width. This all makes your task of debugging and refining more difficult.
A more central problem appears to be one of focus. Your container div is not focusable. When the user hovers, any scrolling with a scroll wheel will scroll whatever element has focus if it meets the conditions for scrolling to occur. You could give your .option_image container a tabindex attribute of zero if focusing fits the user experience you're going for.
My Goal:
So I am making a webpage with a map of the USA as the "background image" and on top of that map I have about 10 markers pointing to specific location. The markers are NOT part of the picture thats just me adding them with absolute positioning and top and left with a percentage.
The Problem:
As I scale down the page or scroll up and down the markers that I have set with absolute positioning begin to move out of the spot they are suppose to be on because the background-image is getting smaller do to it displaying 100%.
The Question:
How can I achieve what I want with the markers on the map where they are suppose to be not moving as the window is being scaled down?
Now I know of only 1 solution and this solution can take a VERY LONG TIME. What I was thinking is instead of positioning the markers that I want on the map with percentage I can do it with pixels and then use a TON of media queries and keep on adjusting it. Not only is this solution going to take extremely long but it also does not seems like the correct way to go about this.
HTML:
<div class="container main-content"><!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div> <!--the marker that is positioned absolute-->
</div>
</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body{ overflow: hidden; }
.main-content{
background: url('assets/img/map1.jpg') no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap{
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.marker{
height: 40px;
width: 40px;
border-radius: 100%;
background-color: red;
position: absolute;
top: 50%;
margin-top: -20px;
}
The problem is that your background image's size is set to 100%: background-size: 100%. This means that when the browser tries to scale the content, the background does not scale with it (it stays 100%).
Your best bet is to remove the background-size property completely. This allows the markers to stay in place when the page scales, however, you won't get the full-screen background effect that you currently have (unless you have a larger image).
The background will still move, however, once the browser window width is less than the image's width. This is because you have the background-position set to top center. The center is what causes it to move once the browser window width is less than the image width. Change center to left and it will fix that issue. You'll also need to set the marker's container to be based to the left as well for this to work on wider screens though. Basically, removing all center properties would help, but the screen wouldn't be centered on a wide screen.
Try substituting css :before pseudo element for .marker ; set percentage unit values utilizing calc()
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body {
overflow: hidden;
}
.main-content {
background: url(http://lorempixel.com/400/300) no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap {
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.main-content:before {
content: " ";
height: calc(12.5%);
width: calc(5%);
border-radius: 100%;
background-color: red;
position: absolute;
top: calc(50%);
left: calc(50%);
margin-top: calc(1%);
}
<div class="container main-content">
<!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div>
<!--the marker that is positioned absolute-->
</div>
</div>
</div>
jsfiddle http://jsfiddle.net/o79rpawc/
I'm trying to create a fixed layout, with the sidebar's background extend to the far right. I drew a sketch to illustrate the image:
how would I go about extending the sidebar background to extend till the end of the right screen, on any window size? I tried with:
#sidebar {
z-index: 1000;
overflow: hidden;
position: absolute;
width: 100%;
background: url(../img/sidebar-base.png) no-repeat 0 -8px;
min-height: 200px;
&::after {
content: '';
z-index: 10;
display: block;
height: 100px;
overflow: hidden;
width: 100%;
background: url(../img/sidebar-rx.png) repeat-x 0 -9px;
position: absolute;
top: 0;
}
}
but a scroll would appear horizontally, and if I apply overflow:hidden on the body I wouldn't be able to scroll to the bottom. Thank you!
EDIT: I did try to find my luck with javascript but there's still a little scroll:
$(function(){
$sidebar = $('#sidebar');
$sidebar.css({width: window.innerWidth - ($sidebar.offset().left)})
});
If your problem lies only in the scrolling, you can easily fix this with this line
overflow-x: hidden;
and applying it to the background's parent or the body element altogether.
Is there anyone following here or not? anyway, I think you should static position and hidden overflow like below:
#sidebar {
z-index: 1000;
overflow: hidden;
position: static;
width: 100%;
height:100%;
right:0;
top:0;
margin:0;}
Also to hide the scrolls, you should hide your body overflow too.
Hope to be right and helpful...
Set body to 100%
body {
height: 100%;
}
Then set the sidebar height to "height: auto;". That will make it extend to the height of the viewport. From there, add fixed positioning like you said.
You could do:
overflow-y:hidden
That should get rid of the scroll bar across the bottom.
I would also then use a lot of right hand padding in the sidebar to extend it out.
Try setting the sidebar width to 30% and the content to 70%.
What you should do is create a wrapper div.
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here --></div>
</div>
Your document should look like this when finished:
<html>
<head>
<title>Experiment</title>
<style type="text/css">
.content {float: left; width: 49%; height: 500px; border: 1px solid #000;}
.sidebar-parent {float: left; width: 50%; background-color: green;}
.sidebar {width: 500px; height: 500px; border: 1px solid #000;}
</style>
</head>
<body>
<div class="content">blah blah blah</div>
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here -->blah blah blah</div>
</div>
</body>
</html>
The main thing to remember is the container div "sidebar-parent" is what's getting the width and containing the background.
To center them you'll need width: 50%; parent containers for both content and sidebar. You make those float:left; to fill the screen and then the content child container float: right; and the sidebar child container float: left; within their parent containers.
Summary: 2 50% width containers each containing 1 child container. Stack the parents together with a left float and then position the fixed width child containers within their parents.
That will center them and now you'll have the ability to have extended backgrounds.