Question

I planed to add an image below a div. It would be below a navigation bar (div), adding some nice shadow effect (img). Looks like this:

<div>...</div>
<img>

So far it is just in the html code, but I want to keep the html code since it’s a theme that gets updated frequently. So I want to alter only the CSS.

Is there a way to do that without altering HTML code, just using CSS?

Answer 1

Two suggestions:

1. Add the shadow image as a 1px x Xpx repeating background image to the bottom of your nav DIV. So it would sit within the nav DIV. Simply add some padding to the bottom of the NAV DIV to accomodate it e.g.

nav {
padding-bottom:6px;
background:url(images/nav-bg.png) repeat-x 0 bottom;
}

(The above code would presume you have a background image which is 6px in height and probably 1px wide (but that’s up to you) and the path would obviously have to be adjusted to be where your actual image was located.

1. Instead of adding an IMAGE under the NAV DIV add another DIV and once again add a 1px x Xpx shadow image to that DIV through the CSS.