when i open http://localhost/Website/home.html my css stylesheet is not showing up. Maybe it is something with the bootstrap css? I am new to both bootstrap and XML. Here is my home.html head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>****</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
My style.css is located in the same folder as my home.html
EDIT: some of my css are now showing, but not all. Strange..
EDIT 2: Apparently the bootstrap CSS did something fishy, it works if i changed the order to this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
Related
How do I add line breaks when using the Thymeleaf template layout?
Here is my html base code.
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">Layout title</title>
<!-- Common -->
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/
awesomeapp.css}">
<link rel="shortcut icon" th:href="#{/images/favicon.ico}">
<script type="text/javascript" th:src="#{/sh/scripts/codebase.js}"></
script>
<!-- Add -->
<th:block th:replace="${links}" />
</head>
And this is the html main code.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>Main title</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui.css}">
</head>
<body>
main content
</body>
</html>
Here is the result rendered by <th:block th:replace="${links}" />.
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"><link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui .css}">
But what I want is:
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui.css}">
Making the line break like this is what I want.
How can I solve this problem?
Head:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png"/> <!-- Here -->
<title>TITLE</title>
<script src="https://use.fontawesome.com/5aaf8b7460.js"></script>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="dist/css/style.css">
<script src="https://unpkg.com/animejs#3.0.1/lib/anime.min.js"></script>
<script src="https://unpkg.com/scrollreveal#4.0.0/dist/scrollreveal.min.js"></script>
My favicon is in the same directory as index.html
However it just shows the favicon as a white page - not working.
How do I fix this?
try this
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
See the full url instead only image name :
Source and more info about :
This is not mandatory, but it may affect on older browser, check this https://www.w3.org/2005/10/howto-favicon
The code is....
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet/style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Videos - Pranked Bros</title>
<link rel="icon" type="image/png" href="img/logo-7.png">
</head>
<body>
<!-- other codes -->
</body>
in the browser it's like:
So the code inside head tags goes inside the body tag. In this case, what should I do?
There's probably something wrong with the tags before the part, maybe this is the problem.
I have the following head section,
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
and my styles -- from both Bootstrap and my local stylesheet -- don't seem to be loading when I'm trying to test locally in the browsers. This happens in both Google Chrome and Firefox.
However, when I push to my Github Pages repository, the styles are applied and working.
Side note: some of the alignment styles seem to apply but none of the padding, colours etc.
Try to load just your CSS inside the <head> tag:
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
After, go to the final of the <body> tag and paste the other dependencies left:
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
It will improve your system because starting with the CSS, i will not stop reading any script while loading your page.
Edit:
If still not working, try to remove:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Can be a problem with external links instead.
This part of code seems to be the problem:
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
Seemingly the file structure you are using locally differs from the file structure you are using on your remote repo. stylesheets.css is in the root folder in your remote repo, but it is not there in your local environment. Probably your page and stylesheets.css are in the same folder in both occurrences but the difference between the two cases is that they are in root in one case and not in root in the other case.
I'm trying to link my local bootstrap, and style file to my html file, but none of them works.
Here's my html file:
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
My css files are located in a folder called css.
I got these files there:
The htdocs folder I have this:
JUST TRY THIS ---
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="navbar-header">
<div class="navbar navbar-inverse navbar-static-tops">
</div>
</div>
</body>
</html>
These Codes are Wrong ---
<link type="text/css" ref="stylesheet" href="css/bootstrap.css">
<link type="text/css" ref="stylesheet" href="css/styles.css">
These are Correct ---
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>