I have created a web page which has the following at the start,
<link href="./css/font-awesome.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet">
<link href="./css/ui-lightness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet">
<link href="./css/base-admin-3.css" rel="stylesheet">
<link href="./css/base-admin-3-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="./compiled/flipclock.css">
<link href="./css/pages/plans.css" rel="stylesheet">
<link href="./css/pages/pricing.css" rel="stylesheet">
<script src="./js/jquery-1.11.1.js"></script>
<script src="./compiled/flipclock.js"></script>
<link href="./css/custom.css" rel="stylesheet">
I have the page created statically and it looks perfect, however now I have started to integrate it with node.js and express. When loading the page from the app.js I am using.
app.get('/liveSale.html', function(req, res){
res.sendfile('liveSale.html');
});
However when the page is loaded it will not render the stylesheets and scripts.
Hope someone can help.
Looks like I found a couple of duplicate threads.
app.use(express.static(__dirname + '/public'));
This solved my problem.
Related
My app has been crashing on Safari (only) and I've narrowed it down to this one line:
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap" rel="stylesheet">
This line causes no issue if I only load one weight, but once I add a second, Safari crashes again. In other words, the following works:
<link href="https://fonts.googleapis.com/css?family=Quicksand:300&display=swap" rel="stylesheet">
... this also works
<link href="https://fonts.googleapis.com/css?family=Quicksand:300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:700&display=swap" rel="stylesheet">
Any idea why this might happen?
I initially was loading a page
somePage
And the index.html would render with styling
<head>
..
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
The above code works fine in production. However someone made some changes and deleted the app folder and refactored the code to this:
somePage
And the index.html to
<head>
..
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
Now index.html cannot find the css styling. I tried different relative and absolute paths but nothing seems to work.
Any help?
EDIT: My folder structure is:
When I load my page localy http://localhost:56071/blabla/en/ and then click to navigate to "somePage" I end up on http://localhost:56071/tos/blabla/en/ a page with text and no styling. However, if I try to navigate to http://localhost:56071/themes/basic_themes/blabla/base_theme/bootstrap.min.css it returns a 404. BUT I can access my .css file through this link http://localhost:56071/blabla/en/themes/basic_themes/blabla/base_theme/bootstrap.min.css Can someone explain whats happening here?
My index.html file is in the public_html directory. All css files/ image files are in a css directory, and images directory respectively.
I have been over and over my code but the index is not linking with anything in hosting.
`
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="main.css"> // ***
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-icon.css">`
*** I moved the main.css file directly into public_html to see if it would work and it does. I can only assume that I have made a mistake in my path.
BTW I have added a / to the css path in href. I don't want to move everything into the public_html folder, which I am taking to be the root
Many thanks
This might be redundant but one possible workaround is to use ./ everywhere. Eg.
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/flexslider.css">
<link rel="stylesheet" href="./css/jquery.fancybox.css">
<link rel="stylesheet" href="./main.css"> // ***
<link rel="stylesheet" href="./css/responsive.css">
<link rel="stylesheet" href="./css/animate.min.css">
<link rel="stylesheet" href="./css/font-icon.css">
It should work.
Assuming the css folder and main.css are the siblings of the HTML file in which this code is inserted .
I have multiple css files in html file. It cause conflict for some of the styles.
I want to know execution sequence to avoid conflict or suggest me some other method.
Below are the code.
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox-theme.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/cropper.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fileinput.cs">
The CSS files will be parsed from top to bottom. For example, any conflicting styles in main.css would be overridden by style.css.
I would suggest using a CSS preprocessor like Sass and a task runner like Gulp to bundle your stylesheets together, reducing the number of requests the browser has to make. That would also make it easier to namespace any styles to avoid conflicts.
For example:
#namespace {
// original code goes here, which will all be prefixed with #namespace
}
FYI, there’s a typo in your code above—css/fileinput.cs is missing an s.
I prepared my bootstrap website using visual studio and it works properly.
But when I try to run html file through going in that folder then bootstrap css is not loading.
Can you tell me the reason behind this?
Thanks in advance
Here is my head section
<link href="../font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="../dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../dist/css/bootstrap-theme.css" rel="stylesheet" />
<title > K.P Facility Management</title>
<link href="StyleSheet.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="../images/title.png" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
Most probably the paths are wrong. With the "../" before your path, you're going up a level from the root, which will return an error (if you look at the inspector).
Try placing this html in the folder that contains the folders you are going to use files from, and change the paths to:
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.css" rel="stylesheet" />