Any web developers in the house? [Archive]

Trench

03-13-2009, 08:56 AM

I am trying to make some good use of my downtime at work by teaching myself CSS and expanding the very limited HTML skills I taught myself 10 years ago.

I have saved the source of a simple page on my company's server to my local machine, along with it's associated style sheet and a logo .jpg displayed on the page. For whatever reason, when I run the local copy of the page on my machine, the style sheet and the .jpg won't load, even though I have modified the HTML to reference the new locations of the files.

I have placed the files in a directory that for this example I will call c:/asdf. It contains the files asdf.html, logo.jpg, and style.css. I have modified asdf.html in the following way so it can find the new locations of logo.jpg and style.css.

<link "file:///C:/asdf/style.css" rel="stylesheet" type="text/css">

<img src="file:///C:/asdf/logo.jpg" style="margin-bottom: 5px;"/>

If I type the above paths into the address bar, the files load into the browser just fine; but for whatever reason, the HTML page will not load them. Does anybody have any clue as to what may be going on?

mdunn

03-13-2009, 02:47 PM

is the <link........./css"> in head?

also, try this

<link "file:///C:/asdf/style.css" rel="stylesheet" type="text/css" />
Note the extra slash at the end. and it might just be me, but it looks like theres an extra slash after file://

I could be all wrong though, ive not done css in ages. This site might help (http://www.w3schools.com/css/default.asp)

neilxvx

03-13-2009, 02:54 PM

I was once a spider.

rabidpotatochip

03-14-2009, 06:08 PM

This is going to sound really stupid, but if you haven't found the solution yet this might work... try putting the extension of the filenames in upper case.

<link "file:///C:/asdf/style.CSS" rel="stylesheet" type="text/css">

<img src="file:///C:/asdf/logo.JPG" style="margin-bottom: 5px;"/>

Seriously, I've used this "fix" to help so many people with local copies of their webpages.

sup909

03-14-2009, 07:52 PM

I am trying to make some good use of my downtime at work by teaching myself CSS and expanding the very limited HTML skills I taught myself 10 years ago.

I have saved the source of a simple page on my company's server to my local machine, along with it's associated style sheet and a logo .jpg displayed on the page. For whatever reason, when I run the local copy of the page on my machine, the style sheet and the .jpg won't load, even though I have modified the HTML to reference the new locations of the files.

I have placed the files in a directory that for this example I will call c:/asdf. It contains the files asdf.html, logo.jpg, and style.css. I have modified asdf.html in the following way so it can find the new locations of logo.jpg and style.css.

<link "file:///C:/asdf/style.css" rel="stylesheet" type="text/css">

<img src="file:///C:/asdf/logo.jpg" style="margin-bottom: 5px;"/>

If I type the above paths into the address bar, the files load into the browser just fine; but for whatever reason, the HTML page will not load them. Does anybody have any clue as to what may be going on?

Any reason you are using absolute file paths? I would recommend you use relative file paths (http://www.ibdhost.com/help/path/).

Also where are these lines in respect to the rest of the code? are they between the <head></head> tags or the <body></body> tags?

To call up a CSS style sheet your code should look something like this:

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

Notice I didn't need to type up the entire file path. the browser is smart enough to look in the same folder/directory as where the index.htm file is store to call up the .CSS stylesheet. If you have your folder up one level for example you add a "../" before the path.

So lets say this is your directory structure
C://localhost/mywebsite/images/icons.

If the .htm file is in the icons folder and you want to reference an image in that folder, using a realtive file path you would simply type:
<a href="image_name.jpg">

If the image was stored in the "images" folder instead of the icons folder, that means you need to go up one level. You would then type:
<a href="../image_name.jpg">

Moving on up if it was stored in the mywebsite folder you would type:
<a href="../../image_name.jpg">

I would highly recommend you visit http://www.w3schools.com/. They literally write the rules on how html works and is standardized. The website is an amazing step by step guide to learning all of this stuff.