I've transparent bar which has conflict with <div id="content">
When position:relative;of #content is active the page looks like this:
When position:relative;of #content is missing transparent bar is okey
http://jsfiddle.net/t0p95q9c/
How to make that bar was transparent with relative position of my content?
You need property z-index:1 to #navigation, as LcSalazar says
and you also need add z-index:2 to .MetroMenuBox, instead of invalid 999px (px is not a valid)
#navigation {
z-index:1;
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
.MetroMenuBox{
position: fixed;
background-color: #111111;
padding-left: 5px;
padding-right: 5px;
z-index: 2;
}
http://jsfiddle.net/t0p95q9c/2/
When you specify a position property, the element is affected by the z-index properties.
So, give the navigation a high z-index value, that would place it in front of every other positioned elements, like:
{
z-index: 100;
}
http://jsfiddle.net/t0p95q9c/1/
check this out:
http://jsfiddle.net/t0p95q9c/3/
#content {
z-index: 1;
}
#navigation {
z-index: 2;
}
The idea is to use a bigger integer as the z-index of the layer on top.
Related
I have a problem I couldn't solve.
I have two html elements that I don't want to be in top of each other like the pictrue.
What I want to do is to seperate them away from each other so user can see them
The banner css code:
.banner {
width: 100%;
height: auto;
position: relative;
z-index: auto;
}
The product css code:
.product-grid {
text-align: center;
padding: 0 0 72px;
border: 1px solid rgba(0, 0, 0, .1);
overflow: hidden;
position: relative;
z-index: 1;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
}
I tried everything it won't work.
Try change
Product grid position to absolute
How can I set z-index of the drop-down autocomplete box over a background image?
Here is a screenshot:
Below four images are background images with sprite CSS and the area box is drop-down autocomplete and it has position set to absolute and z-index set to 100, but still it's not overlapping background image.
Here is the CSS for the drop-down box and the bottom section.
Drop Down Box:
.tt-dropdown-menu,
.tt-menu {
position: absolute;
top: 79%!important;
left: 9px!important;
z-index: 1000;
min-width: 160px;
width: 94%;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0px!important;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
Below Section:
.hero-banner {
color: #555;
padding-top: 50px;
padding-bottom: 50px;
background-color: #EFEDEB;
border-bottom: 1px solid #D2D2D2;
}
Sprite CSS:
.why_casebox {
background-image: url(../images/why-casebox/why_casebox.png);
background-repeat: no-repeat;
display: block;
margin: auto;
}
.sprite-verified {
width: 128px;
height: 128px;
background-position: -143px -143px;
}
Even though the title and description text are also overriding.
.hero-banner {
z-index: 0;
}
or
I don't know whether it is position above for whole div or for the third child with icon.
.why_casebox {
z-index: 0;
}
so that image will position behind the dropdown.
I have 2 elements sharing the same class .cta. The CTA inside of .casino-box looks great, however the one inside of .header-box is accounting for the 165px of space taken up by .top-nav-bar and .nav-bar.
How can I get the top CTA to ignore the added spacing of those two nav bars, without having to split the css code for the CTAs?
Link to CodePen
.cta {
max-width: 600px;
margin: 0 auto;
text-align: center;
position: relative;
top: 50%;
margin-top: -80px;
}
.cta h1 {
color: #fff;
weight: 500;
text-shadow: 0px 0px 4px black;
}
.cta .button {
color: #fff;
border-color: #fff;
font-weight: bold;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
text-shadow: 0px 0px 4px black;
}
.cta .button:hover {
color: #90281F;
background: #fff;
text-shadow: none;
}
.cta hr {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
}
You have to set negative margin-top with the height of .top-nav-bar and .nav-bar plus your normal margin so the two div could be aligned in center. In this case it would probably be as following:
.header-box .cta {
margin-top: -205px;
}
So, I have this made.
HTML
<div id="navholder" class="bgd">
<nav id="nav">
<ul>
<li>Почетна</li>
<li>Делатност</li>
<li>Историјат</li>
<li>Службе</li>
<li>Колектив</li>
<li>Контакт</li>
</ul>
</nav>
</div>
#navholder {
height: 60px;
text-align: center;
margin: 0 auto;
}
#nav {
height: 30px;
margin-top: 10px;
background: #B8860B;
}
#nav ul li{
margin-top: 3px;
display: inline;
font-size: 120%;
opacity: 1.0;
}
#nav ul li a {
display: inline-block;
height: 120%;
padding: 5px;
-webkit-box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
-moz-box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
border: 1px solid white;
opacity: 1.0;
background: #DAA520;
}
#nav a:hover {
color: white;
background: black;
width: ?
}
I want the buttons once hovered over with a mouse to increase about 20%. The problem that I found is if I use the exact width like "width: 60px not every button is of the same size.
On the other hand if I use width: 120% I believe the page takes the width of the whole #navholder element which is defined by the class .bgd.
Any ideas on how can I make this happen?
Thanks.
You could use transform: scale()
jsFiddle example
#nav a:hover {
transform:scale(1.3,1.3);
-webkit-transform:scale(1.3,1.3);
-moz-transform:scale(1.3,1.3);
}
Just increase the padding on hover:
#nav a:hover {
color: white;
background: black;
padding: 5px 10px; /* 5px top/bottom, 10px left/right */
}
You may set width with em's and increase font-size.
Also, you may add border/padding on hover:
#nav a:hover {
border-right: solid 20px black;
/* or padding-right */
}
I have been working on debugging our web app for days now, and I am not sure what is causing it to crash in mobile safari. The app works wonderfully on the iPad2, but for some reason it crashes on the iPad3. I commented out every piece of code, and what seems to be the problem is absolute positioning on an element. Here is my code for the section.
.page .main-content .study-bo {
background: #F4F4F4;
border-top: 1px solid #D1D1D1;
border-bottom: 1px solid #D1D1D1;
width: 644px;
position: absolute;
top: 501px;
left: 0px;
padding: 30px 40px;
z-index:500;
-webkit-transition: top .5s ease-in-out;
}
.page .main-content .study-bo .text {
width: 100%;
height: 100%;
position: relative;
left:auto;
}
.page .main-content .study-bo p {
font-family: "FrutigerRoman";
font-size: 12px;
color: #000000;
margin-bottom: 15px;
}
.page .main-content .study-bo .study-design {
width: 92px;
height: 20px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199, 199, 199, 1)), color-stop(100%,rgba(167, 167, 167, 1)));
-webkit-border-radius: 5px 5px 0px 0px;
border: 1px solid #999;
font-family: "FrutigerItalic";
font-size: 13px;
color: white;
text-shadow: 1px 1px 0px #8E8E8E;
filter: dropshadow(color=#8e8e8e, offx=1, offy=1);
text-align: center;
padding-top: 4px;
-webkit-box-shadow: inset 0px 1px 0px 0px #e5e4e4;
position: absolute;
top: -26px;
font-style: italic;
z-index: 50;
left: 44px;
}
.page .main-content .study-bo .study-design .btn.active {
background: #6c6a6a;
text-shadow: 1px 1px 0px #434343;
filter: dropshadow(color=#434343, offx=1, offy=1);
-webkit-box-shadow: inset 0px 1px 0px 0px #9e9d9d;
}
The part in the code that is making the app crash is:
position: absolute;
top: 501px;
left: 0px;
I am not sure if this is an apple bug? I have multiple elements positioned absolute with no problems. If I comment out those three lines (and only those three lines), the app works. I have tried commenting out other sections of my code and keeping those three lines in, and it doesnt work. Anyone have any suggestions?? Thank you!
It could be a bug, but it's hard to say without seeing and exploring the webapp first-hand. I would try to fiddle with the layout to try to:
get relative positioning to work, instead of absolute,
using percentages instead of pixels in the top and left attributes,
working with float:left or float:right, with margins or padding, instead of absolute positioning,
apply a CSS reset/normalizer before your other CSS, like normalize.css, to see if that magically fixes the problem,
or as a last resort, look into an alternative layout that doesn't force you to use absolute positioning here.
These are all shots in the dark, but maybe they'll help.