So on my website, I have a video set as a background, everything I put underneath the video shows, but everything on top won't show.
index.php
<link rel="stylesheet" href="css/index.css">
<body>
<div class="navigation">
Updates
|
Start
|
Login
</div>
<video autoplay muted loop id="background_video">
<source src="assets/backgrounds/index_background.mp4" type="video/mp4">
</video>
style.css
.navigation{
position: absolute;
color: white;
z-index: auto;
float: none;
list-style-type: none;
background-color: white;
position: fixed;
}
#background_video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 50%;
z-index: 0;
}
The problem is with the z-index.
The z-index of the ".navigation" class must be greater/higher than the z-index of the video element with the ID "#background_video".
And you cannot use two "position" in ".navigation" class. The "absolute" is being overwritten by "fixed".
Related
I have an iframe fullscreen, how can I make a div that is on that iframe?
I'm trying to do something like the Netflix player, just more static WITHOUT javascript
so there is the iframe,
then there is a div with some buttons and functions in php but the div has a background cutted, on top of the iframe.
Is it doable?
LIKE THIS IMAGE CHECK PLS
Here is a possible solution :
<div class="iframe_container">
<iframe width="100%" height="700px"></iframe>
<div class="custom_functions"></div>
</div>
<style type="text/css">
div.iframe_container {position: relative; width: 100%; height: 700px; background-color: #F0F;}
div.custom_functions {position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 1; background-color: #FF0; height: 200px;}
</style>
update the values as needed and make it fit your needs
I had generated multiple headers for every page of pdf will be made (dompdf)
Headers are fixed, top: 0px, width: 100%.
My problem is, on the second page and 3rd and so on, my header is over my text content instead to have a margin-bottom. If i put a margin bottom to header, nothing will happen (even if i put margin top for that text content).
What should i do?
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
margin-top: -180px;
}
#header img {
height: 175px;
width: 1000px;
float: right;
margin-top: 85px;
margin-right: 50px;
}
HTML:
<div id="header">
<img src="sd-logo.jpg"/>
</div>
Thanks.
When using fixed-position element you'll want to place it in the margins of the document to prevent overlapping the body content. You attempted to do so by specifying a negative margin, but those are not fully tested. I'd recommend using negative positioning.
CSS:
#header {
position: fixed;
top: -180px;
width: 100%;
}
#header img {
height: 175px;
width: 1000px;
float: right;
margin-top: 85px;
margin-right: 50px;
}
HTML:
<div id="header">
<img src="sd-logo.jpg"/>
</div>
Also note that, because fixed and absolutely positioned content is removed from the document flow, margins do not affect rendering of any other content.
I have a searchbar in my header, which I need centered horizontally and just a little bit above the bottom of the header. I was able to achieve this by using
display: flex;
justify-content: center;
align-items: center;
The problem I am having now is that although it is responsive when you make the window smaller horizontally, It is a total mess when you resize the window vertically. I am pretty sure it's because I used margin-top: 350px; to set the vertical position. I also would much rather not use flex display because it isn't supported by much yet. Below is a screenshot of how it looks normaly, and one of how it looks when the view is altered vertically. Also the code pertaining to it. If anyone could help me figure out how to get the searchbar to be responsive vertically, that would be great!
How it is normally:
How it looks when you change the screen size vertically (the searchbar is behind the images):
HTML:
<div class="outcont">
<div id="top" class="header">
<div class="wrap">
<div class="col1"><img class="logoi" src="<?php bloginfo('stylesheet_directory'); ?>/images/main-logo.png" alt="<?php bloginfo('name'); ?> Logo" /></div>
<div class="col2"><?php wp_nav_menu(array('menu' => 'global-nav', 'container' => '')); ?></div>
</div>
<?php get_search_form(); ?>
</div>
CSS:
#searchform div {
shadow: 4px 7px 4px #000000;
margin-top: 350px;
display: flex;
justify-content: center;
align-items: center;
}
#searchform .text {
font-family: 'Merriweather';
padding-left: 35px;
height: 75px;
width: 600px;
font-size: 220%;
color: #B7B7B7;
border-radius: 50px;
background: white url('images/search-img.png') no-repeat;
background-position: 96% center;
}
#searchform .text:focus {
background-image: none;
}
#searchform .text img {
margin-right: 25px;
}
Check out this Fiddle I have made for you.
I have my main div with a background-image and the input inside of that div with the css like so:
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
margin-bottom: 0px;
right: 0;
}
#hero input {
position: absolute;
width: 200px;
height: 34px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 5px 10px;
border-radius: 50px;
outline: none;
}
This way the textbox will always stay in the center of the image no matter how the browser is scaled. In order for this to work the textbox must have a defined width and height.
So in your case replace your css for the searchbox with the css I have for #hero input and set the parent divs position to relative with position: relative;.
Please let me know how this works out for you.
Hope this helps!
I am trying for a video background on my index page which works fine on HTML page but doesn't work on PHP.
<div class="header-container"> <div class = "video-container"> <video preload = "true" autoplay = "autoplay" loop= "loop" volume = "0" poster = "pic.jpg"> <source src = "mp4/fa.mp4" type="video/mp4" > </video> </div> </div>
.header-container { width:100%; height: 900px; border-left: none; border-right: none; position: relative; padding: 20px; }
.video-container { position: absolute; top: 0%; left: 0%; height: 100%; width: 100%; overflow: hidden; }
video { position: absolute; z-index: -1; opacity: 0.78; width: 100%; }
I want to make it work on php.
I am not able to figure out why it isn't playing on localhost, although it displays the text content perfectly. Only video playback is not visible.
Okay so I have tried to implement Google Maps as a background to my website. But when I try to put text over it using this code:
.content{
z-index:0;
background-color:fffff;
position: absolute; top: 0; left: 0;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}
And that is giving me an error with the map it is displaying it on top of the map, which is what I want but it is not working with with margins for some reason. All my code is here: http://pastebin.com/uz6wwtYZ
Can anyone help me because I want the content in the center of the webpage and the map to act as the background.
Thanks.
Try adjusting the top and left instead of margin when an item is set to an absolute position:
.content{
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 100px;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}
Hope that helps? Also might want to set a higher z-index value as I have done above.
If you want it horizontally centered with auto margin values but also absolutely positioned, I don't think you can do that.
You can try this instead by giving your content an absolute width and offsetting the left property:
.content{
width: 500px;
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 50%;
height: auto;
margin: auto;
margin-left: -250px; /* half the value of the width */
}
Here's a link to a JS Fiddle that uses your code: http://jsfiddle.net/4FLKt/1/ Seems to be working fine.
Mikey.
Did you try putting the content on top of the map?
#map {
z-index:1;
}
.content{
z-index:100;
}
This is because your using position: absolute; and that is not working togetter with margin:auto;.
Place a div around it with a full width over the google maps and make that absolute... then in that div you can center a other div.
Example
<div> //This div has position:absolute; and the width of the Google maps chart.
<div> //This div has margin:0 auto;
Content here
</div>
</div>