Only one of my CSS style sheets work and DIV background-image doesn't work?

Question

First time coding my own website and first time uploading it. First time for everything basically. Yes, I have multiple CSS style sheets, some of my pages have different layouts.

My website works perfectly on my local drive, but of course falls apart when I upload it to Host Gator via FileZilla. I ensured that I followed case-sensitivity for my links/directories/images etc.

I believe it's just my DIV background images on the index page that aren't loading properly and then the CSS style sheets aren't being applied to the rest of my website- yet it works for the homepage. I have confirmed the images are accessible when you type their url in directly.

I have no idea why only my one css style sheet works and not the rest, and why my DIV background images aren't loading properly. Any advice is greatly appreciated, I just want my website to go live finally!

Feel free to have a look: www.alanphunt.com and let me know what you think. I've only taken a semester of an introductory web development course so go easy on me!

Answer 1

Most likely the problem is with relative and absolute path usage. Check if you can open the given CSS from the source code of the page. If you cannot it means that your browser can't do it either. If you can, the CSS should be loaded.

Answer 2

This is a problem with connecting your CSS to HTML or paths, for sure. You should double check every path on your code, sometimes I paste things and forget to change the path, look out for that.

Answer 3

As other answers have stated, the problem is the relative paths.

The general rules for paths

• images/image.jpg (no leading slash) - start from the location of the current file
• /images/image.jpg - start from the site root regardless of where the current file is located. The root is the directory the web server looks in when you type in just your domain name. On Hostgator this is called public_html (for your primary domain; it can be a little more complicated if you have multiple domains or subdomains.) Other common names are www or htdocs.
• ../images/image.jpg - start one level up from the current file. You can also do ../../images/image.jpg to start two levels up, and so on. (But if you find yourself going up five or six levels, it might a sign you should start from the root.)
• http://example.com/images/image.jpg - Look for the image at this exact url. It's also possible to use a protocol-less url eg //example.com/images/image.jpg

As for your specific question: on the home page, the background images images/alan.jpg and images/seemennt.jpg are set in an external stylesheet. Because the path doesn't begin with a forward slash, they'll try to load relative to the location of the stylesheet, in this case the "css" folder. (You can hit F12 in your browser and look at the console to confirm this. It'll also help to diagnose exactly what isn't loading.)

Try changing the paths to something like ../images/alan.jpg and it should work.

Sources

• https://css-tricks.com/quick-reminder-about-file-paths/
• https://phpdelusions.net/articles/paths (PHP focused, but has some generally useful info)

Answer 4

Are you using Google Chrome? If you are, head to:

1. Homepage
2. Right click
3. View Page Source

Here, you will be able to view the outputted HTML that your browser is using to display your website.

After looking through the Source code of your Homepage, I can see the following URL, for your Stylesheet:

css/indexcss.css?v=version2

I selected this URL and it brings up your Stylesheet. I then checked out the source code of your other pages ('Photography', 'Music', 'DJ Life' and 'Reach Out'), and can see that your stylesheets have been incorrectly inputted. You need to perform the following changes:

• photography.css to css/photography.css
• musiccss.css to css/musiccss.css
• djcss.css to css/djcss.css
• reachoutcss.css to css/reachoutcss.css

This should resolve your issue.

Best of luck with your website!