Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML not linking to CSS

    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;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    44
    Thanks
    0
    Thanked 14 Times in 14 Posts
    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!

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Quote Originally Posted by Darkranger85 View Post
    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.

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •