So im trying to figure out how I could make all of my webpage change size when you zoom in or out at the same proportion. I cant figure out how to do this but here is a little test Fiddle I created in a couple minutes.
https://jsfiddle.net/cejnkx4h/1/
So as you can see in this, whenever the browser/canvas changes size all the text and stuff changes proportion. I want the user to be able to zoom in to accommodate impairments however I want the entire webpage to zoom in at the same proportion, not just certain elements like the text.
If any of you guys can help me I'd appreciate it a lot.
body,
html {
margin: 0;
background-image: url("https://www.hdwallpapers.in/walls/blur_colors-wide.jpg");
background-position: cover;
background-size: 100%;
background-attachment: fixed;
min-width: 1000px;
background-repeat: no-repeat;
}
.bg {
width: 60%;
margin-left: 20%;
background-color: grey;
border: thick solid black;
height: 100%;
}
#right {
width: 45%;
vertical-align: baseline;
border: thick solid black;
}
#left {
width: 45%;
float: left;
font-size: 16pt;
color: black;
padding-top: 20px;
}
.format {
width: 85%;
margin-left: 10%;
overflow: hidden;
padding-top: 5%;
padding-bottom: 10%;
display: flex;
align-items: center;
}
<div class="bg">
<div class="format">
<div id="left">
<p>
Gaming Pc
<br/>$1500
</p>
</div>
<div id="right">
<img src="https://www.cyberpowerpc.com/images/cs/smraidmax/blk_400.png" width="100%" </div>
</div>
</div>
You can use css transform to scale the page proportionally.
transform: scale(1);
Something like this. Where scale 1 means a 100%. You can set it to something like 0.5 for 50% or 1.1 for 110%.
Hope this helps.
So i have a container with a some text and a button after the text. This widget is repeated several times on my screen. Each container is having its height set based on the height of its contents and its a bootstrap column so its width changes as well. My problem is I want the button to always stick to the bottom of its widget, but if I set the position: absolute; bottom:0; right:25%; it is only centered as long as the widgets width doesn't change. Which it does. Any suggestions?
Here's your "flex"able friend in action. I am using some arbitrarily sized divs for illustration purposes:
div {
background: pink;
display: flex;
justify-content: center;
align-items: flex-end;
float: left;
margin-right: 10px
}
#flexDiv1 {
height: 200px;
width: 100px;
}
#flexDiv2 {
height: 300px;
width: 70px;
}
#flexDiv3 {
height: 100px;
width: 200px;
}
<div id="flexDiv1">
link
</div>
<div id="flexDiv2">
link
</div>
<div id="flexDiv3">
link
</div>
Check if this is what you need:
<div class="holder">
<div class='widget-footer'>
<button class="btn-inner">
foo
</button>
</div>
</div>
html, body{
height:100%;
margin:0;
padding:0;
}
.holder{
width: 100%;
height:100%;
/*height: 250px;*/
background: #dedede;
position:relative;
}
.widget-footer{
position:absolute;
bottom:0;
text-align:center;
width:100%;
}
.btn-inner{
margin-bottom: 5px;
}
https://jsfiddle.net/qw54w9j9/2/
Easy:
CSS
#dinamic {
position:relative;
height: 300px;
background: #ddd;
}
.center-bottom {
position:absolute;
bottom:0;
left:0;
right:0;
text-align:center
}
HTML
<div id="dinamic">
<div class="center-bottom">
<button>Click-me!</button>
</div>
</div>
https://jsfiddle.net/8pyn4Le4/
Ok, so I want to position on top of another div which has a background image. The image-div has the following properties:
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: url('../img/1.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
This looks like I want on all devices. But now I need to overlay the image-div with a clickable div that fits a certain part of the image. Getting the div to fit is easy, just set position to absolute and set top, left, width and height, but as soon as i display in another resolution/density the div is way off, no surprise there. So i tried with positioning by using % or vh and vw but nothing seems to work.
How would I go about positioning divs on top of the image regardless on what device, resolution and density I'm at?
It's a combination of background-position, background-size and an offset in percentages of the containing div.
Keep the background-position at a certain value so the spot on the image is always in screen.
Use background-size: cover; or background-size: contain; to keep the image (or it's container) responsive.
If you have two or more spots on the outer edges of the image I suggest using contain, but this will reduce the image size considerably on smaller screens while your inner div will stay reasonably large.
In other cases, use cover for resize purposes.
Here I created an example: (I used Jquery UI to make the image resizable)
$( function() {
$( "#resizable" ).resizable();
} );
.container {
background-image: url('https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');
background-size: cover;
background-position: 50% 50%;
height: 500px;
position: relative;
width: 800px;
}
.hit-me-container {
height: 16px;
left: 52%;
position: absolute;
top: 45%;
width: 16px;
}
.hit-me {
animation: pulse 1s ease infinite;
background-color: #fff;
border: 3px solid #777;
box-sizing: border-box;
border-radius: 50%;
cursor: pointer;
height: 100%;
width: 100%;
}
.hit-me-container:hover:after {
background-color: #333;
color: #fff;
content: 'Buy these glasses';
display: block;
font-family: sans-serif;
font-size: 12px;
left: 20px;
padding: 5px;
position: absolute;
width: 100px;
top: -4px;
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container" id="resizable">
<div class="hit-me-container">
<div class="hit-me"></div>
</div>
</div>
Or check this fiddle
You can use a div inside of the div with the background-image, but then position it within the div wherever you want using %s, not px or absolute values.
#bg{
position: relative;
width:100vw;
height:100vh;
background-image: url('/favicon.ico');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 5
}
#overlay {
position: absolute;
height: 40%;
width: 30%;
z-index: 10;
top: 13%;
left: 34%
}
#overlay:hover {
background-color: rgba(50,50,200,0.5);
}
<div id="bg">
<div id="overlay"></div>
</div>
<style type="text/css">
#div_1
{
position:relative;
top:0;
left:0;
width:100%;
height:200px;
background-image: url('../img/1.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
#div_2
{
position:absolute;
width:50%;
height:60%;
margin:0px auto;
}
</style>
<div id="div_1">
<div id="div_2">
testing...
</div>
</div>
I have a page with multiple divs and sections, I want the top nav div to be fixed and on top of everything, then all the divs/sections in the page scroll under it, then the final div is my google map which is fixed at the bottom of the page but under everything, so that as you scroll to the bottom the map is unveiled rather than scrolls into view.
Problem: The code below draws the google map in the right place (bottom) but ontop of everything.
If I set the z-index to -1 of mapcontainer then all sorts of crazy happens (the bg image of hobbiescontainer disappears, topnav is no longer fixed and if I scroll down and back up it disappears entirely)
If I remove the google maps API then everything works as expected.
Therefore based on the above I am guessing that the issue is related to the fact that the map is being put into the div once everything has been rendered and throwing off my z-index, but I'm not really sure. Can anyone help?
Apologies for amount of code - as it involves positioning I thought maybe some of my other elements are causing issues so best put it all in.
have loaded code to jsfiddle: http://jsfiddle.net/isherwood/rwg4wqfo/4/
<body>
<nav id="topbar">
<ul>
<li>Introduction</li>
<li>Skills</li>
<li>Work Experience</li>
<li>Hobbies</li>
<li>Contact</li>
</ul>
</nav>
<div id="navspace"></div>
<section id="introductionSection">
<a id="intro"><span id="imageCropper"><img src="/images/me.jpg" / id="imageOfMe" /></span></a>
<h1>Who am I?</h1>
<p class="keyText">
<!-- content here -->
</p>
</section>
<section id="skillsSection">
<a id="skills"><h2>My Skills/Knowledge</h2></a>
<p class="keyText">
<!-- content here -->
</p>
</section>
<section id="workExperienceSection">
<a id="wexp"><h3>Work Experience</h3></a>
<p class="keytext">
<!-- content here -->
</p>
</section>
<div id="hobbiescontainer">
<section id="hobbiesSection">
<a id="hobbies"><h4>Hobbies</h4></a>
<p class="keytext">
<!-- content here -->
</p>
</section>
</div>
<section id="contactSection">
<a id="contact"><h5>Contact</h5></a>
<p class="keytext">
<!-- content here -->
</p>
</section>
<div id="mapcontainer">
<div id="map"></div>
</div>
<div id="mapspace"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBa5Gt2bp2Oxnc_1NqN1wxGKJjuHqJ9y_4"></script>
<script src="CHJS.js"></script>
</body>
and here's the CSS:
body
{
padding:0px;
margin:0px;
text-align:justify;
height: 100%;
min-height:800px;
background-color:rgba(125,185,232,1);
background-image: url(images/fallback-gradient.png);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,87,153,1)), to(rgba(255,255,255,1)));
background-image: -webkit-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
background-image: -moz-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
background-image: -ms-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
background-image: -o-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
z-index:1;
}
ul, li
{
list-style-type:none;
display:inline;
}
p {
padding: 0px 25% 0px 25%;
}
h1, h2, h3, h4, h5 {
font-size: 30px;
font-family: Calibri,Verdana,arial,serif;
font-weight: bold;
text-transform:uppercase;
width:50%;
position: relative;
left: 15%;
}
button {
float:right;
margin: 30px 100px 0px 0px;
font-family:calibri,verdana,arial,serif;
font-size:16px;
font-weight:normal;
text-transform:uppercase;
}
#navspace {
height: 50px;
width: 100%;
}
#topbar {
position:fixed;
top:0;
left:0;
background-color: rgba(232,232,232,1);
background-image: url(images/fallback-gradient.png);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(242,242,242,1)), to(rgba(232,232,232,1)));
background-image: -webkit-linear-gradient(top, rgba(242,242,242,1), rgba(232,232,232,1));
background-image: -moz-linear-gradient(top, rgba(242,242,242,1), rgba(232,232,232,1));
background-image: -ms-linear-gradient(top, rgba(242,242,242,1), rgba(232,232,232,1));
background-image: -o-linear-gradient(top, rgba(242,242,242,1), rgba(232,232,232,1));
height: 50px;
width: 100%;
text-align: center;
border: 1px solid rgba(195,195,195,1);
z-index: 9999;
}
#introductionSection {
background-color: white;
padding: 20px 0 0 0;
overflow:auto;
}
#imageCropper
{
height:100px;
width:100px;
vertical-align:middle;
border-radius: 50% 50% 50% 50%;
overflow:hidden;
display:inline-block;
margin:3px;
border: 1px solid rgba(195,195,195,1);
position: relative;
left: 100px;
}
#imageOfMe
{
position:relative;
left:-53%;
top:-65%;
height:180px;
}
#skillsSection {
background-color: grey;
padding: 0px;
overflow:auto;
margin: 0px;
z-index:1;
}
#workExperienceSection {
background-color: white;
padding: 0px;
overflow:auto;
}
#hobbiescontainer {
background-image: url(Images/hockey.jpg);
background-position:center;
background-size:cover;
background-attachment: fixed;
padding: 10% 0 10% 0;
}
#hobbiesSection {
background-color: grey;
padding: 0px;
overflow:auto;
}
#contactSection {
background-color:white;
padding: 0px;
overflow:auto;
}
#mapcontainer {
position:fixed;
top:0px;
left:0px;
width: 100%;
min-height:100%;
padding:0;
border:0;
z-index:0;
}
#map {
position:absolute;
bottom:0px;
width: 100%;
height: 400px;
}
#mapspace {
height: 400px;
position:relative;
}
#topbar, #navspace, #hobbiescontainer, section {
position: relative;
z-index: 1;
background-color: pink;
}
http://jsfiddle.net/isherwood/rwg4wqfo/5
Note that your approach removes access to the map for purposes of scrolling, clicking, etc.
I'm using a div, and inside that div another div which needs to stick to the parent div.
But when i rescale the browser there's it's not sticking to the right place. Do i need to do this with javascript?
HTML
<div class="block">
White div block
<div class="block-content">
Green div
</div>
</div>
CSS
.block {
position: relative;
width: 100%;
height: 100%;
background-image: url('voorgrond.png');
background-repeat: no-repeat;
background-position: 70% center; /* positie van de screen */
}
.block-content {
position: absolute;
left: 65%;
top: 42%;
width: 200px;
height: 200px;
}
The green dot should stick inside the white square.
LIVE DEMO
<div class="block">
<div class="block-content"></div>
</div>
.block {
position: absolute;
background:#fff;
border-radius:10%;
width: 200px;
height: 200px;
padding:50px;
left: 65%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}
.block-content {
position: absolute;
background: #00A652;
border-radius:50%;
width: 200px;
height: 200px;
}
#media (max-width: 600px) {
.block{
left: 50%;
}
}
Assuming your goal is the image I made this fiddle which mimics what you seem to need.
FIDDLE
HTML:
<div class="block">
<div class="block-content">
Hierzo!
</div>
</div>
CSS:
.block{
position:relative;
margin: 300px 0 0 50%;
width:30%;
height:80px;
background:grey;
border-radius:10px;
}
.block-content{
width:50px;
height:50px;
background:green;
border-radius:50px;
position:absolute;
top:50%;
left:50%;
margin: -25px 0 0 -25px;
}
Hope this helps!
EDIT Added responsive width to .block