I've been trying to resolve this issue with my website (www.wintonbrownmusic.online). I've attached a picture of how my site looks locally. When I upload it through GoDaddy, the site looks differently. I understand that others have had this issue but not sure where/how to change the CSS file to link to my website so it'll look the way that it should. Can someone assist?
I'm not sure what your hosting / creating it with, but I had a quick look at your site and found one issue.
Your HTML file is looking for the bootstrap.css file in the assets/css folder, but it appears to be in the root folder.
unless your hosting with something that is supposed to find it there.
not sure.
but when is use http://www.wintonbrownmusic.online/assets/css/bootstrap.css is doesn't work, but if I use http://www.wintonbrownmusic.online/bootstrap.css it does work.
hope that helps.
You have problems with path, If you open the console in inspect element it will show you that you have problems in calling the required files css, js, and other files.
You need to upload folders properly in the host, you need to add folders like you have in local folders in your computers. "assets" folder is missing and you just upload files inside there.
change your folder name as either assets or css ....
assets/css is a folder name because of the slash (/) browser looking for css folder inside assets folder...just give the folder
name correctly try to avoid usage of special character ,punctutation
in folder name
Related
I am learning HTML and i am keeping my secondary websites in /subwebsites/website.html
/ is the root folder containing also index.html:
File structure
However, opening the subwebsites anywhere outside of the VSCode live server browser makes the subwebsites not be able to find any stylesheet, other .html file or image anymore. It works with the index.html, but as soon as the website is contained in a subfolder it won't work anymore. I am sure it has to do with the way my paths are set but i tried everything I know off:
styles/main.css
./styles/main.css
/styles/main.css
picture showing how i added my paths
Thanks for your help in advance.
In this case your html file need to go one level up. So for this you can easily use ../.
So just use this:
../styles/main.css ^_^
or
./../styles/main.css for your subwebsites.
But better to think to start use some kind of local server. For example, live-server for VSCode.
Also useful information for you:
/ - root of the current drive
./ - current directory
../ - parent of the current directory
you can use ~/styles/main.css or ../styles/main.css
../ is previous folder
~/ is root of server
The reason, may be server look for style inside this folder. And can't find it.
I've looked at some other resources regarding this problem, but for some reason, they don't seem to be working. I've checked things like the path directory for the image, and I think that it's correct. I even uploaded the png as well as jpg to resolve this, but it still didn't make any difference. Also, it seems to be working completely fine with my local server but just not with Github.
Here's a link to my repo for the website on Github pages:
https://github.com/AnushkaKhare786/Coffee-Shop-.git
It is possible the your web files are not correctly placed on Github. Here is document that shows you steps on how to host on Github, which I believe you want to do
I think you should try to separate your images in an Images folder. Also, try to separate the custom stylesheets inside a CSS folder then update the src in your index.html then again make a new repo on Github. I think my advice will help you.
In case this didn't work then my friend refer to this link and read all the instructions carefully - Github Pages Guide
You just need to change the path of cshop3.jpg. To do so, replace the url('/cshop3.jpg'); at line 213 in your styles.css by url('./cshop3.jpg')
- url('/cshop3.jpg');
+ url('./cshop3.jpg'); <- Add the "." before the slash, or remove the slash
Add the "." before the slash, or remove the slash to get to the good directory (You did /cshop3.jpg, that refer to the root of your site, so https://anushkakhare786.github.io/ and not https://anushkakhare786.github.io/Coffee-Shop-/
change your style.css file config to..
change your image path to ('./cshop3.jpg')
My problem is that I have a bunch of HTML files but in simple I have public_html/pages folder + index.html/under pages folder a dmca.html is located.
So when I want to locate the file using href = "pages/dmca.html" it doesn't work and on another side when I use "../../public_html/pages/dmca.html" from the beginning it works is it normal or something wrong so I can only use the simple way as I have mentioned above(the link)
You have to look where is the .html file located on the hierarchy. If you are in dmca.html and you have a href on that page to second.html, you will need to jump backwards to the pages directory, and then go to the file: ../second.html
Now, if you are in index.html, and you have a href linking to dmca.html, you will need to hop back one level, enter pages directory, and choose the .html file. So it would be like this: ../pages/dmca.html
-public_html
|
|--index.html
|--pages
|--dmca.html
|--second.html
If I have not explained myself correctly, or I've understood the question wrong, please tell me.
What is happening, if I understand the problem properly, is that you are in index.html, and you want to href dmca.html, but the route you use pages/dmca.html, doesn't work, but if you use ../../public_html/pages/dmca.html, then, it does work. And I guess you are asking why is this happening.
Well, what happens when you use pages/dmca.html is that you are saying: search for a subdirectory called 'pages' and go to the file inside it called dmca.html. This would be correct if you had this hierarchy:
-public_html
|
|--index.html
|--pages
|--dmca.html
|--second.html
But index.html is a file, so it can't contain subdirectories. That's why you have to go one level up the hierarchy, and then, once you are in public_html/ you can choose to load index.html or go to the subdirectory public_html/pages and choose a file from it.
Right now I'm working on my web page, and... rethinking about it, I have to say that you were right, I mean, what you were doing was supposed to work.
Look at my directories. I have a htdocs folder, inside it I have some .png, index.html, and a folder called "prova", inside the folder "prova" I have index2. You can see that it is the same case as yours. I have an href on index.html that says href="prova/index2.html" and it works for me. Actually what I've said to you on the morning is wrong. I'm sorry :/
Because if I write ../prova/inedx2.html what happens is that the folder "htdocs" is removed from the URL. Remaining as: "PortàtilHP_antic_pare/prova/index2.html" You can see that the folder between "PortàtilHP_antic_pare" and "prova", which should be "htdocs", has disappeared.
So now I'm wondering how my answer has been useful for you. I guess I have understand it wrong, and somehow, my answer has made you change something that somehow has worked.
I am just learning web development and am having a problem I just can't seem to fix.
I have images I want to display on a page, in my ftp they are in book/detailed_image
On my page I have the img src
<img src="/new/site/images/book/detailed_image/book_one_detailed_View.jpg">
I have checked multiple times and the source is correct. If I move the image up a directory to the book directory and change the src the images display correctly.
What could be the cause of this?
The file attributes of the book and detailed_image directories are the same has are the attributes of the image files.
Using firebug it says the url failed to load.
If you have your html file in the same location as your new folder then there is no need to put a forward slash at the beginning of your url.
Change:
<img src="/new/site/images/book/detailed_image/book_one_detailed_View.jpg">
To:
<img src="new/site/images/book/detailed_image/book_one_detailed_View.jpg">
I think it is a problem with the permissions of the folder "detailed_image". If you do a chmod 755 detailed_image then it will work.
this probably isn't the case for you, but I had the same problem - I got a 404 not found error with the image in images/Paris/p1.png but if I moved the image into the images folder it displayed correctly....I fixed my issue by changing the name of the 'Paris' folder to 'paris' - I have no idea why but it worked...
I just solved the issue which I also had: it seems that the subdir "Images" has to have the same rights as the images contained therein.
I changed the access rights for the folder to "755" and added to include all subdirs with the same rights, now it works!
Hope it does the same for you...
Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.