I am PHP programmer now. And I am writing new project. When I want to load file using:
<!DOCTYPE html>
<html>
<head>
<base href="http://quest.my/" />
<title>Quest The Game</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<script type="text/javascript" src="src/js/jquery.js"></script>
</head>
But it is not working! It have to wark. I have my own virtal-host quest.my with directory /style/ with file main.css.
Can you help me? I am idiot?
try like this:
<!DOCTYPE html>
<html>
<head>
<title>Quest The Game</title>
<link rel="stylesheet" type="text/css" href="http://quest.my/style/main.css" />
<script type="text/javascript" src="http://quest.my/js/jquery.js"></script>
</head>
You need to use /style/main.css (note the leading /). That will cause the path to be relative to the root of the document (which will then refer to your <base/> tag). Right now it's a relative path, and therefore relative to the location the page was served from.
Related
Having resource tree like this:
picture
File index.html sees the CSS, but file registration does not see it. Both located in one folder. Both have the same html definition:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All people</title>
<link href="../../static/css/StyleCSS.css" th:href="#{css/StyleCSS.css}" rel="stylesheet" type="text/css" media="all" />
</head>
Files on github
What's wrong with it?
I know it is weird, but if you change
th:href="#{css/StyleCSS.css}"
to:
th:href="#{/css/StyleCSS.css}"
it is gonna work. Though I have no idea why it behaves differently on index.
I want to make login page using bootstrap and react. I use the following style from official page. I added these all bootstrap and css files in index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="all.css" rel="stylesheet">
<link href="autorization.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="bootstrap.bundle.min.js"></script>
<script src="jquery.min.js"></script>
</html>
But result is another than when I open throug a regular html page. The font is different.
This is how it should be:
And this is what I have:
I don't understand why, because I didn't change css files...
This could be the issue with index.js file. There you remove importing index.css line.
Remove this line in index.js file.
import './index.css';
You maybe load another CSS file after bootstrap rewrites CSS style rules from BS or bootstrap CSS file is not loaded, please check it in the console or in the browser which style from which file is applied like a first
You can dominate with important;
example:
font-family: 'Lilita One'!important;
I am trying to link my css to my vue.js file. I was building this out without the webpack. So I had many style worked out.. However, when I decided to move it to a webpack none of my custom css is even calling. I did research that said to include the css in the index.html as a link so that is what I have done. Is there a better way to do this that I didn't see? Any help would be much appreciated. It is also worth mentioning that I tried to use Include in the App.vue as well as require as I had seen in other suggestions but both pulled up errors and refused to compile any of my files....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<link rel="stylesheet" type="text/css" href="../src/assets/css/main.css">
<title>my-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<p>this is test script</p>
<!-- built files will be auto injected -->
</body>
</html>
I'm using react/webpack to run a development server on local 8080. This is something I don't quite understand yet and I've run into this problem before. Bootstrap is being linked in the HTML and is running fine. However, when I link the stylesheet, the console is giving me an error of 404 not found for my stylesheet.
Here is my HTML boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="public/stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Index.html and Index.js are at the root level, and so is the /Public directory, which only contains one file: stylesheet.css.
Why is stylesheet.css not loading in the browser when I run the local server and how do I fix this? Thanks.
if your sharing out the public folder with express like so
app.use(express.static(path.join(__dirname, 'public')));
then you do not need to have 'public' in the source.
in other words this
<link rel="stylesheet" href="public/stylesheet.css" />
should be this
<link rel="stylesheet" href="/stylesheet.css" />
I used JQM's Themeroller to develop a theme for my application. Right now, I'm just trying to get it to work in Chrome.
I have the head of my HTML file set up like so:
<head>
<title>SafeRides</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
and my file director is as follows:
Application/
index.html
themes/
SafeRidesTheme.css
SafeRidesTheme.min.css
images/
Am I just missing something obvious in the layout of my files? If someone could help me realize what's going on here I'd greatly appreciate it.
When using custom theme made by Theme Roller, libraries should be loaded this way.
You should remove jQM defualt style sheet and load jQM structure style sheet before your custom one.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>