HTML not linking to CSS

Darkranger85 · 09-28-2012, 04:45 PM

Hey all,

I'm pulling my hair out trying to figure out why my css isn't linking to my html.

the styles.css file is in a folder called css and the index.html is in a folder called html. Here is the code I have.

I would be so thankful for any help I can get!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link href="/css/styles.css" rel="stylesheet" media="screen" type="text/css" />
        <title></title>    
    </head>
    <body>
        <div id="page_container">
            
            <div id="header">
                <img src="/images/DClogo.png" />
            </div>
            
            <div id="left_column">            
                   <ul>      
                    <img src="" />             
                    <hr>
                    <li><a href=""><img src="" alt="" /></a></li>                   
                    <li><a href=""><img src="" alt="" /></a></li>
                    <li><a href=""><img src=""  alt="" /></a></li>
                    <li><a href=""><img src="" alt="" /></a></li>
                    <li><a href=""><img src="" alt="" /></a></li>
                    <li><a href=""><img src="" alt="" /></a></li>
                </ul>               
            </div>
            
            <div id="center_column">                
                
            </div> 
            
            <div id="right_column">
                            
            </div>
            
        <div id="footer">
            
        </div>
  </div>  
    </body>
</html>

Code:

#page_container{	
	width: 960px;
	margin: 0 auto;			
}

#header {
	text-align: center;
}

#left_column {		
	width: 20%;
	float: left;		
}

#center_column {	
	width: 60%;
	float: left;	
}

#right_column {	
	width: 20%;
	float: left;
}

#footer {	
	clear: both;
}

VIPStephan · 09-28-2012, 04:58 PM

First of all, how are you accessing the index page? Via the local file system or on a server? Secondly, can you confirm that the respective directories are all located directly in the web root directory? And lastly: Don’t use absolute paths unless you’ve got a specific reason for that. A relative path is always best if you know that the file structure isn’t gonna change much.

Darkranger85 · 09-28-2012, 07:17 PM

1. I am accessing the page through the local network, it's not up on the web yet.

2. All my folders are contained in the root.

Main Folder
-html
--index.html
-css
--styles.css

3. It's set as an absolute path at the moment simply because I couldn't get it working and so I have been trying everything I can think of to get it to work.

Xherdas · 09-28-2012, 07:35 PM

It's best practice to put your css folder under html.

Usually it goes like this:
Root
-public_html
index.html
-css/stylesheets
styles.css

Refer to this:
/ - the root folder
./ - the current folder
../ - the previous folder

In your example, you can make it work by using ../css/styles.css

Good luck!

VIPStephan · 09-28-2012, 10:06 PM

Quote:

Originally Posted by Darkranger85

1. I am accessing the page through the local network, it's not up on the web yet.

And there is the problem. See, when you put a slash in front of the path you’re making it an absolute path (a domain independent absolute path, to be precise). The slash means that it will look for the file starting at the root directory. On a server this is usually configured to be the web accessible directory. Now, if you browse your site from the local file system on your computer there is no such configuration and if you tell it to look at the root directory, it will actually look at the root directory of your hard drive or user account. So, if you’re running Windows it will look at, e. g. C:/css/styles.css, on a Macintosh this might be [Macintosh HD]/css/styles.css, where your actual website root directory might be located at /Users/[user name]/sites/my_site/.

So, you better use relative paths, as Xherdas has explained before me.

Darkranger85 · 09-28-2012, 10:20 PM

Thank you guys!

It works perfectly now. :-)

And thank you for the explanations, I didn't know exactly how the slash at the beginning worked.