In my code margin-left: is working in two different ways in Firefox and all the other browsers.
On Firefox, the margin is only like 20% of the "real" margin. I tried #-moz-document url-prefix() { }, but it didn't solve the issue, it moved both the image that is shown and the "real position from where the cars start moving" to a even bigger margin.
Here's my code:
<section id="home" >
<div id="home1inner">
<div id="header">
*lots of content here*
</div>
<img id="cars" src="images/cars.png" />
</div>
</section>
#home {
position: relative;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
background-repeat: no-repeat;
background-position: center;
height: 690px;
margin-top: 40px;
}
#home1inner {
height: 1550px;
overflow: hidden;
position: relative;
}
#cars {
position: absolute;
height: 690px;
bottom: -500px;
margin-left: -300px;
pointer-events: none;
}
Here's the website itself, where you can check the difference between Firefox and any other browser: http://denea.comeze.com/
Any ideas how to fix it?
In Firefox, your cars ID is defaulting to be centered on the page.
Simply add left: 0, like so:
#cars {
position: absolute;
height: 690px;
bottom: -500px;
margin-left: -300px;
pointer-events: none;
left: 0;
}
and it will start off at the position on the page you want.
Related
I have a pop-up div that is able to stream video or show a document/image depending on the file attachment.
The issue I'm having is ensuring that it is centered vertically and horizontally, both for Desktop and mobile browsers/app.
I've been trying different attributes, but it's like I change from what I already have and suddenly it's just off the page.
if(extension === "mp4"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><video id="VideoLauncher" width="600" controls controlsList="nodownload"><source src="'+file+' " type="video/mp4"><!--Browser does not support <video> tag --></video></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "jpg"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><img id="VideoLauncher" width="600" src="'+file+'" onclick="lightbox_close()"></img></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "pdf" || extension === "doc" || extension === "docx"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><iframe src="https://docs.google.com/gview?url='+file+'&embedded=true" style="height:800px; width:600px;" frameborder="0"></iframe></div><div id="fade" onClick="lightbox_close();"></div>'
}
var LightEle = document.querySelector("#light");
var FadeEle = document.querySelector("#fade");
var BoxCloseEle = document.querySelector("#boxclose");
LightEle.style.cssText = 'display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 100%px; margin-left: -200px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible;';
FadeEle.style.cssText = 'display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80);';
Ideally, what I'm looking for is the styling that will dynamically center the light element, horizontally and vertically, though the light element will be a different size depending on the file it is to show. Because of this I can't simply hard code the height and width.
There are two ways to doing this:
.lightbox {
margin: 0 auto;
}
This only centers horizontally within the parent component. It is a very simple way if that's what you want to do.
If not, try this:
.lightbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
A popular approach to vertically and horizontally center elements is to use:
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
You can use this with absolute or fixed positioning . top and left moves the top left corner to the center of the screen while translate( -50%, -50% ) moves the element back to the left and top 50% of the elements width/height, placing the center of the element at the center of the page.
.box {
position: fixed;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
/* For Demo */
width: 75vw;
height: 75vh;
background-color: #ccc;
}
<div class="box"></div>
Use Flexbox:
main {
background-color: teal;
}
.modal-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
}
.modal {
display: block;
max-width: 300px;
width: 90%;
max-height: 300px;
height: 90%;
background-color: white;
}
<main>
<div class="modal-container">
<div class="modal">
<h2>yes</h2>
</div>
</div>
</main>
I've got a div background-img, on top of that a gradient layer (don't wonder about the animation css, this is just a part of my website, but thats not causing any problems i think) . Now i want to have on top of everything my little navbar. Sadly it seems to not work and i can't figure out how to go.. there's always either the pic-background or the gradient on top of it, z-index gets completely ignored on a tag.
HTML:
.welcome-area{
position:relative;
margin: 0;
width: 100%;
height: 700px;
text-align: center;
overflow:hidden;
position: relative;
z-index: 45;
}
.pic_background{
top: 0;
left: 0;
position:absolute;
z-index: 1;
width: 100%;
height: 700px;
background-color: grey;
background-size: cover;
background-position: 0 -150px;
background-repeat: no-repeat;
}
.main-header{
display: block;
text-align: center;
width: 100%;
height: 100px;
color: white;
background-color: transparent;
position:absolute;
z-index: 7;
}
.gradient_background{
width: 100%;
height: 700px;
top: 0;
background-image: linear-gradient(to bottom right, #002c72 , #0058e6);
animation-name: gradient-background;
animation-duration: 4s;
animation-fill-mode: both;
position: absolute;
z-index: 2;
}
.main-header a{
}
<div class="welcome-area">
<div class=" pic_background">
<header>
<div class="main-header">
<nav>
about me
</nav>
</div>
</header>
</div>
</div>
<div class="gradient_background"></div>
https://jsfiddle.net/ft6y3guq/17/
I just want to have a loading animation with grayed-out background upon clicking TestLoading button. But I can't get it right. The loading gif is slightly in the left side but I want it in the center. Also grayed-out background is not working.
Here's my css:
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
}
.divLoaderContent {
position: absolute;
color: White;
top: 50%;
left: 40%;
}
In my view, I have this:
<!--LOADER -->
<div id="divProcessing" class="divLoader">
<p class="divLoaderContent"><img src="~/Content/image/blocks.gif"></p>
</div>
and
$('#btnRoster1').click(function(e) {
$("#divProcessing").show();
});
Here is revised version of css:
.divLoader{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(67, 71, 75, 0.8);
z-index: 30001;
}
.divLoaderContent{
position: absolute;
color: White;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
}
And don't use p tag for img container. Use div instead
To animate .show() use
$('#btnRoster1').click(function(e) {
$("#divProcessing").show(800);
});
where 800 is 0.8 sec.
To align the gif you can use flex and get rid of absolute positioning:
.divLoaderContent {
color: White;
display: flex;
justify-content: center;
}
Moving elements (especially img tags) with top/left based on percentages can get messy because it depends on the img size. I recommend using flex with this approach. The justify-content will center the children horizontally and align-items will center vertically when display is flex
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
display: none;
justify-content: center;
align-items: center;
}
Then have your js just modify display in css to flex when you want it to show, then display: none when you want it to hide;
$('#btnRoster1').click(function(e) {
$("#divProcessing").css('display', 'flex');
});
Fiddle below (has a timeout after 3 seconds to simulate something loading) I took out the unnecessary <p> tag as well.
https://jsfiddle.net/Garrito/vh2ttmu9/35/
so i'm making a project and I want the three box style page, however when I do the auto-expand to fit the content inside the boxes it floats over the other boxes - as I have had to position them.
html code:
<div class="content">
<h2>Contact me</h2>
<p>--content holder--</p>
</div>
<div class="content-bottom-left">
<p>--content holder--</p>
</div>
<div class="content-bottom-right">
<p>--content holder--</p>
</div>
my CSS:
.content {
background-color: 373737;
top: 15%;
width: 55%;
right: 25%;
position: absolute;
overflow: hidden;
margin-bottom: auto;
}
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Outcome:
Outcome
add this CSS rule to your Div tags:
display:inline-block;
Your CSS doesn't allow the positions of the elements to move with above content
adding the following to both of the lower should do it.
clear: both;
tells elements to avoid collisions with elements on their left and right with which they collide, along with behnam bozorg's comment it should work.
You might also remove the top absolute positioning as it is being pushed down anyways.
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
clear: both;
display: inline-block;
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
I would like to make certain elements of my page have more fluid transitions as they size down. If you look here:
http://abezieleniec.com/SIDWeb/
You can see that when you size down to tablet and phone size the first blue bar snaps to different positions to meet with the main logo. This was obviously done with media queries but I'm wondering if there is a way to make it more fluid with percentages? I'm assuming this would require some JS...
Any ideas are welcome!
Thanks
It's not too hard a process as it happens! It's something I had to use for the website here: http://flourishworld.co.uk/
The key is to use :before with "margin-top: xx%":
.element:before {
margin-top: 50%;
position: relative;
content: "";
display: block;
}
From looking at your site...it may be easier to just present some altered code. First I changed your markup (this may not work for you)
<div id="home" class="jumbotrontop animated fadeIn">
<div class="biglogo" style="opacity: 1;">
<img src="images/biglogofull.png">
</div>
</div>
Using the code idea above:
#home:before {
margin-top: 55%;
position: relative;
content: "";
display: block;
}
But for this to work you need some amended CSS code for other elements...
.jumbotrontop {
font-size: 21px;
height: 100%;
line-height: 2.1428571435;
color: inherit;
width: 100%;
background-size: cover;
z-index: 1;
}
.biglogo {
width: 80%;
display: block;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
margin-bottom: 130px;
opacity: 1;
position: absolute;
z-index: 100;
top: 0;
position: relative;
display: table;
}
.jumbotrontop img {
width: 100%;
height: auto;
margin: auto;
max-width: 740px;
display: block;
}
#home:after {
background-color: #eeeeee;
background-image: url(../images/background1.jpg);
display: block;
position: fixed;
top: 0;
left: 0;
content: "";
bottom: 0;
right: 0;
z-index: 1;
background-size: cover;
}
What this does is it takes your top element and takes it's height away, it's contents are positioned absolutely so it doesn't take up space. The :before element then adds a responsive height that will shrink as the width of the page shrinks. In doing so we had to change the logo markup around so that it stayed in a central location and continued to shrink as the window did.
Hope this helps! No JS, all CSS.