I am trying to refer to my JS/CSS with a relative path, like ./myScript.js, such that, if I host the site on https://myHost.com/myPath, it should look for the script in https://myHost.com/myPath/myScript.js, but if I host it on http://localhost/, it should look in http://localhost/myScript.js. It is always looking in the root though, as if I had made an absolute path.
Is it not possible to make relative paths? I would prefer if I did not need to change the actual HTML file between environments.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="./logo192.png" />
<link rel="manifest" href="./manifest.json" />
<title>React App</title>
<link href="./static/css/main.6dea0f05.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>/* a bunch of auto generated react code */</script>
<script src="./static/js/2.1ca84f3b.chunk.js"></script>
<script src="./static/js/main.487a42e6.chunk.js"></script>
</body>
</html>
Try to use this:
<base href="https://www.w3schools.com/">
I hopes, that it helps for you!
This is one of those times that I spend 2 hours fiddling with it, to no avail, post a question, and then find the answer directly after..
The issue is that I automatically return index.html if users do not specify it, making chrome think that the current "folder" is the root when accessing https://myHost.com/myPath. If I go to https://myHost.com/myPath/index.html it works.
So, I need to do a proper redirect to index.html, instead of just returning it. Or to anything under myPath, like https://myHost.com/myPath/home.
Related
I am reading css file from aspx
Login.aspx
<HTML>
<HEAD>
<title>LoginWebForm</title>
<meta name="vs_showGrid" content="True">
<link href="stylesheets/layout.css" rel="Stylesheet" type="text/css">
<link href="stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
</HTML>
</HEAD>
and directory structure is,
MyProject
- folder1
- folder2
- stylesheets
- layout.css
- LoginWebForm.css
- Login.aspx
So, here Login.aspx and folder stylepsheets are on same level, it means i can by specifying path as, "stylesheets/layout.css"
but. this does't work. If I run same application on **Windows 2012 server then it works**. but when I run it on Windows 7 then it it doesn't work.
Can you please let me know whether this is OS related problem OR some settings required/ configuration required to be run the application on Windows 7.
Thanks You
Your html structure is not good:
<HTML>
<HEAD>
<title>LoginWebForm</title>
<meta name="vs_showGrid" content="True">
<link href="stylesheets/layout.css" rel="Stylesheet" type="text/css">
<link href="stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
</HTML>
</HEAD>
This would be a "normal" html structure:
<HTML>
<HEAD>
(head content)
</HEAD>
<BODY>
(body content)
</BODY>
</HTML>
Try to fix the html structure and maybe works after that ;-)
Another thing you could try is start your CSS paths with "/", for example:
<link href="/stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
And... Why one of your "link href..." lines ends with "/>" and the other one ends with ">" ??
I think both are correct ways (not sure now), but... Why you do it in a different way in any case??
good luck
I have my index page head section as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.min.css" />
<title></title>
</head>
Until this morning, the page always used to load fine. But I noticed this morning that css isn't loading at all. I checked the locations of css files. It seems to be correct. Can anyone suggest whats wrong?
There may be a problem with your browser calling the local bootstrap CSS file.
Try requesting the bootstrap CSS via CDN by using:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
And then troubleshoot your local CSS file.
Hope this helps!
Your code looks fine, try playing with the css file path. You may not need the "bootstrap-3.2.0-dist." Typically css is just css/bootstrap.min.css if it's located in a CSS folder and your index file is in your root directory.
I am creating a website in HTML, and I face a problem.
I have a CSS folder, and I want to be able to access it from every directory
root:
/css
- /skel-noscript.css"
- /skel-noscript.css"
/js
- init.js
- skel.min.js
- skel-panel.min.js
- html5shiv.js
/Downloads
-/Download.html
/Downloads.html
/index.html
...
Now I have trouble when I try to access the stylesheets in Downloads/Download.html
my <head> code:
<head>
<title>TITLE</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<!--[if lte IE 8]><script src="../js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/skel.min.js"></script>
<script src="../js/skel-panels.min.js"></script>
<script src="../js/init.js"></script>
<noscript>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</noscript>
</head>
When I use this code, the stylesheets don't work.
when I delete the <noscript> around the links to the stylesheets, they do work, but my website is totally messed up.
What is happening?
When I use this code in the root directory, it works fine
css files are not being added from tags in this case, is for browsers that don't support js or if js is off.
go to the "init.js" file(one that u attached just before the tag) in your js folder and check it... css is being added from their so change directory paths for css from there.
regards
Are you turning off the javascript when testing this? <noscript> is only activated when the visitor has no scripting enabled. If you want to be able to link the css files always you have to get rid of the tag.
I suggest you to create a file something like header.phtml and call all the files you need to render the template.
<head>
<title>TITLE</title>
<noscript>
<link href"<?= $this->getCssPath(); ?>" rel="stylesheet" type=text/css />
</noscript>
</head>
and greate a file where you create a class something like
<?php class MyTemplate {
public function getCssPath() {
return 'css/skel-noscript.css';
}
}
I'm having an issue with linking html and Css and have no idea why. I'm doing everything like the book and tutorials says. However, I'm not getting to do the external configuration of css.
This is the code(just a test):
<!DOCTYPE html>
<html lang = "eng">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheets" type="text/css" href="/styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
and CSS:
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
Maybe I miss something, because when I do internal css (within my html code with ) it goes ok and the web browser is able to read that. It seems like the html is not linked with css, but it's even on the same folder so the path shouldn't be the problem.
I'm using Linux and Aptana Studio.
I've searched a lot the last 2 hours and cannot find where the mistake is.
I invite you to read this article Absolute and Relative Paths
Then we pass to your code:
<link rel="stylesheets" type="text/css" href="/styles.css">
Should be :
<link rel="stylesheet" type="text/css" href="styles.css">
Your styles.css should be in the same folder as your html file.
To verify that you have an error , check Console of your browser,you will be noticed that your file doesn't exist(404 error).
An other way to make your css working is to integrate it inside your page without separation:
Example:
<style type='text/css'>
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
</style>
If the other suggestions don't work, you can try re-saving the HTML and CSS sheets with "UTF-8" encoding and declare UTF-8 encoding in the HTML under the <head> with <meta charset="utf-8>"
The rel attribute should just have stylesheet in it, singular not plural as well
I had the same problem correct the correct directory structure solved my problem. This is a good visualiton on how to organize your directory structure.
http://rosebusch.net/jeff/miscellaneous/tree.html
That is, the index.html folder is on the same level as the CSS folder. If you want to put index.html in a HTML folder, to link to the CSS folder you would have to backout first by linking href="../css/stylesheet.css". The ".." will take you up a level.
Make sure style.css is in your root web directory since that is where you are calling it from
Don't put the / in front of styles.css and make sure they are in the same folder.
Try this instead:
<!DOCTYPE html>
<!-- Language was wrong? -->
<html lang = "en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Check the path to the file - I made it relative to where the HTML is -->
<!-- Correct the rel attribute's value too -->
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
If all the above not working:
1- Make sure you have no inline/internal CSS > Delete all style code from the Html page (it ll prevent external css link)
If your CSS file are in another folder then use
<link rel="stylesheet" type="text/css" href="folder-name/styles.css">
I found out while Using Visual Studio Code and adding quotes that it was quoting automatically. So when I put in quotes and looked in the index.html of the index it was quoting the quotes (Bad News). Try link
<href=FILENAME.css rel=stylesheet type=text/css />
Hope this works! Also, if you want Multiple CSS files, organize them in a folder, if you do so in FILENAME put /FOLDERNAME/FILENAME.css
BUT make SURE it is under the main folder where your Index is!
just try tasking off the / in front of the style.css
Place your link in the head tag or body tag, it is best to put it in the head tag.
I have an odd problem I've never seen before - linked stylesheets and javascript files appearing inline when I browse the source of a page. It only happens online and not in my local development machine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/extend-bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/ >
and so on becomes this kind of thing:
<!DOCTYPE html><html lang="en"><script src="http://1.2.3.4/bmi-int-js/bmi.js?version=1363970337" language="javascript"></script><head><meta charset="utf-8"><title>Pagetitle</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><style type="text/css" style="display:none">/**/.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}.clearfix:after{clear:both;}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}a:hover,a:active{outline:0
and it goes on.
Anyone any thoughts on why this would be happening?
Thanks.
DS
Do you have any compressing software on the server? If you save the page, does it also comes out as 1 line? Maybe it is a setting in your browser.
If you're using IE, browser tools being enabled would cause this.
This is likely a duplicate post of CSS and JavaScript appearing inline in sourcecode