I have simple code
The problem is the red div. It is animated but it have z-index bigger than it parent so while animating it overshadowing the main div. I can solve this problem when i give to animated div z-index: -1 but :hover doesn't work properly (animated div disappears). Anyone can help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main {
width: 100px;
height: 100px;
background: green;
position: relative;
}
.main .bar {
height: inherit;
width: 300px;
position: absolute;
background: red;
left: -300px;
}
.main:hover .bar {
left: 100px;
transition: left .3s;
}
</style>
</head>
<body>
<div class="main"><div class="bar"></div></div>
</body>
</html>
https://jsfiddle.net/24qbyh4p/
The solution is wrapping the contents of .main in an inner container with a z-index greater than .bar's one.
.main {
width: 100px;
height: 100px;
position: relative;
}
.main > .bar {
height: inherit;
width: 300px;
position: absolute;
background: red;
left: -300px;
}
.main > .content {
height: 100%;
background: green;
position: relative;
z-index: 1;
}
.main:hover .bar {
left: 100px;
transition: left .3s;
}
<div class="main">
<div class="bar"></div>
<div class="content"></div>
</div>
Related
i tested the following responsive menu and it does not open with an iPhone 6 Safari:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Hamburger-Menü Test</title>
<style>
*,::before,::after{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Verdana', sans-serif;
}
body {
margin: 0;
font-size:100%;
background: #f6f8f9;
}
nav {
display: flex;
height: 80px;
width: 100%;
background: #1c3464;
align-items: center;
padding: 0 50px 0 50px;
flex-wrap: wrap;
overflow: hidden;
position: fixed;
top: 0;
z-index:200000;
border-bottom: 4px solid #9acd32;
}
nav ul{
display: flex;
flex-wrap: wrap;
list-style: none;
position:absolute;
right:20px;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color: #f2f2f2;
text-decoration: none;
font-size: 1.1em;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 0.05em;
transition: all 0.3s ease;
}
nav ul li a.active{
color: #111;
background: #fff;
}
nav ul li a:hover {
background:#526788;
}
nav .menu-btn img{
color: #fff;
cursor: pointer;
display: none;
}
input[type="checkbox"]{
display: none;
}
#media (max-width: 1200px) {
nav{
padding: 0px 10px 0px 20px;
}
.menu-btn {
position:absolute;
right:20px;
}
nav .menu-btn img{
display: block;
}
#click:checked ~ .menu-btn i:before{
content: "\f00d";
}
nav ul{
position: fixed;
top: 80px;
left: -100%;
background: #173460;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
z-index:200000;
}
#click:checked ~ ul{
left: 0;
}
nav ul li{
width: 100%;
margin: 40px 0;
}
nav ul li a{
width: 100%;
margin-left: -100%;
display: block;
font-size: 1.3em;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a{
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover{
background: none;
color: cyan;
}
}
</style>
</head>
<body>
<nav >
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAIAAAAzse47AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAZUlEQVRIiWP8//8/A+0BEx3sGLVm1Bq6WcOCSyItM+fz58/EG2RuZlqQl0OyNXv27iPeDgYGBvzZHGegSUtJkWQNHx8fHlnG0cKGdDCa0rCC0ZRGdTCa0rCC0ZQ2as2oNaPW4AMAM3MvRji4G34AAAAASUVORK5CYII=">
</label>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</body>
Hello world!
</body>
</html>
I tested also with a few my Samsung (Android) devices (Chrome)
Also with Windows (different browsers) and it works on all of them.
Any idea, what i can add so that safari will also work?
Please help ;-(
Best wishes
Daniel
The following code works well on Chrome, but on Edge the Sticky element is out of place
.main {
display: flex;
max-width: 1200px;
width: 100%;
flex-flow: row nowrap;
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
.content {
height: 1600px;
flex: 1 1;
background: red;
}
<body dir="rtl">
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Result in Edge:
I noticed that if I remove the box-shadow from the sticky component or the dir=rtl from the body. It all works as expected.
It appears to be a bug in Edge, and after one resize the window in e.g. jsFiddle, it corrects itself.
What Edge also does, with dir="trl" set on the body, it render the scrollbar on the left side of the viewport, which e.g. neither Chrome nor Firefox does.
A workaround could be to instead of swap position with dir=rtl on the body, use Flexbox's own order property, and then set the direction on the inner elements to control the flow.
Fiddle demo
Stack snippet
.main {
display: flex;
max-width: 1200px;
/*width: 100%; default /*
/*flex-flow: row nowrap; default */
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
.content {
height: 1600px;
flex: 1 1;
background: red;
order: 1; /* added, move last */
}
<body>
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Updated based on a comment.
After some more testing and research, trying to move the box-shadow, which obviously cause this issue, to an inner element such a pseudo, still offset the .sticky element.
So two simple solutions, so dir="rtl" can be kept on the body, is to either, using a pseudo, use an image to create the shadow, or, as in below sample, use the filter property.
Here I used a CSS trick to apply it only on Edge, but it can fully replace the box-shadow, and which way to go is more about how old browsers one need to support.
Fiddle demo 2
Stack snippet 2
.main {
display: flex;
max-width: 1200px;
width: 100%;
flex-flow: row nowrap;
margin: auto;
text-align: center;
font-size: 30px;
}
.sticky {
width: 300px;
max-height: 715px;
position: sticky;
top: 10px;
padding: 15px;
margin: 20px 30px 0 0;
box-shadow: 0px 5px 25px 0px rgba(41,128,185,0.15);
background: yellow;
}
/* CSS to target Edge only */
#supports (-ms-ime-align: auto) {
.sticky {
box-shadow: none;
filter: drop-shadow( -5px -5px 15px rgba(41,128,185,0.15) );
}
}
.content {
height: 1600px;
flex: 1 1;
background: red;
}
<body dir="rtl">
<main class="main">
<div class="content">Scrollable content here</div>
<div class="sticky">Sticky content here</div>
</main>
</body>
Sprite image and Firebug screen captures at http://imgur.com/a/JbYv9. Please look, lots of information there.
The site works in asp.net (now converted to php) and xampp. Not at bluehost. The CSS line background: url('../images/imgmap3.jpg'); shows "Failed to load the given url" in Firebug on bluehost but successfully loads in all other environments.
The hotspots are present on the page and work when the whole site is present. But there are no images other than that associated with #container.
It looks like some kind of permissions problem to me, but the preceding background: #fff url(../images/home2.jpg) no-repeat; statement works in all cases - same directory, same 644 permissions, same owner. I did have to add an .htaccess file to this site's root folder pointing to index.htm.
I really don't have any more hair to yank out. I'm pretty sure the problem is something simple, but I just don't see.
Ideas?
#container {
width: 760px;
height: 100%;
min-height: 500px;
border: none;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background: #fff url('../images/home2.jpg') no-repeat;
position: relative;
height: 500px;
}
#homeSpacer {
height: 236px;
width: 780px;
}
#hmMenu {
width: 523px;
height: 157px;
background-image: url('../images/imgmap3.jpg');
background-repeat: no-repeat;
margin-top: 0px;
margin-left: 167px;
margin-bottom: 10px;
padding-top: 0px;
position: relative;
}
#hmMenu li {
margin: 0px;
padding: 0px;
list-style: none;
display: block;
position: absolute;
/*border: solid 1px #000;*/
}
#hmMenu a {
display: block;
}
#hmMenu li a b {
display: none;
}
#imgWebsites {
left: 0px;
top: 60px;
width: 268px;
height: 97px;
}
#imgConsulting {
left: 76px;
top: 10px;
width: 192px;
height: 50px;
}
#imgDatabase {
left: 288px;
top: 37px;
width: 235px;
height: 83px;
}
#imgContact {
left: 332px;
top: 0px;
width: 98px;
height: 33px;
}
#imgWebsites a {
height: 97px;
}
#imgConsulting a {
height: 50px;
}
#imgDatabase a {
height: 83px;
}
#imgContact a {
height: 33px;
}
#imgWebsites a:hover {
background: transparent url('../images/imgmap3.jpg') 0px -217px no-repeat;
}
#imgConsulting a:hover {
background: transparent url('../images/imgmap3.jpg') -76px -167px no-repeat;
}
#imgDatabase a:hover {
background: transparent url('../images/imgmap3.jpg') -288px -194px no-repeat;
}
#imgContact a:hover {
background: transparent url('../images/imgmap3.jpg') -332px -157px no-repeat;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sprite problem simplified</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="homeSpacer"></div>
<ul id="hmMenu">
<li id="imgWebsites" title="Website Design and Construction"><b>Website Design and Construction</b>
</li>
<li id="imgDatabase" title="Microsoft SQL Server Database - Design, Code and Tune"><b>Microsoft SQL Server Database - Design, Code and Tune</b>
</li>
<li id="imgConsulting" title="Consulting Services"><b>Consulting Services</b>
</li>
<li id="imgContact" title="Contact e-greymatter.com"><b>Contact e-greymatter.com</b>
</li>
</ul>
</div>
</body>
</html>
It's probably a classic ex-windows-dev error (hangs head in shame). On windows, filenames aren't case sensitive. Linux is more stringent. Fixed camel filename to all lowercase.
Original site was on IIS; test site was running on xampp - both win machines. Stupid me.
Okay guys, so here's the problem, I have a set of links (3 in total, titled "News", "About" and "Contact", I wish to perfectly center these, allowing them to stay directly in the center of the users screen beneath my logo. Here's my code;
HTML;
<!DOCTYPE html>
<html>
<head>
<title>BHD - BlackHawk Drift</title>
<!--Scripts-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="scripts/fadein.js"></script>
<script src="scripts/buttonfade.js"></script>
<link rel="stylesheet" type="text/css" href="css/stylemain.css">
<!--end scrpts-->
<!--setting the basic styles-->
<style>
a:link {
color: #FAFAFA;
}
</style>
</head>
<body>
<!--Providing the text-->
<img class="displayed" src="img/text.png" alt="#blackhawk drift">
<!--end-->
<!--basic mainpage links-->
<div class="link">
<p1>About</p1>
<p1>News</p1>
<p1>Contact</p1>
</div>
</body>
</html>
CSS;
html {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 400px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 23%;
position: relative;
}
.link {
display: block;
padding: 2px;
letter-spacing: 6px;
position: relative;
margin-left: auto;
margin-right: auto;
}
And here's a visual image of what I am trying to accomplish...
EDIT: I have managed to do this!:) I just added "text-align: center;" to my class in CSS.
Just add text-align: center; to the css class ".link"
I've been scratching my head while thinking about this issue.
I have 3 divs. The top and bottom div have a min-height, the middle div has unknown height (expands by content) but should be centered in the page. The top and bottom div should then fill up the remaining top and bottom space.
http://oi43.tinypic.com/5lb3v5.jpg
I'd like to have a pure HTML/CSS solution. Refactoring the HTML structure is possible..
Thanks
Current HTML structure:
<div id="page">
<div id="top">top div</div
<div id="middle">middle div</div>
<div id="bottom">bottom div</div>
</div>
And CSS:
#page {
min-height: 100%;
height: 100%;
width: 100%;
}
#top, #bottom {
min-height: 17.5%;
height: auto !important; /* Set height to content height but keep it minimum 17.5% */
height: 17.5%; /* Some IE don't understand min-height... */
width: 100%;
}
#middle {
height: auto;
width: 100%;
}
You can use Jquery for that, like this: http://jsfiddle.net/rebeen/8YVzb/
Html:
<div id="page">
<div id="top">top div</div>
<div id="middle">middle div</div>
<div id="bottom">bottom div</div>
</div>
Css:
#page {
min-height: 300px;
}
#top, #bottom {
background: #000;
min-height: 17.5%;
width: 100%;
}
#middle {
background:#555;
height: auto;
width: 100%;
}
Jquery:
$(function(){
var pageHeight = $('#page').height();
var topHeight = $('#top').height();
var bottomHeight = $('#bottom').height();
var middleHeight = $('#middle').height();
if(middleHeight > (pageHeight-(topHeight+bottomHeight)))
$('#middle').css(height, 'auto');
else
$('#top, #bottom').height((pageHeight-middleHeight)/2);
})
The easiest way I see is table display but it depends on wich browser you have to support (http://caniuse.com/#feat=css-table).
http://jsfiddle.net/NukYE/
body,
html {
height: 100%;
}
#page {
display: table;
min-height: 100%;
height: 100%;
width: 100%;
}
#top, #bottom {
display: table-row;
min-height: 17.5%;
height: auto !important; /* Set height to content height but keep it minimum 17.5% */
height: 17.5%; /* Some IE don't understand min-height... */
width: 100%;
}
#middle {
display: table-row;
height: auto;
width: 100%;
}