I'm trying to add a loader (spinner gif + text) that is fixed in the middle of the browser window while waiting for an AJAX response. So far I managed to position my gif correctly, but I have a bit of a trouble when it comes to anchoring the text to the loader.
CSS:
.preloader-bg {
background: rgba(22, 22, 22, 0.3);
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
}
#preloader {
background-image: url(images/preloader.gif);
background-repeat: no-repeat;
background-position: center;
position: fixed;
display: block;
left : 0;
bottom : 0;
right : 0;
top : 0;
}
HTML:
<div class="preloader-bg">
<div id="preloader">
</div>
</div>
I show and hide the preloader using jquery during ajax calls. I want to anchor the text to the bottom part of the loader. I'm a begginner when it comes to designing layouts and css so any tips would be huge. Thanks!
.preloader-bg {
background: rgba(22, 22, 22, 0.3);
/* display: none; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
}
#preloader {
background-image: url(http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437);
background-repeat: no-repeat;
background-position: center;
position: fixed;
display: block;
left: 0;
right:0;
top:0;
bottom: 0;
}
#preloader p{
position: absolute;
left: 0;
right: 0;
bottom: 50%;
/* top:0; */
display: inline-block;
text-align: center;
margin-bottom: -5em;
}
<div class="preloader-bg">
<div id="preloader">
<p>text here</p>
</div>
</div>
Here is the Demo
I would do it like this: https://jsfiddle.net/kvduL2nj/
HTML
<div class="preloader-wrapper">
<div class="preloader">
Loading...<br/>
And whatever you want to have here.
</div>
</div>
CSS
.preloader-wrapper {
background: rgba(22, 22, 22, 0.3);
width: 100%; height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.preloader-wrapper > .preloader {
background: transparent url(https://graphiclineweb.files.wordpress.com/2013/10/ajaxloader.gif?w=604) no-repeat center top;
position: absolute;
min-width: 128px; /* image-width of loader */
min-height: 128px; /* image-height of loader */
box-sizing: border-box;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding-top: 148px; /* 128px image-height of loader + 20px margin */
text-align: center;
}
The preloader-wrapper is the one that should be position:fixed. Inside the actual preloader should be horizontally and vertically centered. The rest is commented in the CSS.
Related
I am working on a website hobbinternational.com, and I need the video in the home page to cover the whole screen and the header to be transparent. I tried a lot but couldnt find a solution. Can anyone help?
Add position: fixed; into .page-header
For others, here is an example of a video in the background
.bg-video-wrap {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
background: url(https://designsupply-web.com/samplecontent/vender/codepen/20181014.png) no-repeat center center/cover;
}
video {
min-width: 100%;
min-height: 100vh;
z-index: 1;
}
.overlay {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
background-size: 3px 3px;
z-index: 2;
}
h1 {
text-align: center;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 3;
max-width: 400px;
width: 100%;
height: 50px;
}
<div class="bg-video-wrap">
<video src="https://designsupply-web.com/samplecontent/vender/codepen/20181014.mp4" loop muted autoplay>
</video>
<div class="overlay">
</div>
<h1>Fullscreen video background
</h1>
</div>
https://codepen.io/designsupply/pen/zmEWBm
I have a map with rounded icons on it.
I'm using empty canvas elements to preserve 1:1 aspect ratio on rounded containers
When viewing in Chrome 67 everything is fine, but with Firefox 60 it does not work, aspect ratio is not preserved and icons have a content width of zero (only their padding make them visible)
It happens if parent (.zone) has position:absolute, however it work when .zone has position:relative.
I really need position:absolute, does somebody know why firefox does not expand width of .item to adjust to the canvas element ?
* {
margin: 0;
box-sizing: 0;
}
.zone {
position: absolute;
left: 5%;
right: 5%;
top: 5%;
bottom: 5%;
background: grey;
}
.item {
position: absolute;
transform: translate(-50%, -50%);
height: calc(100% / 11);
border-radius: 50%;
z-index: 3;
overflow: hidden;
cursor: help;
border: 1.5px solid #0acaff;
color: #0acaff;
}
.item canvas {
height: 100%;
}
.square_content {
background: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
padding: 5px;
}
<div class="zone">
<!-- inline style is computed -->
<div class="item" style="left: 22.727%;top: 77.273%;">
<canvas width="1" height="1"></canvas>
<div class="square_content">
</div>
</div>
</div>
Note: on the snippet you should see mostly a gray zone with a perfectly rounded icon (blue border and red background)
The issue is with height: calc(100% / 11); it's value is not picking up in Firefox, if you change the % to vw your code will work fine.
A sample code for you:
* {
margin: 0;
box-sizing: 0;
}
.zone {
position: absolute;
left: 5%;
right: 5%;
top: 5%;
bottom: 5%;
background: grey;
}
.item {
position: absolute;
transform: translate(-50%, -50%);
height: 4vw;
/* or height: calc(40vw/11); */
border-radius: 50%;
z-index: 3;
overflow: hidden;
cursor: help;
border: 1.5px solid #0acaff;
color: #0acaff;
}
.item canvas {
height: 100%;
}
.square_content {
background: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
padding: 5px;
}
<div class="zone">
<!-- inline style is computed -->
<div class="item" style="left: 22.727%;top: 77.273%;">
<canvas width="1" height="1"></canvas>
<div class="square_content">
</div>
</div>
</div>
The above sample work will all browsers, Hope this was helpful for you.
So I want to center "innerDiv1" vertically and horizontally in "outerDiv".
"innerDiv1" has to be position absolute, so "innerDiv2" can over lap it.
I have tried line-height, this doesn't work because "outerDiv" can change size. Line-height doesn't react to percentage the way I want it to.
Here's my snippet:
html, body {
margin: 0;
}
.wrapper {
background: lightblue;
width: 300px;
height: 300px;
}
.outerDiv {
background: red;
height: 50%;
width: 50%;
}
.innerDiv1 {
background: seagreen;
position: absolute;
}
.innerDiv2 {
background: rgba(255,255,255,0.5);
height: 100%;
}
<div class="wrapper">
<div class="outerDiv">
<div class="innerDiv1">Hello World!</div>
<div class="innerDiv2"></div>
</div>
</div>
Thanks for your help.
See for yourself. See the comments in the CSS on what you need to include.
html, body {
margin: 0;
}
.wrapper {
background: lightblue;
width: 300px;
height: 300px;
position: relative; /* 1. Add this. */
}
.outerDiv {
background: red;
height: 50%;
width: 50%;
position: absolute;
top: 25%; /* 2. Add this. */
left: 25%; /* 3. Add this. */
}
.innerDiv1 {
background: seagreen;
position: absolute; /* 4. Add this. */
top: 50%; /* 5. Add this. */
left: 50%; /* 6. Add this. */
transform: translate(-50%, -50%); /* 7. Add this. */
text-align: center; /* 8. Add this if you want the text to be centered. */
}
.innerDiv2 {
background: rgba(255, 255, 255, 0.5);
height: 100%;
top: 50%;
left: 50%;
}
<div class="wrapper">
<div class="outerDiv">
<div class="innerDiv1">Hello World!</div>
<div class="innerDiv2"></div>
</div>
</div>
Add this to your css:
.outerDiv {
position: relative;
}
.innerDiv1 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
I have set up a modal for phots, so when i click on a small photo i get a larger photo up in a modal, the modal has position: fixed; and the modal-content has position: absolute; i can center it with margin: auto; left: 0; right: 0;but then the width goes all the way to the right and left, i want the modal content width to be the same as the photo inside it or the content of the modal-content
my code:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 30px;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
margin-bottom: 30px;
margin: auto;
border: 1px solid #888;
}
.modalimg {
position: relative;
text-align: center;
}
.modalimg img{
max-width: 100%;
max-height: 400px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
its maybe a bit messy now but i have tried alot of different things with no luck..
This is what I use when I center an absolute-positioned element, this works for me all the time:
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
here you are please
.element {
position: absolute;
top: 15px;
z-index: 2;
width: 40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin: 0 auto;
left: 0;
right: 0;
background: red;
color: #fff;
text-align: center;
}
<div class="element">
text..
</div>
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
border: 1px solid #888;
}
to align absolute div to center
left: 0;
right: 0
text-align: center
this will align the div in center.
Here's a possible solution that uses:
absolute positioning on the content container (.modal-content)
doesn't use absolute|fixed on the actual content
The content container (.modal-content) will grow along with its content. Finally, it's moved back to the middle using transform: translate(-50%, -50%);:
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
border: 2px solid red;
transform: translate(-50%, -50%);
}
<div class="modal">
<div class="modal-content">
<img src="//placehold.it/200x200" alt="">
</div>
</div>
Demo
Try before buy
When I apply the blur filter to my markup the edges are not being blurred. I would like the entire region to be blurred.
HTML
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>
CSS
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: 0;
right: 0;
bottom: 0px;
content: "text";
position: absolute;
height: 20%;
width: 100%;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(12px);
filter: blur(12px);
}
Codepen:
http://codepen.io/aaronbalthaser/pen/qNOYdE
The Codepen shows the blurred region. It is kind of like a footer but as you can see the edges are not blurred. Any ideas?
Thanks
You can set overflow: hidden and stretch a little bit the blurred image. I have set width to 110%, height to 35%, left, right and bottom to -5% (the added percentage to width and height). Hope this is what you want.
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: -5%;
right: -5%;
bottom: -5%;
content: "";
position: absolute;
height: 35%;
width: 110%;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(8px);
filter: blur(8px);
overflow: hidden;
}
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>