I want to show a close/cancel button on full screen youtube video, but youtube video iframe has z-index 2147483647 and I have also set same z-index to my div but it is not showing above iframe.
Here is my code :
<body>
...
// some other content
...
<div id="custom_button">close</div>
// iframe
</body>
I have used below code to full screen iframe :
var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen)
{
requestFullScreen.bind(iframe)();
}
And I have set css for custom_button :
z-index: 2147483647;
position: absolute;
top: 30%;
right: 1%;
color: #fff;
cursor: pointer;
width: 50px;
height: 50px;
But it is not showing above full screen iframe.
How to do that?
Related
I'm trying to center my content div. It's set to 100%, and the div is contained in body, which is also set to 100%. I have a max-width: 1400px because I don't want my content to stretch more than that if the screen resolution is higher. The thing is, it doesn't work using margin: auto. My content stands on the left, uncentered on screen wider than 1400px.
If I delete the max-width, everything is perfectly centered on wide screens, but the content is stretched to the the whole screen...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Easiest way to achieve this, is to set the width property to the max width you need, and add max-width: 100%;. This will prevent it from being bigger than 100% but still go up to the max width. Also, you should remove the absolute positioning:
JS Fiddle
You can use the transform technique, which doesn't require extra mark-up or media queries.
#content {
position: relative; /* 'fixed' will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Here's a demo https://jsfiddle.net/matharden/6uduf7av/
Use Flexbox...
Put this classes in the parent element (the body):
The HTML
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Where:
p-flexbox means parent-flexbox
flex-hcc means flexbox-horizontal-center-center
The CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Cheers,
Leonardo
At my site on the first page i have two images put together so it looks like a sunset. I want to my logo to go down between them as if it was the sun, but i cant make this happend. The logo is currently at the second page of the site
Heres i the html:
<div id="intro">
<div id="introbaggrundbagved"></div>
<a name="section1" class="section">SECTION 1</a>
<div id="logo">
</div>
</div> <!--#intro-->
And the css:
#intro{
background: url('images/introforan.png') no-repeat center;
height: 900px;
margin: 0;
position: relative;
z-index: 3;
}
#introbaggrundbagved{
background: url('images/introbagved.png') no-repeat center;
height: 900px;
width: 1440;
margin:0;
position: relative;
}
#logo{
background: transparent url('images/logo.png') no-repeat center;
width: 600px;
height: 600px;
position: relative;
margin-left: 420px;
margin-top: 100px;
z-index: 2;
}
You need to take the #logo div out of its parent element #introand give it a z-index that is larger than both of its siblings— then wrap all of the header elements into an #intro-wrapper div. In addition, I would then position the #logo element using position: absolute, instead of relative, this will give you more granular control on it's placement without disturbing the document flow of the surrounding elements.
Also, it appears that you have the function parallaxScroll updating the top property of #logo, which will prevent the element from being placed between your two images.
function parallaxScroll(){
var scrolledY = $(window).scrollTop();
$('#logo').css('top','+'+((scrolledY*.376))+'px');
....
}
My modal css settings are:
.ModalWindow {
background-color: #FFFFFF;
position: absolute;
top: -1000px;
display: block;
z-index: 1000;
border: 0px solid #000000;
border-radius: 6px;
}
I haver a textbox in y modal popup and the color picker sits next to it. but when I click the colorpicker it goes behind the modal popup.
Add following css style rule: .ajax__colorPicker_container { z-index: 1001 !important; } or change z-index property of .ModalWindow class to 999;
I want to make the header and footer backgrounds to be repeated on x. So it takes all the width size of any page resolution.
This is how I want it to look like:
An this how is being displayed:
I'm using the 960 gs, every div is limited to 960px. Is there a way to expand the color of the div through x?
See the project here:
http://gabrielmeono.com/yonature/
yes there is
you have to split the page into 3 parts: header, body, footer
what we're gonna do is create divs with a little bit of CSS. we will have a div that goes all the way to the sides of the website, and a div which is centered.
i'll show you how to do it for the header, and you make the same thing for body/footer:
<html>
<head>
<style type="text/css">
html{}
body { margin: 0px; width: 100%; }
#headerCenter { float: left; width: 100%; text-align: center; color: #00AA00; height: 120px; }
#headerContainer { margin: 0 auto; width: 960px; }
#header { width: 100%; float: left; height: 120px; }
</style>
</head>
<body>
<div id="headerCenter">
<div id="headerContainer">
<div id="header">HEADER</div>
</div>
</div>
.. same for body/footer....
</body>
</html>
so the trick is:
a div (#headerCenter) which goes all the way across the page. we will define height for it, paint it's background, and set 'text-align: center;'
inside we put a div with 'margin: 0 auto;' and the desired width. NO FLOAT on this div! this will create a div with height 0, placed in the center of the parent div.
inside we put the header. we can set float left etc... width can be 100% (or 960px)
repeat this for body and for footer
another method btw is using HTML tables, which i don't like to use for layouts.
if you have any trouble setting this up, let me know and i'll do the layout for you
I'm doing some tests on a website using Wordpress as a CMS. In the example below the top left of the page has an "S" graphic outside of the main content area, clipped accordingly depending on the browser width. I would like to do something similar with an "L" graphic to the right in the footer.
The page width is set to 960px, and I've made the footer container DIV 1088px so that the "L" appears outside the content area. The trouble is this makes a scrollbar appear when it exceeds the current width of the browser.
I've tried overflow:hidden on the footer container DIV but this doesn't seem to work. I've also tried overflow:hidden on the BODY element and this works ok in IE, but not in other browsers.
Example: http://unclemort.com/wp/
I really hope there is away to do this, any help gratefully received.
I was trying to figure this out myself today and stumbled upon the answer.
What you need is a surrounding element around everything that has this:
#wrapper {
min-width: 600px; //whatever width you want
overflow-x: hidden;
}
Your main content should have that same width, and the things that need to jut out should have a negative margin.
Here's a complete example:
HTML:
<div id="outer">
<div id="container">
<div class="row">
<div class="inner">Hello World</div>
</div>
</div>
</div>
CSS:
#outer {
min-width: 300px;
overflow-x: hidden;
}
#container {
width: 300px;
margin: 0px auto;
background: gray;
height: 500px;
}
.row {
width: 350px;
background: blue;
margin-left: -25px;
}
.inner {
background: yellow;
margin-left: 25px;
width: 300px;
height: 100px;
}
#media screen and (min-width: 301px) {
body {
//overflow-x: hidden;
}
}
jsfiddle:
http://jsfiddle.net/aaronjensen/9szhN/
Try in style.css, line 65, adding:
#footer-container {
border: none;
overflow: hidden;
}
Explanation:
#footer-container #footer {
background: #f5e8f7 url('images/slobraico-footer-pink-full.gif') no-repeat top left;
width: 1088px;
height: 217px;
overflow: hidden;
}
The scrollbar you're hiding is effectively not there.
The scrollbar you're seing is another one.
The problem is that the footer is 1088px wide, and that's causing a scrollbar to appear.
As long as the footer has fixed width and it's parent doesn't have overflow: hidden, you'll get a scroll if there's not enough width for the footer to fit.
Same goes for any other container.