Hi I am a little new to CSS-box shadow,
I have written the following code in HTML,
<div id="left_content"></div>
<div id="right_content"></div>
And Following code in CSS,
#left_content {
width : 250px;
height: 350px;
background-color : #DDDDDD;
position : fixed;
z-index : 10;
float: left;
}
#right_content{
width : 700px;
height: 350px;
background-color : #FFFFFF;
float : right;
-webkit-box-shadow: -4px -2px 5px rgba(48, 50, 50, 0.9);
-moz-box-shadow: -4px -2px 5px rgba(48, 50, 50, 0.9);
box-shadow: -4px -2px 5px rgba(48, 50, 50, 0.9);
}
The left content is fixed, when we scroll the right content scrolls, the shadow is not getting applied.
I need the shadow to fall on the left content, I do not want increase the z-index of right content.
Any help would be appreciable.
thanks in advance.
The z-index of the right DIV has to be higher than that of the left.
#right_content{
z-index:11;
}
Here is a jsfiddle
Try adding margin-left to your right-hand div:
#right_content {
margin-left: 270px;
}
This accounts for the width of the left div, plus a 20px margin.
Fiddle.
Related
I have container A.
I'd like container A to be behind container B.
Container A must have a height equal to that of container B.
Their width is fixed.
Container A's shadow must not affect container B's border.
At the moment, I tried using absolute positioning but don't know how to fix the height issue.
#A {
position:relative;
max-width:800px;
border: an image with transparent parts ;
}
#B {
position:absolute;
max-width:800px;
height:100%;
box-shadow:0px 0px 26px 8px #000;
background:red; #should not be visible
}
The code above does what I want except that the border of A is messed up by the shadow of B.
I might be wrong, but shouldn't it be as easy as this:
#A {
padding: 1px;
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 1);
max-width: 200px;
}
#B {
padding: 1em;
border: 2px solid red;
}
<div id="A">
<div id="B">
Text<br />
Text
</div>
</div>
You see a 1px space between #A and #B, you can lose that by setting the padding of #A to zero.
Place container A and B in a new container (lets call it C) and apply absolute position to A & B with 100% height. Container C will need relative position
.container-C {
position: relative;
}
.container-A, .container-B {
position: absolute;
height: 100%;
}
Now A and B will have the same height (the height of C). To bring B's content in "front" or over A, add z-index to both (more to B)
.container-A {
z-index: 1;
}
.container-B {
z-index: 2;
}
The section on my page, should be in the middle of the page. Here the code if the section:
section{
margin: 0 auto;
margin-top: 100px;
margin-bottom: 50px;
width: 1000px;
but the section is 10px more on the right side. If you change the size of the page you can see it better:
I hope you can see my problem and can help me. Tell me if you want that I write the whole css file here.
Your article tag is overflowing the container. Its width ends up being 300px + 4px + 4px because of the border. If you set the box-sizing to be border-box, width will account for border correctly:
article {
width: 1000px;
border: 4px solid rgb(25, 25, 25);
background-color: rgb(75, 75, 75);
float: left;
-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
box-sizing:border-box;
}
A lot of frameworks, such as Twitter Bootstrap, will do *{box-sizing:border-box;} because it's much more intuitive.
Edit:
Note that while this solution is a common pattern, changing box-sizing in an existing page can create other things to pop up, especially since you've been using px widths instead of percentage based widths. You may want to just do a width:308px to the section prevent the other issues.
I would recommend border-box as more robust, but it's up to you.
I'm trying to create a gap between the header (image + navigation bar) and the content part (white box below navogation bar). With margin/padding on several places it does increase the space in top of the white box, but doesn't create a transparent gap where I can see the background image.
The header with id=branding is pushed with
#branding {
margin-top: 30px;
}
to the bottom, therefore it creates the gap on the top of the page. When I try to add a margin-bottom: 30px; to this CSS it increases the space on the top of the white box.
The page I'm working on is this.
The page is based on a template, therefore I'm not 100% sure what I should insert here as code parts!
Thanks in advance!
If I understand your problem, try to set background-color of the wrapper as transparent
.wrapper {
background-color: transparent;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
And then add background-color to header and content, now you can add margin bottom to the header or margin top to the content.
#branding {
margin-top: 30px;
background-color: #f2f2f2;
}
.container {
margin: 5% auto;
max-width: 978px;
background-color: #f2f2f2;
}
After that you could see the background image of your site.
HTH
To your website have a gap you have to make a few change to your CSS.
On the .wrapper remove the background. Then on .header-image add yuor pixel value.
.header-image{
margin-bottom: your pixel value;
}
Then #main put background-color: #fff; and add padding: 50px 10px 50px;
#main{
background-color: #fff
padding: 50px 10px 50px;
}
Finally take off the width off of .container.
Next time put your code here in SO for people do not have to go look at your website.
I have a div which I have positioned using the absolute positioning property of css. And now I want to know whether there is a way to allow this div showing in the exact same position that I am seeing right now in my screen even when the screen is smaller or larger without changing the absolute positioning property of the div?
this is just a rough example:
<div class="name"> I am somewhere in the body </div>
...................
..................so and so codes...
..................
<div class="display">I want to stand beside the class called name </div>
If I write the css for the display, Then it comes exactly beside the class name
.display {
position: absolute;
width: 200px;
top : 132px; [assume]
left : 200px; [assume]
border: #D3D3D3;
-webkit-box-shadow: 5px 5px 15px #888;
-moz-box-shadow: 5px 5px 15px #888;
box-shadow: 5px 5px 15px #888;
}
It is displaying correct for my screen. But if the screen size varies then it is no longer showing the correct position since I have used the absolute positioning property. But now I want to find whether there is a way or a trick to solve it without changing the absolute positioning property.
Wrap this like -
<div id="someId">
<div class="display"></div>
</div>
and add this css
#someId {
position: relative;
width: 0;
height: 0;
}
This seems like something for the float property, change your css like:
.display {
float:right;
width: 200px;
border: #D3D3D3;
-webkit-box-shadow: 5px 5px 15px #888;
-moz-box-shadow: 5px 5px 15px #888;
box-shadow: 5px 5px 15px #888;
}
This is a super simple issue that I can't figure out.
I want to have a drop shadow go all the way across the bottom of a div. As it is, it covers most of the bottom:
And here is the code:
box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49)
I need the shadow to go all the way across on both sides.
Thanks
EDIT: Am I going about this wrong? Should I be using some other CSS property?
To avoid the top shadow, add vertical offset and adjust your other parameters accordingly. In addition, set the spread distance to be 0 or greater and you'll cover your horizontal border.
Start with this:
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.49)
If you're not getting the full horizontal border covered, increase the 4th value slightly until it looks good. Adjust your vertical offset accordingly as well if needed.
It would be helpful to see your html / css for the actual box as well.
There is a solution for that using an extra div, bigger than the original, positioned absolutely. See a working example here: http://jsfiddle.net/martinschaer/MHs5R/
<div class="container">
<div class="content"></div>
<div class="shadow"></div>
</div>
And de CSS:
.container{
position: relative;
background-color: #f0f0f0;
padding: 20px;
}
.content{
height: 200px;
width: 200px;
background-color: #fff;
}
.shadow{
-webkit-box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49);
box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49);
position: absolute;
top: 20px; /* .container top padding */
left: 13.5px; /* 20 - (15/2) = .container left padding - (shadow spread / 2) */
width: 215px; /* .content width + shadow spread */
height: 200px;
}
The box-shadow parameters are in the sequence as below:
horizontal offset, vertical offset, blur distance, spread distance of the shadow, a color value
I think what you need is this box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.49)
Here is the fiddle - http://jsfiddle.net/ashwyn/Cbqej/1/
The result is:
Demo on dabblet.com
CSS:
div {
background-color: #FFF;
border: 1px solid #888;
width: 100px;
height: 100px;
box-shadow: 0px 10px 5px -2px #888 ;
}