I have an "outside" div which takes 100% of the page. With a higher z-index value, I have an "inside" div. I don't know why but margin-bottom doesn't seem to work with this "inside" div.
My code is:
<style type="text/css">
#inside{
background-color:#f8f8f8;
position: absolute;
top:0;
left:20%;
width:60%;
margin-top:35px;
margin-bottom:35px;
z-index:3;
border-radius: 7px;
box-shadow: 6px 6px 20px black;
}
#outside{
position: fixed;
left:0;
top:0;
height: 100%;
width: 100%;
background-color: black;
opacity:0.7;
z-index:2;
background-attachment:fixed;
}
</style>
<div id="outside"></div>
<div id="inside">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
here a fiddle: http://jsfiddle.net/malamine_kebe/EnHut/
Simple solution:
Change position to relative
http://jsfiddle.net/EnHut/2/
#inside{
background-color:#f8f8f8;
position: relative;
top:0;
left:20%;
height: 700px;
width:60%;
margin-top:35px;
margin-bottom:35px;
z-index:3;
border-radius: 7px;
box-shadow: 6px 6px 20px black;
}
Change position: absolute; to position: relative; for #inside
http://jsfiddle.net/EnHut/1/
Try this:
#inside{
background-color:#f8f8f8;
position: relative;
top:0;
left:20%;
width:60%;
margin-top:35px;
margin-bottom:35px;
z-index:3;
border-radius: 7px;
box-shadow: 6px 6px 20px black;
}
It is your position — you're using absolute, and the element don't know where it is to give margin at the bottom.
To see the difference between relative and absolute, just click here.
And here is the resolution of the problem in practice. (FiddleJs)
Related
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 7 years ago.
I am trying to figure out how to use CSS to create the below effect.
I've tried to do this by creating 4 divs within a parent div and positioning them on all four sides.
This works, but breaks when I need those 4 divs to be transparent to the background and not a single color.
For example, I want to try to make this work again a picture background and not just a solid background.
If the background is solid I can make the 4 divs the same color as the background, the problem is that if the background is a picture I can't have the 4 divs match the background.
Also, I understand my fundamental approach to the problem might be wrong. I heard someone mentioning using a pseudo :before and :after to accomplish this effect for effectively, but I'm not sure how to do that.
Here I made it as close as I could get with the least code:
.daysleft {
position: relative;
padding: 20px;
width: 100px;
text-align: center;
}
.daysleft span {
display: block;
z-index: 2;
position: relative;
}
.white {
background-color: #fff;
height: 20px;
width: 101%;
position: absolute;
top: 50%;
left: 0;
z-index: 1;
transform: translateY(-50%);
}
.daysleft:before {
height: 100%;
content: "";
position: absolute;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 20px;
left: 0px;
top: 0;
}
.daysleft:after {
height: 100%;
content: "";
position: absolute;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 20px;
right: 0px;
top: 0;
}
<div class="daysleft"><div class="white"></div><span>37 Days left</span></div>
EDIT:
Found a way to interupt the borders! Awnser updated.
I'm guessing this is the sort of thing you want.
.container {
margin: 0 auto;
position:relative;
display: inline-block;
padding: 15px;
background: #ccc;
}
#content {
margin: 0 auto;
position:relative;
display: inline-block;
padding: 10px;
background: #ccc;
font-size: 38px;
color: #333;
}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:15px;
height: 15px;
border-color:#777;
/* or whatever colour */
border-style:solid;
/* or whatever style */
content:' ';
}
#content:before {
top:0;
left:0;
border-width: 2px 0 0 2px
}
#content:after {
top:0;
right:0;
border-width: 2px 2px 0 0
}
#content>:first-child:before {
bottom:0;
right:0;
border-width: 0 2px 2px 0
}
#content>:first-child:after {
bottom:0;
left:0;
border-width: 0 0 2px 2px
}
<div class="container">
<div id="content">
<p><i>37</i> days left</p>
</div>
</div>
Example:
http://jsfiddle.net/link2twenty/5gjh6jkx/
demo
Try out this... here am using background as image
<div class="parent">
<div class="child">
37 days Left
</div>
</div>
CSS:
.parent{
background-color : #ccc;
padding : 20px;
width : 100%;
margin : 0 auto;
}
.child
{
width: 100%;
padding: 10px;
text-align : center;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
border: 15px solid #ccc;
border-image: url('https://i.stack.imgur.com/1WlsT.png') 34% repeat;
}
Try something like this FIDDLE
DEMO CODE
HTML
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
CSS
.box1{
position:relative;
background:#FFF;
width:200px;
height:200px;
border:solid 2px #090;
-webkit-border-radius: 3px;
border-radius: 3px;
margin:0 auto;
}
.box2{
position:absolute;
width:210px;
height:180px;
background-color:#FFF;
top:10px;
left:-5px;
}
.box3{
position:absolute;
width:180px;
height:210px;
background-color:#FFF;
top:-5px;
left:10px;
}
I have a div that is a circle. I want to add a border around it that only wraps 3/4th of its circumference. Example :
my code so far:
<div id="Circle"></div>
#Circle {
overflow:hidden;
display:block;
float:left;
width:auto;
height:auto;
position: relative;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
border: 3px solid #01542c;
z-index: 9;
padding:50%;
}
https://jsfiddle.net/pm97beyx/1/
My current solution involved making a div on top of it then positioning it as a mask to hide the border underneath, very crude I would say.
Just make the border-top transparent:
#Circle {
overflow:hidden;
display:block;
float:left;
width:auto;
height:auto;
position: relative;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
border: 10px solid #01542c;
border-top:10px solid transparent;
z-index: 9;
padding:50%;
}
Result:
JSFiddle Demo
I am wondering, is there a way to create shadow linke on the images below (possibly using pseudo class?)
The red bit behind grey box meant to be shadow with trapeze shape and no blur.
Now idea if its possible?
Thank you for your help in advance.
DEMO 1:
HTML:
<figure></figure>
CSS:
figure{
width:150px;
height:150px;
margin:50px auto;
background:#ccc;
position:relative;
box-shadow: 0 14px 0 -10px red;
}
figure:before, figure:after{
content:'';
position:absolute;
top: 2px;
width:0;
height:0;
}
figure:before{
left: -5px;
border-left: 5px solid transparent;
border-right: 0px solid transparent;
border-top: 77px solid red;
}
figure:after{
right: -5px;
border-left: 0px solid transparent;
border-right: 5px solid transparent;
border-top: 77px solid red;
}
DEMO 2
figure{
width:150px;
height:150px;
margin:50px auto;
background:#ccc;
position:relative;
box-shadow: 0 12px 0 -10px red;
}
figure:before{
content:'';
position:absolute;
top: -10px;
left: 0;
width:100%;
height:100%;
background:red;
z-index: -1;
-webkit-transform-style: preserve-3d;
-webkit-transform: perspective(800) rotateX(-40deg);
}
Just in case of using CSS3 features, you could create a trapeze by applying a transform on a pseudo-element and position that behind the box as follows:
EXAMPLE HERE
.box {
width: 200px; /* Optional */
/* height: 150px; */ /* Optional */
position: relative;
}
.box:before {
content: "";
position: absolute;
background-color: lightgray;
top: -3%; bottom: -12%; left: 0; right: 0;
transform: perspective(50em) rotateX(-30deg);
z-index: -1;
}
Therefore dimensions of the shadow box would be relative to the box. However it is not supported in IE 9 and below.
The issue
I have a fixed navigation bar on my website (z-index: 98) and a rotating banner (z-index: 96).
When I scroll down, however, the content positioned relatively on the banner appears higher (in z-space) than the navigation bar.
Screenshots
Code
Banner:
div#banner {
padding-top:60px;
z-index: 98;
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
z-index: 96;
}
div#banner div#bannerWrap {
width:1080px;
margin: 0 auto;
height:100%;
position:relative;
}
div#bannerWrap div#logoLeft {
position:absolute;
top:50%; margin-top:-164px;
left:0;
width:305px;
height:328px;
background: url(../img/bannerLogo.png) no-repeat center center;
float:left;
}
div#bannerWrap div#logoRight {
position:absolute;
top:50%; margin-top:-164px;
right:0;
width:305px;
height:328px;
background: url(../img/bannerLogo.png) no-repeat center center;
float:right;
}
div#bannerWrap div#textRight {
position:absolute;
top:50%; margin-top:-20px;
right:0;
text-align:right;
color:white;
font-weight:bold;
font-size:28px;
text-shadow: 3px 3px 0 #1f3848;
float:right;
}
Navbar:
div#topBar {
width:100%;
height:60px;
margin:0 auto; padding:0;
background: #1f3848;
color:white;
font-size:12px;
position:fixed;
}
div#topBar div#tBContainer {
width:1080px;
margin: 0 auto; padding: 0;
}
div#topBar div#tBLogo {
width:56px;
height:60px;
background: url(../img/tB_logo.png) no-repeat;
display:block;
float:left;
margin-right:20px;
}
div#topBar div#tBLeft {
float:left;
padding-top:15px;
}
div#topBar div#tBRight {
float:right;
padding-top:15px;
text-align:right;
}
By default, z-Index doesn't work with position:static elements.
It only works with position:relative/absolute/fixed elements.
This might work:
div#banner
{
position:relative;
z-index:96;
}
Reference: z-index - CSS-Tricks
z-index repeated twice please check. and you don't have to specify any z-index to div#banner. please follow below css
div#banner {
padding-top:60px;
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
}
div#topBar {
width:100%;
height:60px;
margin:0 auto; padding:0;
background: #1f3848;
color:white;
font-size:12px;
position:fixed;
z-index:2;
}
why you giving the z-index value twice? Also by watching the screenshot its clear banner is coming over the navigation because of higher z-index value. either give this one negative value or the give the positive higher value to navigation.
div#banner {
padding-top:60px;
z-index: 98;/* repeated*/
width: 100%;
background: url(../img/bannerImg_1.jpg) no-repeat center center;
background-size:cover;
height:340px;
border-bottom: 1px solid #422358;
box-shadow: 0 10px 10px -10px black;
z-index: 96;/* repeated */
}
Note: while using z-index its required to use positioning either relative or absolute
I'm trying to reproduce this image using only css
I've played with the radius property but as you will see I don't get the same angle effect.
.shape{
background-color: black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
color:white;
font-weight:bold;
padding: 30px 30px 30px 50px;
text-align:center;
position:absolute;
right:0;
bottom:0;
z-index:1003;
font-size: 20px;
border-top-left-radius: 125px;
-moz-border-radius-topright: 125px;
}
You can see what I've tried at http://jsfiddle.net/ymorin007/7qX4U/
Thanks.
Might not be cross-browser compatible, but this'll get you close :)
.shape{
background-color: black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
color:white;
font-weight:bold;
padding: 30px 30px 30px 50px;
text-align:center;
position:absolute;
right:0;
bottom:0;
z-index:1003;
font-size: 20px;
border-top-left-radius: 125px;
-moz-border-radius-topright: 125px;
}
.shape::before{
content:"";
width:0;
height:0;
position:absolute;
left:-34px;
border-left: 53px solid transparent;
border-right: 53px solid transparent;
border-bottom: 53px solid black;
}
fiddle: http://jsfiddle.net/pggRb/
If you needed to hit test, you may want to consider using a skewed pseudo element:
div {
position: fixed;
bottom: 0;
right: 0;
height: 50px;
width: 200px;
background: gray;
cursor: pointer;
transition: all 0.6s;
}
div:before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: inherit;
transform: skewX(-45deg);
border-radius: 20px 0 0 0;
z-index: -1;
}
div:hover {
background: tomato;
]
<div>SOME TEXT</div>