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
Related
I'm a little stuck on this section. I've only added ACF php in html when the background image was located in the html. Now I have 2 shapes in my css with pseudo elements. How would I add the php so it works on wordpress?
HTML
<section class="main-content-section home">
<section class="hero-section" style="background-image: url(images/home-hero#2x.jpg);"></section></section>
CSS
.hero-section:before,.home .hero-section:after{position: absolute; left: 0; top: 0; content: ""; background-image: url(../svgs/Rectangle.svg); background-position: left top; background-size: contain; background-repeat: no-repeat; width: 64.25%; height: 100%; z-index: -1;}
.home .hero-section:after{background-image: url(../svgs/Rectangle-Copy.svg); background-position: right bottom; left: auto; top: auto; right: 0; bottom: -46%; width: 63.125%;}
The easiest way to do this would probably include inline <style> tags in your template, using the image from the ACF field, as you cannot use an inline style on a pseudo selector in the HTML directly.
Ie:
<style type="text/css">
.home .hero-section:after {
background-image: url('<?= get_field('your_acf_image_field')['url'] ?>');
}
</style>
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".
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!
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>
This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :
<div class="navigation">
<? if($nexts['id'] == ''){ ?>
<? }else{ ?>
<? } ?>
</div>
I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.
Here is my css:
.navigation {
position: relative;
float: left;
vertical-align : middle;
height: auto;
padding: 0;
margin: 0 -20px 0 -22px;
width: 636px;
z-index:1;
}
.navigation a.prev{
background: url('images/nav_left.png');
float: left;
width: 50px;
height: 50px;
margin-left:10px;
}
.navigation a.next {
background: url('images/nav_right.png');
float: right;
width: 50px;
height: 50px;
margin-right:10px;
}
Thanks!
So, I'm guessing that the content area height is not very static.
http://jsfiddle.net/aBzhu/
Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.
Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+
Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen
vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
.verticalCenterDivText{
height: 29px;
line-height: 29px;
}
Hope this helps....
Regards, ADynaMic