Log in

View Full Version : Started Coding Yesterday...Html file won't load menu.css


travis07
04-06-2008, 01:28 AM
Hey so I have a menu_bar.html file that is loaded in the left frame of my frames.html file. In the menu_bar.html file i have the appropriate <link rel=...etc> line in my <head> section. I am using a file from this site, the Glossy Vertical Menu. I copied, pasted, and saved the exact text from http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ in text editor as "menu.css"

What is wrong with my code below for the menu_bar.html?

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>

<head>
<meta name="Author" content="Travis">
<title>Menu</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>

<ul class="glossymenu">
<li><a href="Coaches.html"> Our Coaches</a></li>
<li>**Under Construction!</li>
<li>Videos</li>
<li>Upcoming Events</li>
</ul>

</html>
Medyman
04-06-2008, 04:00 AM
I can't be sure, but I suspect that you probably have the <style></style> tags in the .css file. Remove those, and all should work.

As a side note, don't get in the habit of using frames. Since you just started and are learning -- learn the right way!

Here (http://www.dynamicdrive.com/style/layouts/category/C11/)are some frame-like layouts that can be achieved with CSS; therefore, you'll have valid HTML code.
travis07
04-06-2008, 04:52 AM
I tried removing the frame and just inserting the menu. Still no luck.

The code I have is the same as that for the Glossy Vertical Menu's .css, but I deleted the first </style...> line and the </style> at the end, as you suggested. No improvement. The site is:

http://www.racquetball.imsports.duke.edu/

if you want to see what it spits out.
thetestingsite
04-06-2008, 04:56 AM
In your css, change these lines:



/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(media/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(media/glossyback2.gif);
}


with this:



/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url('/glossyback.gif') repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url('/glossyback2.gif');
}


That's the only thing I could see that is wrong.
Hope this helps.
travis07
04-06-2008, 05:18 AM
OH thanks!

That was almost the right fix. I wasn't paying attention to the file path...they're in the same folder on my server, so I just had to get rid of everything before the filename.

Thanks again