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.
Related
How would I be able to create something like the link above with html and css? Every time I try to make it into a thin line like (box-shadow: 10px 10px 1px #FFE600;) it disappears. Would I just need to create a separate div for this?
Here's my curent code:
HTML
<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
CSS
.pageimg {
width: 37%;
float: right;
margin-left: 100px;
box-shadow: 10px 10px #FFE600;
}
Use multiple box-shadows:
img {
box-shadow:
12px 8px 0 0px white,
14px 6px 0 0px yellow,
14px 10px 0 0px yellow,
10px 10px 0 0px yellow;
}
<img src="https://picsum.photos/200/200?image=1069">
You could also rather use pseudo elements. I do recommend keeping images in containers as it makes working with them easier. It would look something like this.
.image-container{
position: relative;
display: inline-block;
}
.image-container::before{
content: '';
position: absolute;
border: solid 1px yellow;
width: 100%;
height: 100%;
left: 14px; /* This will be your box shadow x-offset; */
top: 14px; /* This will be your box shadow y-offset; */
z-index: 0;
}
and then your html
<div class="image-container">
<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
</img>
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
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/