Linking CSS to HTML - html

enter image description herefirst time posting here. I restructured all the files on my website since I wanted to experiment with how to organize files, and I ran into a few issues. When I launch the site HTML appears but the CSS stylesheet doesn't seem to want to attach. I also think the js sheet is also not attaching properly but can't test it till css shows up. I double-checked spelling as well as placed the index.html on the root folder but still nothing I'll post the code below and hopefully someone can help me out. I appreciate you guys.

When you link a CSS or JS file to an HTML file, you need to provide a relative path from the HTML file to the CSS or JS file. In this case, it looks like index.html is already in the Root directory, so you shouldn't include that in the CSS file paths. The relative path to the css files (the path from the directory where index.html is to where the css file is) would be /Css/index.css, and the same for your javascript files (/Scripts/index.js).

Related

Image File Won't Display

When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.

CSS won't link to my HTML

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

How to Link to a Stylesheet in a subfolder

I have an HTML file, index.html, for my website, in a folder. This folder contains the index.html file, and another folder called "Stylesheets", with the stylesheet.css file inside. How do I link to it? I know how to do a link tag, but the href bit is giving me a bit of trouble. I've tried
href="../stylesheets/stylesheet.css"
and a few variants of it with the dots. Any ideas? I've tried a couple google searches but the question is a bit too complex to describe in a simple google query. Please Help!
Your path - href="../stylesheets/stylesheet.css" is basically doing the opposite of what you want.It's not going one folder further as you wish.
To accomplish what you want, you are going to have this path:
href="stylesheets/stylesheet.css"
Here you can read more about File Paths.
Use href="stylesheets/stylesheet.css" or href="./stylesheets/stylesheet.css"
Both mean the look for stylesheet.css file inside the stylesheet folder inside the current folder.

I can't make the background-image work in Xcode in a UIWebview

From what I can tell, everything is correct... I have an html file called index.html, and a css file that has the background image reference.
It works if I just load the page on a computer, but no matter what I try to put in the css as the background image for index.html, I can't get it to show anything.
I even tried just putting css in the actual index.html file.
<style type="text/css">
body {
background-image: url('/images/warning_small.png');
background-repeat:repeat;
}
</style>
Is there something I don't know about UIWebviews? Does it not like certain images or something?
There is simple trick to follow, it will definitely work. Follow the simple steps..
Create a folder in your project folder system.
Put all the html and resources files in the folder.
Remove unlinked entries from project.
Then add the folder by check the option shown in the image below
The above step should create a blue folder uncommon than other folder.
The blue folder is the trick, when you will run the app in your app folder you will be able to see an extra folder which you added at step 4. Now since all you resource files are in the folder the html file will look for the resources in the folder itself, and it should work.
You might need to tweak the path in the html, but this should work. It works for me always.
Cheers.

How can find the image path for css

I am new for for css and Bootstrap so sorry if silly question.
I want to use the Bootstrap in my project. I found a tutorial and going to follow. In the tutorial There is a folder and when I run the index.html file then you can see page with the logo.
I am trying to use the bootstrap and css in my project. I tried make same in my project with main.phtml
I run my file first and I could not see the logo(image) and I was thinking the problem is the path of .css file
The problem is when I put my html file in any directory rather than under main project(no any directory) I cannot see the logo.
Below first two screenshot is the tutorial file screenshots and the second two screenshot is the my file screenshots.
(I did not share any code because the css and html files are working)
Can someone explain to me why we cannot use the html files in directory or if yes how can we manage?
but when I try to add my project I cannot see the logo.
and the view;
EDIT
Please check here:
https://stackoverflow.com/a/20047417/6284581
you do not have to move your .html file
Your example css and img path not state correctly.
../ means one file directory up(check link above)! In your example if you start from
web... then you need to go main project directory. Try this
<link href="../web/static/styles/style.css" rel="stylesheet">
<a class="navbar-brand" href="#"><img src="../web/static/style/img/logo.png"></a>
I hope it will help to you