Div won't display unless I have some content in it?
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=开发者_JS百科"MainContent" runat="server" />
</body>
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.
I believe adding a min-height to your div will fix this problem.
Other fixes:
- Ensure your div has content, add a
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
加载中,请稍侯......
精彩评论