Log in

View Full Version : how do i insert or attatch a css file?


samee
04-08-2008, 02:34 PM
hi all i am a newbie at designing websites. but have a problem i want to design a website and want to use the following menu from DD glossy menu (http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/)

but have a problem linking it to my html file. any ideas on how i can do this? and also make the file appear on other web pages the same? i am using Microsoft web expression to design the site.
thanks
tfit
04-08-2008, 03:27 PM
with link

<link href= location of your css file
Medyman
04-08-2008, 07:08 PM
If you need a more detailed explanation:
http://www.wellesley.edu/Computing/Dreamweaver/CSS/cssAttach.html#linked
samee
04-08-2008, 08:28 PM
i managed to link the css file but after i had done that and saved the html file as well as the css file i ran the html file and the only navigation button was the home one and also all the other 5 buttons were not the colour or attribute that was on the DD website. so when i hover over the other links that change to the correct type and off again. any on else having the same or similar issue.
tfit
04-08-2008, 08:57 PM
Have you included the javascript file too?
samee
04-08-2008, 09:00 PM
i only see a section which includes the HTML code and the CSS code. what and where is the java script
tfit
04-08-2008, 09:02 PM
<script src="http://www.dynamicdrive.com/eeincludes/randomorder.js" type="text/javascript"></script>

But you need to check because I see two others too. Sorry three
thetestingsite
04-08-2008, 09:14 PM
Please post a link to your problem page so that we can see exactly what's going on.
samee
04-10-2008, 05:48 PM
here is what is happening on my site (www.teksoft.site.io)
thetestingsite
04-10-2008, 06:54 PM
Your current source code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<ul class="glossymenu">
<li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
<li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>
<li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>
<li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>
<li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>

</ul>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body><!-- member1 server //-->

<link rel="stylesheet" type="text/css" href="glossymenu.css" />

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-268699-2";
urchinTracker();
</script>
</body>
</html>


should actually be like so:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="glossymenu.css" />

<title>Untitled Document</title>
</head>

<body><!-- member1 server //-->

<ul class="glossymenu">
<li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
<li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>
<li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>
<li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>
<li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>

</ul>


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-268699-2";
urchinTracker();
</script>
</body>
</html>


Everything else (as far as the css and whatnot goes) should be fine.
Hope this helps.
samee
04-10-2008, 08:15 PM
i have done as you have suggested, and the results are the same.
thetestingsite
04-10-2008, 08:27 PM
Actually, it looks like you did not change your code. As of right now, you have the menu in the head section of your document and the link to the css stylesheet in the body. You need to reverse these so that the link to the style is in the head and the menu is in the body (as I have shown in the code I posted previously).

Hope this helps.
samee
04-10-2008, 08:45 PM
check now but i doubt it works link (www.teksoft.site.io)
thetestingsite
04-10-2008, 09:07 PM
Sorry, but I don't know how I overlooked this. In your stylesheet (glossymenu.css), you need to take out the beginning and ending <style> tags.

Hope this helps.
samee
04-10-2008, 09:12 PM
thanks that worked. thanks for your help its appreciated very much. :):):)