I narrowed tmy issue down to the CSS Line position:relative; and if I remove it, it works, but then the category cat-work (Blue label) is shown at the top left. Idk how to fix it to be honest. Here the Code on Codepen ;
http://codepen.io/Allkind/pen/YXEjXX
article{
width:auto;
min-height:10em;
box-shadow: 0 0 4px rgba(0,0,0,.7);
margin: 1em;
font-family: 'Quicksand';
float: left;
position:relative;
}
Note : Yes the Picture is too big but I tried it with others - same result. So someone might be able to have a better solution then remove the Label?^^
It's not transparent, your navbar is being overlapped by the article tag. To fix that set z-index in your navbar.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
z-index: 2; /* the z-index */
}
Working Code
Related
I'm puzzled! The green menu is stacked behind the white header with search field. This is needed to display the page correctly, but now the green menus links become unclickable.
The white header is position: fixed;. The green menu is not fixed but has z-index -1 because apparently this is the only way to stack it behind the white header.
How do I make the links clickable?
Edit:
I tried z-index: 99; aswell as z-index: -99; for both elements. Literally the only way to stack the green menu behind the white header is to use a negative z-index number for the green menu.
Edit 2:
I also tried using opacity: .99; for the white header but no results.
.header {
margin: 32px 0 0 0;
padding: 0;
width: 100%;
height: 75px;
background-color: rgba(255,255,255,0.75);
border-top: 2px solid rgba(55,175,75,1.00);
border-bottom: 5px solid rgba(55,175,75,1.00);
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
position: fixed;
z-index: 1;
}
#menu {
position: fixed;
margin-top: 107px;
min-height: 40px;
width: 100%;
background-color: rgba(55,175,75,1.00);
border: 1px solid rgba(55,175,75,1.00);
border-radius: 0;
z-index: -1;
}
Set z-index for .header as 2 and for #menu as 1
i have searched over an hour right now after this. Im trying to find how to style a div's apperance.
http://i.gyazo.com/b3e39c4d80c74e559e832c4d22bb87c2.png
The picture show a black div with a "arrow" side on the left. How do you make those things?
here is a quick way to accomplish this.
jsfiddle demo
css
#frame{
width:90%;
border: 20px solid lightblue;
background:black;
}
.title{
font-size:3em;
position:absolute;
color:white;
top: 60px;
margin-left:80px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid lightblue;
}
html
<div id="frame">
<div class="arrow-right"></div>
<div class="title">Some text here!</div>
</div>
I would use an inverted arrow (border hacks using top and bottom border) to achieve this. You can also make it part of a pseudo-element so that your markup remains clean.
#import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);
body {
background: #BCDEB1;
}
h1 {
font-family: 'Yanone Kaffeesatz';
float:right;
background: black;
position: relative;
color: white;
padding: 0.5em 0.5em;
line-height: 1em;
margin-right: 0.1em;
box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}
h1:after {
content: '';
position: absolute;
right: 100%;
top: 0;
border: 0 solid black;
border-left: 0.5em solid transparent;
border-top-width: 1em;
border-bottom-width: 1em; /* 1 + 1 = 2. The parent is 1em line height + 0.5em top padding + 0.5em bottom padding */
box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}
<h1>Administration and etc?</h1>
Because the triangle is angled, it may be worth looking into SVG as the content of a :before pseudo element.
Here is a codepen that I almost completed for you using only CSS. http://codepen.io/anon/pen/dPVERJ
You may have to tweak it a bit to get it looking exactly like the image.
I used cssarrowplease to generate the basic arrow and tweaked it from there.
Also see http://css-tricks.com/snippets/css/css-triangle/
I would google something like this before asking here, this is a problem that has been figured out many times over.
So im doing some basic code for a school project and the latest part im on has me stuck, everything is finished so far but my links no longer work, ive tried placing them on different parts of the page but nothing still. Anyway Ive looked in firebug and elsewhere and done some searching, a lot of people had this issue because they had another object above their links, ive checked and I personally cant see anything. Would anyone be able to help me.
Edit: I just found out why it was behind, I have my z-index set in my wrapper which is blocking it. The issue now is when I remove it i loose my header image, does anyone have a way I can keep the text above the header image and keep the links working?
This is the site page
#wrapper {
position: relative;
width: 100%;
margin: 5px auto;
background-color: #e7e9fd;
z-index: -2;
}
#header {
width: 100%;
padding-bottom: 1%;
}
#headerImage {
width: 960px;
border-bottom: solid #5677fc;
position:absolute;
z-index: -1;
}
.headerText {
font-family:Arial, Helvetica, sans-serif;
-webkit-text-stroke: 1px black;
color: white;
text-shadow: 3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
font-size: 250%;
position: inherit;
z-index: -1;
padding-top: 4%;
padding-bottom: 4%;
padding-left: 2%;
}
The problem is with your #wrapper. Change that z-index of wrapper to z-index: 0; and that will let you click on the links and also highlight all the text.
So guys, I've here a header:
As you can see, the box-shadow works just fine. However, putting a background-color on the content <div> yields this:
Visually, the box-shadow was covered by the background-color. The content <div> has lower z-index value than the header though. How can I make the box-shadow appear over the <div> to make it seem like the content is under the header?
If this will help, here is the CSS for both markups:
header{ /* the header, obviously */
background: #fee;
height: 60px;
padding: 40px 20px 0px 20px;
border-bottom: 5px solid #f53301;
-webkit-box-shadow: 0 12px 16px -6px gray;
-moz-box-shadow: 0 12px 16px -6px gray;
box-shadow: 0 12px 16px -6px gray;
border-radius: 20px 20px 0px 0px;
z-index: 9999;
}
#content-inside { /* the content */
padding:20px;
z-index:1; /* changed this to -1 but it still didn't work */
background:white;
border:1px solid black;
}
I hope someone can help me with this. Cheers!
z-index only applies to element where the position has been set (i.e. not the default static position). Trying position:relative would be the most likely solution here.
I'm trying to get some elements to move slightly when the user mouses over them (they form buttons on a navbar). However, my code doesn't seem to work. The text in the boxes should also be clickable but that doesn't seem to work either. Here's the code:
#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}
.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;
/* rounded borders of 5px in firefox */
-moz-border-radius:10px;
/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;
/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;
/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}
.nav_tab:hover{
position: relative;
top: +5px;
}
h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}
And the HTML:
<div id="navbar">
<div class="nav_tab"><h2>Zues</h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>
I'm not entirely sure what's going on here, though I presume it's some kind of parent-child issue.
Thanks.
The link is not clickable because you gave the .nav_tab class a negative z-index value just adjust it to a value => 0 and it'll work.
The z-index: -1; of the .nav_tab css it's your problem, it makes the container behind the page so any mouse event won't work (hover, pointer, etc) remove it and your ready to go:
see the jsfiddle demo:
http://jsfiddle.net/QmVFR/64/