I've got a div with some text hidden by default. When you click on button, it will apear, but in IE11 (which I got), some part of div is covered under youtube iframe and I don't know, how to repair it :(
Here is the image of the problem:
HTML
<div class="product-spec-wrapper" style="z-index:999;">
<div class="product-spec-button">
<p>Specifikace produktu</p>
</div>
<div class="product-spec-holder" style="position:absolute; z-index:1001;">
<div class="additional-information-inner">
<div class="onajwrap">
<div class="product-spec-content">
//some content here
</div>
</div>
</div>
</div>
</div>
<div class="entry-content">
<div class="clicker"></div>
<div class='product-youtube'>
<h2>Video</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xF9yc5QtNzc?feature=oembed" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
.product-page .product-spec-wrapper {
width: 314px;
height: 50px;
position: relative;
z-index: 999;
padding-bottom: 18px;
border-bottom: 1px solid #d9d9d9;
padding-top: 20px;
}
.product-page .product-spec-wrapper .product-spec-holder {
position: absolute;
padding: 20px;
right: 0px;
top: 69px;
display: none;
}
.product-page .product-spec-wrapper .product-spec-holder .additional-information-inner {
position: relative;
background: none #f5fee7;
}
.product-spec-wrapper .additional-information-inner .onajwrap {
width: 920px;
height: 350px;
overflow-y: auto;
padding-left: 2px;
padding-right: 18px;
}
.clicker {
display: none;
position: fixed;
z-index: 998;
width: 5000em;
height: 5000em;
background-image: url("images/transparentspot.png");
left: 0px;
top: 0px;
}
.clicker.active {
display: block;
}
.product-page .entry-content {
float: left;
width: 613px;
}
.product-youtube {
width: 613px;
margin: 20px 0 20px 0;
}
.product-youtube iframe {
position:relative;
}
try this
.product-youtube iframe {
position:relative;
z-index: 1;
}
I solved my problem with adding wmode=opaque; to an iframe.
Related
I have a div on my that contains pieces of information on my webpage. I'm having a problem where when the window gets smaller, part of the div gets cropped off the page.
Notes:
I have in my CSS inside my body element overflow-x: hidden;
The element that is spilling off the page contains a parent element. However, the parent element doesn't spill off the page.
View my code here
https://codepen.io/Tech-World/pen/ExLgNZq
Code added below:
scrollTo (0, 800)
body {
overflow-x: none;
}
.homepage-info {
position: absolute;
top: 1100px;
width: 100vw;
}
.why-heading {
text-align: center;
}
.info-blocks {
background-color: rgb(29, 31, 29);
height: 100px;
padding: 500px;
position: relative;
top: 50px;
padding-bottom: 300px;
max-width: 100%;
}
.info-block {
text-align: center;
background-color: rgb(204, 204, 204);
color: white;
width: 25%;
height: 200px;
padding: 30px;
margin: 50px;
border-radius: 10px;
}
#affordable {
position:absolute;
bottom: 500px;
left: 1245px;
}
#real-code {
position:absolute;
top: 400px;
left: 650px;
}
#in-person {
position:absolute;
bottom: 500px;
left: 40px;
}
#code-line-1 {
color: white;
position: absolute;
bottom: 825px;
left: 43.5%;
}
#code-line-2 {
color: white;
position: absolute;
bottom: 800px;
left: 35.5%;
}
<div class="homepage-info">
<h1 class="why-heading">Scroll down and shrink your window size</h1>
<div class="info-blocks">
<div class="fade-out info-block right-align " id="affordable">
<h2>Salve</h2>
<p>Test</p>
</div>
<div class="fade-out info-block left-align" id="real-code">
<h2>Hola</h2>
<p>Test</p>
</div>
<div class="fade-out info-block right-align" id="in-person">
<h2>Dobro</h2>
<p>Test</p>
</div>
</div>
Check below link for revised code.
https://codepen.io/nandujasthi/pen/zYjKzJz
Left of the div is mentioned in pixel with absolute position of element. Instead you can use the percentages to make it work efficiently in all the devices. Please check the link
body {
overflow-x: none;
}
.homepage-info {
position: absolute;
top: 10%;
width: 100vw;
left: 0;
}
.why-heading {
text-align: center;
}
.info-blocks {
background-color: rgb(29, 31, 29);
height: 100px;
padding: 500px;
position: relative;
top: 5%;
padding-bottom: 300px;
max-width: 100%;
}
.info-block {
text-align: center;
background-color: rgb(204, 204, 204);
color: white;
width: 25%;
height: 200px;
padding: 30px;
margin: 50px;
border-radius: 10px;
}
#affordable {
position:absolute;
top: 5%;
right: 10%;
}
#real-code {
position:absolute;
top: 45%;
left: 33%;
}
#in-person {
position:absolute;
bottom: 500px;
left: 10%;
}
#code-line-1 {
color: white;
position: absolute;
bottom: 825px;
left: 43.5%;
}
#code-line-2 {
color: white;
position: absolute;
bottom: 800px;
left: 35.5%;
}
<div class="homepage-info">
<h1 class="why-heading">Scroll down and shrink your window size</h1>
<div class="info-blocks">
<div class="fade-out info-block right-align " id="affordable">
<h2>Salve</h2>
<p>Test</p>
</div>
<div class="fade-out info-block left-align" id="real-code">
<h2>Hola</h2>
<p>Test</p>
</div>
<div class="fade-out info-block right-align" id="in-person">
<h2>Dobro</h2>
<p>Test</p>
</div>
</div>
</div>
Within my header, I am trying to place pending-button-notification over theimages-cart image. For some reason, the pending-button-notification div is showing on the left side of the header div.
Does anyone see why this isn't placing correctly?
This is the problematic code:
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
header {
width: 100%;
max-width: 100%;
height: 100px;
position: relative;
border-bottom: 1px solid #E5E5E5;
}
#header-wrap {
width: 90%;
height: 100%;
margin: auto 5%;
}
#header-logo {
width: 200px;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.header-buttons {
width: 30px;
height: auto;
float: right;
margin: 30px 40px 0 50px;
cursor: pointer;
}
.header-buttons:first-child {
margin-right: 0;
}
#pending-order-button {
position: relative;
}
#pending-button-notification {
border-radius: 15px;
background: #09afdf;
height: 25px;
width: 25px;
position: absolute;
color: #FFF;
font-size: 1.3rem;
top: 5px;
left: 5px;
text-align: center;
}
<header>
<div id="header-wrap">
Logo
<img src="images/menu.png" class="header-buttons" alt="Pending Orders">
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
</div>
</header>
It's your float:right on .header-buttons which is causing the problem.
I suggest that you remove that and float the #pending-order-button div instead so that it and all it's content is moved to the right.
#pending-order-button {
position: relative;
float:right;
}
As the title says: I need the 'info-box' to not be fixed while the head-box and head-in-block are fixed.
I know it is possible. I have a live example: http://www.marktplaats.nl/.
The orange box is fixed (head-box) then the white part (my info-box) is not fixed. And the Title block is fixed again (head-in-block).
This is the css and html I'm using right now. What adjustment needs to be made to make the middle (white) box not fixed?
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
Do you guys see the website the same I do?
The website you linked to hides the white box when the header is sticky. So to do that here, you would hide #info-box when #head-block has class .fixed
.fixed #info-box {
display: none;
}
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
.fixed #info-box {
display: none;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
I'm practicing my HTML by making a website, and I'm making a header with buttons.
I'm trying to make the button the full height of the header, but it's going out of the header for some reason, and not going to the top.
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
You can reset the vertical-align(defaut is baseline) value on inline-block elements whenever needed. here vertical-align:top; will do fine :
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
For a to cover the div, you may also use height or eventually line-height:
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-a a {
display:block;
line-height:70px;/* will size it up to 70px height for each line */
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
I changed it to this code. What I did was to change the display to block (in both header-a and header-h) instead of inline-block. I then floated both elements left. Run the snippet to see it in action
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
margin-top: 20px;
}
#header-h,
#header-a {
display: block;
float: left;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
Rather than setting the height of your menu bar to 70px, you could let the contents within the menu bar size its height. That way you can vertically centre the Home button. JSFiddle
HTML
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
CSS
#header {
position: fixed;
background-color: #1564B3;
color: #fff;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
background-color: #555555;
display:inline-block;
padding:30px 50px 30px 50px;
width:10%;
text-align:center;
}
#header-h {
display:inline-block;
width:30%;
text-align:center;
}
Do you see how the padding of #header-a not only vertically centres the Home text but also how the #header sizes to fit it.
So I have this fixed header which has z-index:10, below that a fixed banner and then below that a relative content container. What I want is that the content scrolls over the banner but under the header. However, when I try to scroll it doesn't work. The strange part to me is that whenever I add box-shadow: 0px 0px 2px rgb(100,100,125); to the content container it does do what I want. I'm using the following code:
* {
padding: 0;
margin: 0 auto;
}
body {
background: rgb(223,227,238);
text-align: center;
}
#body_container {
padding-top: 80px;
}
#banner_container {
position: fixed;
left: 0;
right: 0;
}
#banner {
width: 1024px;
height: 300px;
}
#content_container {
background: rgb(243,247,248);
max-width: 1024px;
height: 100%;
position: relative;
top: 300px;
box-shadow: 0px 0px 2px rgb(100,100,125);
}
header {
min-width: 100%;
background: rgb(50,50,50);
height: 80px;
position: fixed;
z-index: 10;
}
/* Header styling, not relevant */
#header_container {
max-width: 1024px;
height: 100%;
}
#header_container div {
float: left;
display: inline-block;
width: 25%;
}
#logo {
width: 50%;
height: auto;
}
.menuItem {
padding-top: 29px;
height: calc(100% - 29px);
border: 0;
text-align: center;
font-family: Signika;
font-size: 25px;
color: rgb(203,207,218);
}
.menuItem:hover {
border-bottom: 4px solid rgb(59,89,202);
height: calc(100% - 33px);
color: rgb(160,170,218);
}
.menuLogo {
padding-top: 14.5px;
height: calc(100% - 14.5px);
border: 0;
text-align: center;
}
#mobile_menu_button {
display: none;
}
<header>
<div id="header_container">
<div class="menuLogo">
<img id="logo" src="img/desygn%20logo%20website.png">
</div>
<div class="menuItem">Home</div>
<div class="menuItem">Over</div>
<div class="menuItem">Contact</div>
<div id="mobile_menu_button">
</div>
</div>
</header>
<div id="body_container">
<div id="banner_container">
<img id="banner" src="img/banner_website.png">
</div>
<div id="content_container">
</div>
</div>
In your code you've not added any content under content_container. I don't see any issue with your code. It is working fine. Check here with content