CODEWITHSUNDEEP
htmlcss
Kiju Shin
Kiju Shin

Reputation: 43

The pages on the local and Internet appear differently

When I open the index.html file locally with the Chrome browser, it comes out well as I coded. However, when I access index.html posted on the network, the css is broken, and it doesn't work and I can't press the menu in the upper right corner. It's the same Chrome browser, but why is it coming out differently?

Upvotes: 0

Views: 47

Answers (1)

JohnP
JohnP

Reputation: 1309

Your question isn't very clear (check the links people have posted in the comments) but it sounds most likely that you're not loading the CSS file properly. This is probably because the path is wrong. Check whether you've specified an absolute or a relative path (i.e. does the path to the CSS file start with /?)

For example: if you have an index.html file whose CSS is in a subdirectory called css, your path needs to be

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

However, if you try to load the stylesheet from a different HTML file that's in the posts director, it will fail (because the css directory isn't inside the posts directory but next to it). In this case, you need this (note the extra ../ on the beginning of the path to indicate going up a directory first):

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

The most general solution is to use an absolute file path (starting with /), like this:

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

However, this requires that your website is being served from the root directory, which may or may not be the case (depending how your local filesystem is set up and how your server and domain are set up remotely).

Basically, you need to set up your paths for the situation you're going to be in.

Upvotes: 1

Related Questions