Linking CSS for CF Nav Menu II

[wasabi]

http://www.dynamicdrive.com/style/csslibrary/item/cf-navigation-menu-ii/
CF Navigation Menu II

Hi,

I know a small amount of CSS and I would like to create a website with this particular navigation menu. Traditionally, I link my style sheets rather than having the CSS on each HTML page. I'd like to have a single CSS file that contains this particular menu as well as any other formatting or features I add to it later on. My question is: What changes need to be made to this menu so that I can do this? I attempted it, with everything working minus the images not showing up. I'm guessing that this is a newbie question and there is some script changes that need to be made before I can accomplish this.

Any advice out there?

Thanks
-Wasabi

[codebreaker]

I am having the same problem. All of the files needed are uploaded onto my site directory.
I even tried contacting Dynamic drive twice, but they havenet replied. :confused:

[ddadmin]

Well, all the CSS can certainly easily be moved to an external .css file, though of course, there's always the HTML portion that must exist inline on the page. With regards to images of the CSS menu not showing up, the key to realize is that any image paths inside the CSS code is relative to the directory in which the external CSS file resides in, not the page the HTML is in. Take for example this line of the menu's CSS code:


background: url(media/bgpink.gif) bottom center repeat-x;

Without the CSS code being put inside an external css file, the image path (in red) here assumes that the images are in the sub directory called media beneath the directory where the HTML code for the menu is in.

Now, lets say you decide to put the entire CSS code inside an external CSS file and under a different directory, such as:

myfiles/menu.css

Once you do that, all image paths inside menu.css is now relative to the directory "myfiles". In this case, the easiest way to avoid confusion is just to put all the images of the CSS menu inside the same directory ("myfiles"), with any reference to directories inside the image paths removed:


background: url(bgpink.gif) bottom center repeat-x;

I know this can get confusing, but bottom line, remember:

"When putting a CSS code into an external css file, the key to realize is that any image paths inside the CSS code is now relative to the directory in which the external CSS file resides in, not the page the HTML is in."