Member Avatar for DocTech25

I was successfully able to move internal CSS code into an external .css file just fine. I realized that no matter what I tried, it just wouldn't work unless it was in the same directory as the file I wanted. This isn't really an issue in this case, but I wanted to keep my site organized by moving all the .css files into one css directory. Like I said not really an issue with what I am looking at now, but when I get to the navigation menu which will be used by all pages, it may become an issue with multiple files in different directories being used.

Here is what I have that is working with the HTML and the CSS in the same root directory:

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>DocTech25 Universe</title> 
        <link rel="stylesheet" type="text/css" href="docTech25Banner.css"> 
    </head> 
    <body> 
    </body> 
</html>

CSS

html 
{
    background: url('resources/images/docTech25Banner.png') no-repeat center center fixed;  

    -webkit-background-size: cover; /* Safari & Chrome */
    -moz-background-size: cover; /* Firefox */
    -o-background-size: cover; /* Opera */
    background-size: cover; /* Internet Explorer? */

}

Here is my directory structure:
root
root/resources
root/resources/css
root/resources/images

I have tried:

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

The only thing that is working right now is if I have this:

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

This is contained in the same directory as the file. Any help would be greatly appreciated.

Edited by DocTech25 because: edit
  • 2 Contributors
  • 2 Replies
  • 239 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by DocTech25

Dani AI

Generated

A short clarification of what actually happened and a few practical tips that are useful later when you split shared styles into a central folder.

Relative URLs inside a stylesheet are resolved relative to the stylesheet file itself, not the HTML file that links to it. That is why moving the CSS into resources/css required adjusting the image path to go up one level into images. reached the right fix; pointed toward the right kind of path to try.

Quick troubleshooting checklist for link problems:

  • Open the stylesheet URL directly in the browser to confirm it loads (watch for 404 or wrong file).
  • Use DevTools -> Network to see the actual request path for the CSS and any images, and the HTTP status.
  • Check server file names for exact case (Linux hosts are case-sensitive).
  • Verify the server serves the CSS with Content-Type: text/css and that file permissions allow public reads.
  • Clear the browser cache or add a cache-busting query string while testing (for example ?v=1).
  • If pages live in many nested folders, prefer root-relative hrefs (start with a slash when your site is hosted at the domain root) or include the same link from a shared template so you don’t recalculate ../ chains everywhere.

When separating Bootstrap and custom code, load framework CSS first and your overrides after so specificity and cascade behave predictably. Example link order:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/site-common.css">
<link rel="stylesheet" href="/css/page-specific.css">

Consider using a CDN for Bootstrap (with integrity attributes) for better caching and performance.

Good catch by — the problem was path resolution rather than a mysterious browser bug. The checks above will save time when you move more shared components into centralized folders.

Recommended Answers

All 2 Replies

Member Avatar for lps

Just want to be confirm, is your html file is in the root directory?
If yes, then try
<link rel="stylesheet" type="text/css" href="./resources/css/docTech25Banner.css">

Member Avatar for DocTech25

Yes, I just figured it out. I had to change the image in the css to be relative so instead of:

background: url('resources/images/docTech25Banner.png') no-repeat center center fixed;

I am now using:

   background: url('../images/docTech25Banner.png') no-repeat center center fixed;

Thanks for your help. Now onto trying to seperate the bootstrap code into its' own seperate file if possible.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.