CSS Box Shadow on a div gets hidden by other divs - html

I have two boxes, they are stacked vertically. I want the top div to have a box shadow on its bottom edge. The top box's shadow is hidden behind the bottom box.
How do I fix this?

You can use:
either
#first{
position:relative;
z-index:2;
}
or
#second{
margin-top:10px;
}
PS: Sorry for the previous answer mistakes. - Example shown: http://jsfiddle.net/fdezluis96/FRQKA/
Good luck!

Or just add a margin-bottom: 10px or something to top div

Related

Image beside div - float overlap

I want to position a few small images beside a div and margin them correclty instead of being overlapped by the emphasized textcenter-div.
JSFiddle Demo:
`http://jsfiddle.net/k7gLfeuc/`
The Problem is: When I scale the browser-window, the images disappear behind the "center"-div instead of margin to it.
Both Navigation-Div and Center-Div are margin pretty well to each other. But the images wont.
I tried it already with "clear:left/right/both", but with no success.
What am I doing wrong? I just want the images left to the center-div to margin correctly to the center-div.
Than you.
Is this what you need? live demo http://jsfiddle.net/k7gLfeuc/2/
Add below to your existing code:
#side {
left:0;
width: 19%;
overflow: hidden;
}

Why won't div float next to image? (goes behind image instead)

I'm trying to have an image, and then to the right of the image I want a div box to be there. I've been trying to search for the reason for this, but I cannot find it. I'm assuming div's can't be floated next to images for some reason because I've successfully done it with text.
http://jsfiddle.net/n8ZDQ/1/
(you can see the red div box is actually mostly behind the image, only part of it is popping out the right side)
HTML:
<img src="http://stignatiusyardley.org/pictures/NFP/NFP%20family%20image.jpg" style="float:left;width:370px;height:246px;" />
​
CSS:
#optin {
width:466px;
border:1px solid #CCCCCC;
height:166px;
background-color:red;
}​
The div itself is not floating! Try adding float: left to #optin.
The DIV is a block level element by default. Only inline or inline-block elements will display the way you want. To get the effect you need, you need to either make the DIV display: inline-block or float: left.
Adjust the css of #optin to float as well
#optin {
width:466px;
border:1px solid #CCCCCC;
height:166px;
background-color:red;
float: left;
}​

padding not shifting my logo

I have a logo link that's using a background-image (css sprite). All works fine, but when I try to add a 20px padding to the top of the link (to give it more space for user to click the link), the background image is not moving down. Here is my css:
a {
background-image:url("sprite.png");
background-repeat:no-repeat;
display:block;
height:70px;
width:70px;
padding-top:20px; /* give top of the link more click space */
}
And my html:
What am I doing wrong?
Edit: I think you guys are missing the original goal. My goal is to give the logo link more clicking space. If I use margin then the element link is pushed down, which does not give more clicking space like I originally wanted.
Padding won't affect the background-image. To affect the hit-area of the link, add padding and then change the background y-offset by the same amount, i.e.:
a
{
padding-top: 10px;
background-position: 0px 10px;
}
Here's a fiddle demonstrating the behavior
Try using the margin property as so
margin-top:20px

CSS div wrapper works with everything except these div tags. Why?

I have used a wrapper to center div tags and it works for everything except the css in the link
Please check out:
http://jsfiddle.net/T5rBU/3/
As you can see the pink box with text is in the center but the black box isn't.
I have put
float: left;
but that is only because if I don't the black box doesn't show!?
try this:
.center div {
display:inline-block;
text-align:center;
}
it seams to work:
http://jsfiddle.net/u3ggV/
add a with to .center
.center {width:400px;}
or another width you cant center div with text-align
I don't quite follow what you mean but I think it could be down to not having a wrapping element to hold both divs - http://jsfiddle.net/djsbaker/T5rBU/4/
Did you want the black box beside or above/below the navigation?

Putting a border directly on the edge of an image

I have an image and a border on the bottom of the div that contains it. The problem is that I want the border to be directly on the bottom edge of the image. Instead, there seems to be some natural padding on the bottom that I want to get rid of. How can I do this?
You need to set the images vertical align to top in your CSS :)
img { vertical-align: top /* can be baseline */ }
Hope that helps!
To put border on image
img{
border:1px solid #000;
}
Please share your code to solve your padding issue.
Why don't you apply the border directly to the IMG tag instead of its container DIV?