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.
Related
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
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.
If you go to this page of the website ( http://portal.escalatehosting.com/clientarea.php ) and look at the border around the white content area, you'll see it's using this code:
#whmcscontent .whmcscontainer {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
clear: both;
}
I want to add that same border around the white content area on this page as well: http://www.escalatehosting.com/why-us.php
However, I can't seem to find in the CSS where exactly the code is that sets the border to know what needs to be changed. Any help would be greatly appreciated.
On the second page, you are actually seeing a background-image create the border.
It is being applied to the class .s-inn-mid.
.s-inn-mid {
width: 976px;
margin: 0;
padding: 7px 12px 6px 12px;
float: left;
background: url(../images/middle.jpg) repeat-y;
}
To make both pages the same, simply remove the background-image and the float.
Updated CSS class
.s-inn-mid {
width: 976px;
margin: 0;
padding: 7px 12px 6px 12px;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
}
I'm using bootstrap and wordpress to design a wordpress theme but something odd keeps happening. My css ribbons are being offset 20px to the left for some reason and the folds of the ribbon css are not showing and I have no clue why. They are both in a centered container so I'm not sure what's going on.
What's most confusing is that my other content is not offset...
If anyone has any suggestions, they would be greatly appreciated!
Here's my code:
CSS
/* Ribbon
-------------------------------------------------*/
.rectangle {
background: #7f9db9;
height: 50px;
width: 970px;
position: relative;
left:-15px;
top: 30px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100; /* the stack order: foreground */
}
.rectangle h2 {
font-size: 30px;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}
HTML
<div class="row">
<div class="rectangle"><h2>3D CSS Ribbon</h2></div>
</div>
You can also view my website (in progress) here: http://noellesnotes.com/tester/
Thank you in advance for any help you are able to offer!
Where do you want to put the ribbon?
Try removing lines:
left:-15px;
top: 30px;
in .rectangle.
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/