peetm
asked on
Shadow line items
I have a basic menu consisting of line items in a ul. The items appear as colored boxes.
I'd like to put some sort of shadow under these, and wonder how that should best be done using css [preferably]?
Thanks
I'd like to put some sort of shadow under these, and wonder how that should best be done using css [preferably]?
Thanks
ASKER
>>I suggest making an images and put that in your CSS
So, I add an image to li here?
#navigation ul {
list-style-type: none;
width: auto;
margin: 0;
padding: 0;
}
#navigation li {
font-weight:bold;
float: left;
width: 70px;
}
Would I basically make an image 70px wide, or would I/could I have that stretch as I wanted?
And then what would I do in the HTML please?
<div id="navigation" align="center" style="width: 701px">
<ul>
<li><a href="home.htm">Home</a></ li>
<li><a href="about/about.htm">Abo ut</a></li >
<li><a href="news/news.htm">News< /a></li>
<li><a href="photo_gallery/photo_ gallery.ht m">Gallery </a></li>
<li><a href="information_links/in formation_ links.htm" >Links</a> </li>
<li><a href="faq/faq.htm">FAQ</a> </li>
<li><a href="contact/contact.htm" >Contact</ a></li>
<li><a href="produce/oil_wine.htm ">Produce< /a></li>
<li><a href="getting_here/getting _here.htm" >Where</a> </li>
<li><a href="customer/customer_qu otes.htm"> Quotes</a> </li>
</ul>
</div>
Many thanks!
So, I add an image to li here?
#navigation ul {
list-style-type: none;
width: auto;
margin: 0;
padding: 0;
}
#navigation li {
font-weight:bold;
float: left;
width: 70px;
}
Would I basically make an image 70px wide, or would I/could I have that stretch as I wanted?
And then what would I do in the HTML please?
<div id="navigation" align="center" style="width: 701px">
<ul>
<li><a href="home.htm">Home</a></
<li><a href="about/about.htm">Abo
<li><a href="news/news.htm">News<
<li><a href="photo_gallery/photo_
<li><a href="information_links/in
<li><a href="faq/faq.htm">FAQ</a>
<li><a href="contact/contact.htm"
<li><a href="produce/oil_wine.htm
<li><a href="getting_here/getting
<li><a href="customer/customer_qu
</ul>
</div>
Many thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You can do it with Javascript for example with jQuery: http://eyebulb.com/dropsha
I suggest making an images and put that in your CSS and make a div for example exactly under the menu with the shadow background image. But i use images in CSS (PNG or GIF) for this kind of things.