flutter web load css and images - html

I have this in my index.html
<img src="img/splash.png" class="center"/>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
The styles and img folders are both in the 'web' folder.
The splash.png file is found, but for the css file I get this:
The stylesheet https://myapp-24b9f.web.app/forms/styles/styles.css was not loaded....
The url I'm loading is: https://myapp-24b9f.web.app/forms/somepage
Why is the image searched relatively to the 'web' folder, and the css file relatively to 'forms'?

I moved this to be the first line in the and it solved it:
<base href="/">

Related

file link doesn't work

I can't achieve working linking between my index.html and main.css/img.pgn files.
File tree: HTML file(not working): /home/user/Desktop/vswd/index.html
CSS file: /home/user/Desktop/vswd/en/css/main.css
IMG file: /home/user/Desktop/vswd/en/img/img.png
<link rel="stylesheet" type="text/css" href="../en/css/main.css"/> doesn't work
<img class="img" src="../en/img/img.png"> doesn't work
BUT
if I move the file one folder below linking work fine.
File tree: HTML file(not working): /home.user/Desktop/vswd/en/index.html
<link rel="stylesheet" type="text/css" href="../css/main.css"/> work fine
<img class="img" src="../img/img.png"> work fine
I tried everything but didn't find a solution.
Your index.html and en/ are in the vswd directory, so you don't need to go up a directory using ../. Instead, use ./:
<link rel="stylesheet" type="text/css" href="./en/css/main.css"/>
<img class="img" src="./en/img/img.png">

Linking CSS stylesheet serves wrong file

I have a weird/frustrating problem. I'm trying to link my CSS stylesheet to my HTML and when I check in the Chrome dev tools what the file looks like live (rather, why my styling isn't working), I'm getting an entirely different file showing as my .css file.
Here's my file directory:
- app
- public
- file1.html
- file2.html
- assets
- style
- reset.css
- style.css
And here's the head of file1.html:
<script src="https://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/style/reset.css" />
<link rel="stylesheet" href="https://unpkg.com/purecss#0.6.2/build/pure-min.css" integrity="blahblahblah" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss#0.6.2/build/grids-responsive-min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../../assets/style/style.css">
The last line is my relative path.
The contents of file2.html are showing up as the contents of style.css when I look at it through dev tools, but all that really is in style.css is some styling for the h1 element. Am I just being a dummy with the relative file path for the CSS file? I thought maybe the other CSS stylesheets were impeding this style sheet, but commenting them out still results in the contents of file2.html as my css file. What am I missing?
Your path seems to be right, but it could be because you are missing a closing quotation for your integrity attribute.
So this is within an express app and I hadn't served up my public folder so that it could use it to access static files.
Needed this:
app.use(express.static(path.join(__dirname, '../public')));
Your third link is missing a " after blahblahblah.
Try fixing that.

Links from folder html file to folder css file

Please could you help me with this styles.css and bootstrap.cssto the 531.html.
css folder
- styles.css file
- bootstrap css folder
- bootstrap.min.css file
gallery folder
name folder
animals folder
- 531.html file
Asyou can see i need a link solution to link the bootstrap and styles css files to the 531.html file.
To link those two CSS files:
<link rel="stylesheet" href="../../../css/style.css" />
<link rel="stylesheet" href="../../../css/bootstrap/bootstrap.min.css" />
To go up multiple directories and then go to a subdirectory, you can do this.
<link rel="stylesheet" type="text/css"
href = "../../../css_folder/styles.css">
<link rel="stylesheet" type="text/css"
href = "../../../css_folder/bootstrap_folder/bootstrap.min.css">
Note that a single "../" goes up one directory. You can chain them and go up, then go down as usual with a "/folder".
To go to document root and traverse from there, you can use "/"
eg:
<.. href="/resource.css ..>
<.. href="/folder_1/resource.css ..>
This works for any file reference.

cant link to CSS in HTML in localhost

I can't linked to my CSS file in my HTML file in localhost.
I have my index.html and styles.css in /var/www/html/project
I call it in the browser with localhost/project/index.html and only the html is printing.
When I just open the html in the browser, it's working fine.
I tried
<link rel="stylesheet" href="http://var/www/html/project/styles.css" media="all">
I also tried in the href
localhost/project/styles.css
or project/styles.css
or /project/styles.css
But nothing, what am I doing wrong ?
Thx
The path you put for your CSS file should be RELATIVE TO the location of your html file.
If your HTML file has the path /var/www/html/project/index.html, then it's location is the project folder. That folder becomes the "root" of your project, and the CSS path should be relative to it:
styles.css
Did you try:
<link rel="stylesheet" type="text/css" href="styles.css"/>
If your css file and your html file is in the same folder, you just need to reference it by name and the file extension, I think.
If the CSS file is in the project file (with the index.html file) your link should look like this:
<link rel="stylesheet" type="text/css" href="styles.css">
As an example for VS13 link the css as shown below:
<link href="~/MyFolder/Style.css" rel="stylesheet" />
I also found a solution. You don't need anything. Do
<style type="text/css" media="all">
/* Your code */
</style>
and
<script type="text/javascript" charset="UTF-8">
// Your code
</script>
Don't link them. Do it Internal. Thanks me later
So I added type = text/css and thx the CSS is working, but if I move my CSS in a CSS folder css/styles.css is not working
with my html file in /var/www/html/project/index.html
and my css file in /var/www/html/project/css/styles.css
But in any case images are not charging :
and I have my images in /var/www/html/project/img/banner.jpg

Why does my HTML not link with my CSS?

I am working on my website, and my HTML isn't linking to my CSS. Can somebody please shed some light on this issue?
This is the snippet from my code.
<link href="css/style2.css" rel="stylesheet" type="text/css">
My file directory goes like this.
/root
/css
style.css
style2.css
/html
index.html
webconfig.html
/Images
Is this correct?
Your current href is a relative path, rooted from where ever the HTML file is.
You can either use a correct, relative path...
<link href="../css/style2.css" rel="stylesheet" type="text/css">
Or you can use an absolute (domain-rooted) path...
<link href="/css/style2.css" rel="stylesheet" type="text/css">
... assuming your website is deployed at the root of your domain.
The link you have is relative, so it starts looking in the same folder as your html. You could do an absolute path to the css with /css/style2.css or use a relative path ../css/style2.css
Use relative URL <link href="../css/style2.css" rel="stylesheet" type="text/css">
The url css/style2.css should be relative to the HTML file(the file that contains code <link href="css/style2.css" rel="stylesheet" type="text/css">) .
.. in above relative URL indicates go one folder back, and then to the css folder - and in that css folder use style2.css file.
Similarly ../../ , means go two folders back and so on.