Forums

jtrinker

I'm trying to add a css drop shadow to the header, but I'm not getting any change in the appearance.

html:

    <div class"shadow">
	
	<div id="header">
	
	<div id="logo">
	
	</div><!--end logo-->
	
	<div id="header_nav">
	
		<p>The Elements | About | Work | Contact | Home</p>
	
	</div><!--end header_nav-->
	
	<div id="social_header">
	
		<div id="fb_header">
		
		</div><!--end fb_header-->
		
		<div id="twitter_header">
		
		</div><!--end twitter_header-->
		
		<div id="rss_header">
		
		</div><!--end rss_header-->
	
	</div><!--end social_header-->
	
	</div><!--end header-->
	
	</div><!--end shadow-->

css:

div.shadow {
	-moz-box-shadow: 5px 15px 5px 0px #000;
	-webkit-box-shadow: 5px 15px 5px 0px #000;
	box-shadow: 5px 15px 5px 0px #000;
}

div#header {
	background-color: #5c5d60;
	position: absolute;
	margin-bottom: 10px;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 83px;
}

I appreciate your help!

jtrinker

And i already changed

<div class"shadow">

to

<div class="shadow">

DogsGhost

you have too many numbers in the value of your box-shadow property.
Also your navigation is in a paragraph tag...

jtrinker

Where does

<div class="shadow">

go in relation to

<div id="header">

?

chrisburton

I believe the shadow didn't work because you did not have a set width on the shadow div. You are using extra markup than needed so I condensed and applied the code below for you.

HTML


<div id="header"></div>
<!-- You DO NOT Need a Shadow Div -->

CSS

  
  #header {
        background-color: #5c5d60;
        width: 960px;
        height: 83px;
        -moz-box-shadow: 5px 15px 5px 0px #000;
        -webkit-box-shadow: 5px 15px 5px 0px #000;
        box-shadow: 5px 15px 5px 0px #000;
        margin-bottom: 10px;
  }

@Dogsghost, this person does not have too many "numbers" inside the shadow.

box-shadow is applied like this:

horizontal shadow
vertical shadow
blur
spread
color
inset

Soraph

Adding a width will not fix the issue @ChristopherBurton

Paulie_D

@ChristopherBurton Has it right: http://codepen.io/anon/pen/jeycp

treehouse : what would you like to learn today?

Forums

[Solved] css box shadow not working