views:

34

answers:

3

I'm trying to simulate a shadow on a div I have by creating a div called headerShadow and setting it's background color to Black.

It's not showing though, here's the code:

#header
{
    background-image: url('images/headerBackground.png');
    background-repeat:repeat;
    width:auto;
}

#headershadow
{
    color:Black;
    height:10px;    
}

<body>    
    <div id="header">
        <img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />    
        <ul id="topuserbar">
            <li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
            <li><a href="#">Mis Anuncios</a></li>
            <li><a href="#">Perfil</a></li>
            <li><a href="#">Ayuda</a><img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
            <li><a href="#">Cerrar Sesion</a></li>
        </ul>
    </div>
    <div id="headershadow">
    </div>
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
A: 

I believe adding a min-height to your div will fix this problem.

Michael Goldshteyn
+2  A: 

Other fixes:

  • Ensure your div has content, add a &nbsp; for example
  • If your div is floated, make sure it has width and height defined
  • Make sure the top and left values are not the same as the div above it
  • Check your z-indexes
Steve
+2  A: 

You do not want the color attribute to be black. To achieve the effect that you want, set the background-color to be black.

background-color:Black; 

You're going to want to fix the positioning to appear like a shadow, but I'll leave that up to you.

Ethan T