On my page, I have assigned the video area the maximum z-index value in Opera but still the footer and the header are coming on top of it. Please guide me. Thanks.
<div id="lightbox" style="z-index:16777271;">
<p>Click to close</p>
<div id="content"> <a href="#">
</a>
</div>
</div>
You must remove the z-index:10 from the #main rule.
Right now, this rule creates a new stacking context and all its contents are affected by its own z-index.
Read https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context for more info.
Related
This site: https://dev.romaycorp.com/shop/
If you hover over "Products" the images underneath overlap. Some random elements appear on top, some don't. Those images do.
The borders on this page do the same thing: https://dev.romaycorp.com/product-category/silicone-nitrade/
I've tried every z-index setting on every element imaginable.
I cannot solve this one.
Your CSS is little awkward. But found your mistake.
Add to class .product-category .product z-index: -1 this will fix your problem.
Here the source you should add:
<li class="product-category product">
<a href="https://dev.romaycorp.com/product-category/cermet/"><img src="https://dev.romaycorp.com/wp-content/uploads/2017/07/store-cermet-insert-2.jpg" alt="Cermet" width="300" height="300" data-pin-nopin="true"> <h2 class="woocommerce-loop-category__title">
Cermet <mark class="count">(72)</mark> </h2>
</a>
</li>
I have one child div vertically centered under a parent div {parent div has a certain height}. I have assigned the child div with height:100% but it is not taking this property only on safari. Here is a screenshot about the issue.Safari bug
Everything is working fine in chrome and moz but safari. Here is the live version of the website. http://www.ravnapp.com/
Any help will be appreciated, Thank You !
Update: Here is the relevent html code.
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
<div class="action-image uk-position-relative">
<div class="uk-cover-background">
<img src="img/action1.png" width="100%" height="" alt="">
</div>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
<div class="uk-vertical-align-middle">
<h1 class="avenirlight">TOTAL PRIVACY <br><span class="avenirmedium">AND CONTROL</span></h1>
<p class="desp blenderbook">Ravn is yours to use as you like. Everything is safe and secure and even your notifications are fully disguised. Your privacy is our priority.</p>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
<div class="uk-vertical-align-middle">
<h1 class="avenirlight">EXHALE, <br><span class="avenirmedium">FINALLY</span></h1>
<p class="desp blenderbook">Ravn is 100% discreet. All your activity is stored within Ravn so you won’t have any surprises popping up in your chat history or camera roll. We’ve got your back.</p>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
<div class="action-image uk-position-relative">
<div class="uk-cover-background">
<img src="img/action2.png" width="100%" height="" alt="">
</div>
</div>
</div>
It looks like the container divs don't actually have a height set on them and they need to have a height before the content can vertically center. since you are going full screen and setting width to 50% and want the height to match.. just add
height: 50vw;
to each container. This will set the height to half the viewport width, which will match the width of the box given your current setup.
You will have to adjust your images to be actually square though as they are a few pixels short.
I am trying to add space between elements <header> and section <section> but they are stuck to each other, such that when I apply margin to the bottom of the the top element or at the top of the bottom element, the top element moves down along with the bottom element, this only happened after I added the footer.
And I did a search but I was not able to find solution for this.
Thanks to All..
.hclass {margin-bottom:20;} // header - the top most part, need space below this
.tryi {margin:top;} //section the second part, need space above this
#divfootr {width:100%;height:auto;position:absolute;bottom:0;text-align:center;} // footer code
<header class="hclass">
<nav id="indxpg">
<div class="mainnav">
</div>
</nav>
</header>
<section class="tryi">
<div id="logotable">
</div>
</section>
<footer class="footer">
<div id="divfootr">
<p><span class="copyright"><strong>© 2016</strong></span></p>
</div>
</footer>
Your way to add margin is incorrect. It must be something like this (for a fixed margin) :
margin-top:20px;
Your missing px.
.hclass{margin-top:20px}
I think it'll be best for anyone wanting to help to check my website and see the issue for him or herself. (iPad required..)
www.....net
As you see, I have 2 sections, one top section and one lower section, both have height 100%.
The lowest section has 4 div's with different shades of blue as background-color. Now..
on the iPad (and only in safari,) I get this issue where the background-color of the lowest section div's of my website get totally messed up or collapses when I change from portrait to landscape or in reverse.
My guess is that because safari has this new feature (as of ios 8) where when you scroll down the tabs section disappears, this in fact makes the viewport or height of the website really higher than the 100% that was previously sufficient, that is, before it disappeared, now if you make the tab come back when you're all the way down my page (by tapping it,) you'll see that this is true..
Is there some way to fix this?
If you need code here please ask but I think it'll be best for you to check it out yourself first.. because I have no idea where to start..
EDIT:
(by the way.. strange enough this does not happen on my iphone 6..)
Bowser.
<div id="bl-main" class="bl-main">
<section>
<a href="http://www.blog.elliotwagner.net">
<div class="bl-box">
<h2 class="bl-icon bl-icon-about">Blog</h2>
</div>
</a>
</section>
<section id="bl-work-section">
<a href="about.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-works">Résumé</h2>
</div>
</a>
</section>
<!-- For this section you need to set the top to be 50% not -50% -->
.bl-main > section:nth-child(3) {
top: 50%;
left: 0;
background: #5071B8;
}
<section>
<a href="books.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-blog">Books</h2>
</div>
</a>
</section>
<section>
<a href="about.html">
<div class="bl-box">
<h2 class="bl-icon bl-icon-contact">About</h2>
</div>
</a>
</section>
<div style="clear: both;"> </div>
</div>
The main structure I'm using is:
<div class="portfolio-thumbs">
<div class="col-md-4 thumb-item">
<a href="#">
<div class="thumb-img">
<img src="./img/portfolio/rocksea.jpg" class="img-responsive" />
<div class="thumb-overlay"></div>
</div>
</a>
</div>
...
</div>
I've created a full JS Fiddle here
I'm looking to add a semi-transparent overlay to the image (will later be adding transition and some content to slide in from bottom of each image), yet can't seem to get it to appear.
Have compared to couple of other articles on SO but none seemed to fit the bill.
I've done this a thousand times before, any idea what's going wrong with this?
With help of #ZachSaucier , adding 100% height to all elements in tree. Also adding:
div.latest-work div.portfolio-thumbs div.thumb-item a div.thumb-img div.thumb-overlay {
position: absolute;
top: 0;
}
Made the overlay sit on top of the img.
Updated fiddle here