Solved

Shadow line items

Posted on 2009-05-13
3
373 Views
Last Modified: 2012-08-14
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
0
Comment
Question by:peetm
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24379767
In CSS it's only possible to add a shadow with Filter, but that only works in IE because it uses DirectX http://msdn.microsoft.com/en-us/library/ms533086(VS.85).aspx.
You can do it with Javascript for example with jQuery: http://eyebulb.com/dropshadow/
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.
 
0
 
LVL 10

Author Comment

by:peetm
ID: 24379926
>>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">About</a></li>
            <li><a href="news/news.htm">News</a></li>
            <li><a href="photo_gallery/photo_gallery.htm">Gallery</a></li>
            <li><a href="information_links/information_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_quotes.htm">Quotes</a></li>
        </ul>
    </div>

Many thanks!
0
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 250 total points
ID: 24380121
You can set it in the #navigation div for example a repeating 1 x 10px shadow with repeat-y.
You can also set it on the #navigation ul or if you want it below the li a:href you should put it on the #navigation li a
But if you only want a dropshadow below the whole menu i would do it with an extra div.
I can make an example, just give me the HTML and CSS/images of your menu. So that i can see how it looks like.

      <ul>
           <li><a href="home.htm">Home</a></li>
           <li><a href="about/about.htm">About</a></li>
           <li><a href="news/news.htm">News</a></li>
           <li><a href="photo_gallery/photo_gallery.htm">Gallery</a></li>
           <li><a href="information_links/information_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_quotes.htm">Quotes</a></li>
       </ul>
<div class="shadow-line"></div>
   </div>

Open in new window

0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question