I've a problem with a website I'm building.
I've a menu containing 2 links (called "Default" and "Test") into list items but in Firefox I can't click them.
In IE they works: I think is a z-index problem of items on the page but I can't solve it.
<!DOCTYPE html>
<html>
<head>
<style>
.sezup li.current{
color:#067d2c;
position:relative;
z-index:20;
}
.sezup a, a:hover{
color:#067d2c;
position:relative;
z-index:20;
}
.header{
position:relative;
top:0px;
}
.sezup {
margin: 0 auto;
padding: 0 0 0 75px;
width:800px;
position:relative;
z-index:20;
}
#lineaup {
background: url("../Images/sfondobarraup.png") repeat scroll 0 0 transparent;
height: 16px;
margin: 55px 0 0;
position: relative;
z-index: 0;
top: -25px;
left: 0px;
}
#lineaup li {
bottom: 6px;
float: left;
margin: 0 10px;
padding: 2px 15px;
position: relative;
}
.loghi {
margin: 0 auto;
padding: 20px 0 0;
position: relative;
top: -45px;
width: 1000px;
height: 97px;
border:1px black solid;
}
#logo {
position: relative;
top: -20px;
float:left;
}
#calciatore {
position: relative;
float:right;
top:-50px;
}
#erba {
background: url("../Images/erba.png") repeat scroll 0 0 transparent;
height: 65px;
position: relative;
top: -110px;
z-index: 0;
border:1px black solid;
}
</style>
</head>
<body>
<div class="header">
<div id="lineaup">
<div class="sezup">
<ul>
<li class="current">Default</li>
<li>Test</li>
</ul>
</div>
</div>
<div class="loghi">
<img src="" title="logo" id="logo" /><img src="" title="logo" id="calciatore" />
</div>
<div id="erba">
</div>
</div>
</body>
</html>
Because of the stacking context, once you set a z-index on a parent element, you can't "break out" of it by setting a higher z-index on a child element.
Usually it's a lot easier to deal with by removing all the superfluous z-index values and only adding them where you need it.
See demo here
Get rid of all z-index except for:
#lineaup {
z-index: 1;
}
and
#erba {
z-index: -1;
}
You should only change the z-index of the parent elements. There's no reason to assign the children elements with higher and higher indices.
Also, since it's usually just one element behind another, this -1 and 1 solution not only works but looks nice, and is easy to understand, I think.
For the record, negative z-indices are allowed.
Increase the z-index for #lineap
#lineaup {
z-index: 1;
...
}
http://jsfiddle.net/willemvb/wxWBm/
Related
I have some html and while things are loading I have a <div> that display while it loads, when it is loading currently the loading appears above everything, but I want the header to be above the loading screen. Here is the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="loading">
<div id="loading-container">
<h1 id="loading_text">Loading...</h1>
</div>
</div>
<header>
<a id="logo" href="user_profile.html">
<h1 id="name">Name</h1>
<h2 id="hello">Hello</h2>
</a>
<nav>
<ul>
<li>Profile</li>
<li>Info</li>
<li>Specials</li>
<li>Social</li>
</ul>
</nav>
</header>
</body>
</html>
And here is the css
header {
float:left;
margin:0 0 30px 0;
padding:5px 0 0 0;
width:100%;
z-index: 102;
}
#logo {
text-align:center;
margin:0;
}
h1 {
font-family:'Nunito', 'sans-serif';
margin: 15px 0;
font-size:1.75em;
font-weight:normal;
line-height:0.8em;
}
h2 {
margin:-5px 0 0;
font-size:0.75em;
font-weight:normal;
}
ul {
padding: 0 0;
}
#loading {
width: 100%;
height: 100%;
left: 0px;
position: fixed;
display: block;
background: rgba(255, 255, 255, 0.5);
z-index: 99;
}
#loading-container {
position: relative;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0);
z-index: 99;
}
#loading_image {
display: block;
margin: auto;
z-index: 100;
}
#loading_text {
color: black;
text-align: center;
z-index: 101;
vertical-align: middle
}
As you can see I set the z-index of the header higher than everything else but it is still below the loading screen here is a JSBin with a running example, in the example I show the loading screen for 3 seconds.
How can I get the header above the loading screen?
Thanks
z-index woks by position. Add position:relative to the header.
Point, Note:
Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).
JSbin
Use this on the header tag:
position: relative;
this one will also work but could change the rest of the html, I don't know what else you have on it.
position: absolute;
just add in the header{}
position:absolute;
top:0;
If I've got the question right this should do what you need.
I've got a tile containing a title, a category, a link to the category, a picture and a global link to the picture. As it is, this global link is only active in a piece of the picture area. I would like it to be global.
Here is the HTML :
<div id="article">
<div class="block-module">
<a class="view-full-module" href="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg">
<img class="image" src="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg"/>
</a>
<div class="block-about">
<h2 class="block-title">Title</h2>
<span class="block-stats">Category Date</span>
</div>
</div>
</div>
Here is the CSS :
.view-full-module { cursor: pointer; top: 0px; left: 0px; z-index: 2; background: none repeat scroll 0% 0% rgba(31, 32, 33, 0); width: 100%; height: 100%; }
.image { width: 100%; }
.block-module { width: 100%; position:relative; margin:0; padding:0; cursor:pointer; border-radius:10px; z-index:4; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.author-link { color:#659dae; }
#article { top:0; margin: 0; padding:20px; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-width: 260px; -webkit-column-width: 260px; column-width: 260px; }
Here is a demo : http://jsfiddle.net/5qwejk20/4/
One option would be to add pointer-events: none to the element .block-about.
In doing so, you can essentially click through the element:
Updated Example
.block-about {
pointer-events: none;
}
Browser support for the pointer-events property can be found here.
Another option would be to move the anchor element and then absolutely position it relative to the parent in order to take the full dimensions.
The reason you need to move the anchor element in the DOM is because if it wraps the img element, then you can't have your background fading at the bottom since the anchor needs to be positioned above it in order for the click event to work anywhere within the element.
Updated Example
.view-full-module {
cursor: pointer;
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
z-index: 2;
}
<div id="article">
<div class="block-module">
<img class="image" src="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg" />
<div class="block-about">
<h2 class="block-title">Title</h2>
<span class="block-stats">Category Date</span>
</div>
<a class="view-full-module" href="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg"></a>
</div>
</div>
As a side note, you may want to add vertical-align: top to the img element in order to remove the gap under it.
Example without the gap
img {
vertical-align: top;
}
I know html and css very well , i'm looking for something like this with css not with images ?
is there any trick that can do this with Css ?
HTML
<div id="zone-user-wrapper" class="zone-wrapper"></div>
CSS
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
}
i made a fiddle
Thx
You can try something like this:
Fiddle
HTML:
<div class="zone-wrapper"></div>
<div id="shape"></div>
CSS:
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
}
#shape {
height: 20px;
background-color: white;
border-top-left-radius: 5000px 300px;
border-top-right-radius: 5000px 300px;
top: -20px;
position: relative;
}
<------------------------------------------------------------ Edit ------------------------------------------------------------->
Replicating the one on this website as you requested.
Here, I've added the border-top-left-radius: 4000px 150px and border-top-right-radius: 4000px 150px; to .content and .seperator. Then, gave appropriate z-index to all elements. .content has the highest z-index value, .zone-wrapper has the lowest z-index value and .seperator is in the middle.
<--------------------[ Fiddle | Full Screen Demo | With the Image from your website ]-------------------->
HTML:
<div class="zone-wrapper"></div>
<div class="seperator"></div>
<div class="content"></div>
CSS:
body {
margin: 0 0;
}
.zone-wrapper{
background: url(http://s25.postimg.org/4lur4kk23/pattern.png) repeat scroll 0 0 #01b888;
height:180px;
z-index: 0;
}
.seperator {
height: 50px;
background-color: #00533D;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
top: -47px;
width: 100%;
position: relative;
z-index: 1;
}
.content {
top: -90px;
position: relative;
height: 800px;
background-color: #93fbdf;
border-top-left-radius: 4000px 150px;
border-top-right-radius: 4000px 150px;
z-index: 2;
}
The Flexible Option with a single HTML element
I have focused on creating the shape with a:
single HTML element — <header></header>
flexible percentage units
The CSS
The :before and :after pseudo elements overlap to create the curve
The pseudo elements are given 100% width and will expand and retract
The box shadow helps smooth out the jagged curve and the textured background image distracts the eyes from the remaining jagged pixels
The left: -20px and padding-right: 20px hide the rounded corner and are cut-off with overflow: hidden
Image Attribution: The background image used in the example below is obtained from transparenttextures.com and was created by Atle Mo.
The Example
Open full-screen and watch it re-size.
body {
margin: 0;
}
header {
background: url(http://i.stack.imgur.com/TIgas.png);
height: 80px;
position: relative;
overflow: hidden;
}
header:after,
header:before {
content: '';
display: block;
background: #FFF;
height: 60%;
width: 100%;
position: absolute;
border-radius: 100% 100% 0 0;
top: 50%;
left: -20px;
padding: 0 20px;
box-shadow: inset 0 0 2px #333;
}
header:before {
background: #333;
margin-top: -5px;
}
<header></header>
.zone-wrapper{
background: none repeat scroll 0 0 #01b888;
height:150px;
border-radius: 40px 40px 40px 40px;
overflow:hidden;
}
.zone-wrapper2{
margin-top:10px;
display:inlin-block;
background: black;
height:130px;
border-radius: 40px 40px 40px 40px;
}
<div id="zone-user-wrapper" class="zone-wrapper">
<div id="div2" class="zone-wrapper2">
</div>
</div>
The trick is to have 2 divs. The first could be your actual header and another just beneath it having a border-radius property. So your whole header could be a wrapper around the 2.
Did some tinkering to the html of your code.
Added a div in the main header wrapper.
Check the image below:
Hope it is of help.
You can use something like this from (https://stackoverflow.com/a/4777943/3905567):
<div id="header">
<div id="cover-left"></div>
<div id="cover-right"></div>
</div>
http://jsfiddle.net/p2hH7/215/
I am stuck on something I have been trying to achieve for the past hour and a half. I have two divs on top of one another, where the top one contains an anchor that I want to center in the div. How can I achieve this?
HTML:
<div class="browser-home">
<div class="browser-bar">
<img src="img/browser-bar.png" alt=""/>
</div>
<div class="browser-canvas">
<img src="img/a2o.png" alt=""/>
<div class="browser-hover">
<a class="folio-link" href="#">view case study</a>
</div>
</div>
CSS:
div.browser-home {position: relative;}
div.browser-home img {
display: block;
margin: 0 auto;
}
div.browser-canvas {
background: #f6f6f6;
border: 2px solid #d6d6d6;
max-width:1250px;
margin: 0 auto;
}
div.browser-canvas img {
display: block;
margin: auto;
padding: 5.6em;
}
div.browser-hover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 900;
background: rgba(0,0,0, 0.7);
opacity: 0;
transition: opacity 0.34s ease-in-out;
border-radius: 5px 5px 0 0;
}
div.browser-canvas:hover div.browser-hover {
opacity: 1;
}
You can use absolute centering trick as follows
.folio-link {
display:inline-block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
height:0px; /* imp */
text-align:center;
}
Demo
My website, http://dev.markzanghi.com, is rendering incorrectly in firefox and i don't know why.
Every other browser, including IE renders it correctly. The link above will display the mistake. Basically, i need two parts to my header for an animation. Below is my CSS
/*
TOP BAR
*/
.topbar {
height: 75px;
background: url('../img/headerBGtop.png') repeat-x;
}
.bottomTopBar {
background: url('../img/headerBGbottom.png') repeat-x;
height: 6px;
position: relative;
top: 64px;
}
.topbar .headerWrapper {
max-width: 924px;
margin: 0 auto;
padding: 0 5px;
}
.bottomHeader {
position: relative;
top: -11px;
left: 0px;
z-index: 1;
}
.headerArrowImg {
width: 924px;
overflow: hidden;
}
.bottomFiller {
position: relative;
top: -24px;
background: url(/img/headerBGbottom);
height: 11px;
}
#leftBottomHeader {
}
#rightBottomHeader {
top: -35px;
}
.logo {
float: left;
margin-top: 13px;
}
.logo img {
height: 55px;
}
.topbarLinks {
float: right;
text-decoration: none;
position: relative;
top: 44px;
z-index: 10;
}
.topbarLinks a{
color: white;
margin-left:25px;
padding: 10px 0px;
}
.topbar .headerArrowImg img {
max-width: none;
position: relative;
left: -200px;
}
And the HTML:
<header>
<div class="topbar navbar-fixed-top" >
<div class="headerWrapper">
<div class="logo">
<img src="img/homeLogo.png" />
</div>
<div class="topbarLinks">
<a id="workLink" href="#"><img src="img/workLink.png" /></a>
<a id="aboutLink" href="#/about"><img src="img/aboutLink.png" /></a>
<a id="contactLink" href="#/contact"><img src="img/contactLink.png" /></a>
</div>
<div id="bottomHeaderWrap" class="bottomHeader">
<div class="headerArrowImg">
<div id="arrowImgWrapper">
<img src="/img/headerArrowImg.png" />
</div>
</div>
</div>
</div>
<div id="leftBottomHeader" class="bottomFiller">
</div>
<div id="rightBottomHeader" class="bottomFiller">
</div>
</div>
</header>
If anyone has any idea why this is not working, please let me know!
Thanks in advance.
I had the same issue with a menu animation a while back.
The "problem" is that Firefox requires an explicit declaration of both X & Y coordinates when one is declared. On several items you have declared a top (Y), but you have not declared a left or right (X).
Add a left:0 or something and you should be fine. Or, since they are position:relative, you could just convert top to margin-top.