my html file structure:
main
-resources
-static
-css
-email.css
-templates
-base.html
-registration.html
base.html is a common fragment holder including links, header, footer.
<head th:fragment="common_head(title)">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../static/css/email.css" th:href="#{css/email.css}" type="text/css"/>
<title th:replace="${title}">Email</title>
</head>
In my registration.html, I tried to re-use the setting in base.html
...
<head th:replace="base :: common_head(~{::title})">
<title>Welcome Email</title>
</head>
...
The email sending function is working fine, I can receive a non-css email message in my mailbox. The css link in base.html is correct, I can see the css style if I open directly base.html in the browser.
So why css does not work in registration.html?
Update:
I added an additional style placeholder in base.html.
<head th:fragment="common_head(title, styles)">
...
<th:block th:replace="${styles}"/>
</head>
I updated registration.html with additional style block.
<head th:replace="base :: common_head(~{::title},~{::style})">
...
<style type="text/css" media="screen">
...
</style>
</head>
But the style in the registration seems not working. What's the problem here?
Related
Building a Flask project for a simple login screen project I plan to expand on, but here I am stuck on what I would have guessed would have been simple.
Why is my html below not updating to be styled by my login.css?
Here is a snippet up until the link relation:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=devilce-width, intial-scale=1">
<link rel="stylesheet" type="text/css" href="/webapp/templates/login.css">
</head>
It is inside of the same folder, but to make it what I believe to be fool-proof I specifically ran it through the full folder directory.
I have the .scss, the .cssmap from the compiler, and the output login.css in the same folder as the .html as well.
I've downloaded SASS, ran a Live Sass Compiler through VSCode, and now it's compiled to a .css
"What do"?
Not sure exactly the specifics, but from my understanding using {{ url_for--}} worked.
(If someone can follow up with an explanation that would be beautiful.)
Noticed when scanning examples from PythonHow
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, intial-scale=1">
<title>Flask App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
</head>
I have a simple HTML page with some <sub> elements in it. For some reason, Google Translate offers to translate the subscripts from Arabic to English (despite being English to begin with), only moving them down a little when translated. The HTML page language is set to en-US. Is this just my computer being weird, or is there a code-related reason?
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--<meta name="google" content="notranslate"> (this successfully gets rid of the translate popup, commented out for testing purposes)-->
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<title>test</title>
<link rel="icon" href="favicon.svg" type="image/svg"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="functions.js"></script>
<script src="main.js" defer></script>
</head>
<body style="min-width: 0">
<div id="test"></div>
</body>
</html>
Added to #test by JS:
<div class="letter">A<sub>1</sub></div>
Website: https://test.edgeloop.repl.co
Screenshot: screenshot
Are you sure that this is the correct code? You seem to have a <html...>-tag inside your <head>-tag. Remove the duplicate html-tag inside your head, and instead add the lang="en"-attribute to your outer-most html-tag.
Your code should thus look as follows:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>test</title>
....
</head>
<body style="min-width: 0">
<div id="test"></div>
</body>
</html>
If this does not immediately solve your problem, try clearing the google chrome cache as follows:
Press F12 to open the dev tools menu
Right-click your refreh-button
Select the option empty cache and hard refresh:
If your webpage uses HTML and XML interchangably, you might need to add the following to your opening <html>-tag (see this link):
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
...
</html>
If your Google Translate does still pop up, you have the following options:
add translate="no" to your root html-tag
add the class notranslate to your root html-tag
add <meta name="google" content="notranslate"> to your head-tag
Your code should look as follows:
<html lang="en" translate="no" class="notranslate">
<head>
<meta name="google" content="notranslate"/>
....
</head>
....
</html>
#Lawrence Cherone's comment about adding more text seems to fix the problem, as does #unknown6656's suggestion of adding <meta name="google" content="notranslate">. I still don't know why subscripts are considered Arabic text, but adding English text seems to fix the problem. Thanks for all the answers.
I was trying to add css in my blogger's blog but for some reason blogger theme designer is not working so i decided to add css directly in the code using tags, but I can't find the tag in the html file. It is my first time when I am unable to understand where is. Anyone know where tag is in this file to add css?
I did not Code it completely! And the person who did is no longer in contact with me!
Click Here to see Code
To use an external style sheet, add a link to it in the section of the HTML page:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Search for this ]]></b:skin> and place your CSS code before it without using <style>
Or if you want to use a style tag, place it after </b:skin>
The <style> element is used to add CSS style rules to an HTML document. The element is expected to appear in the document <head>, but will also render acceptably when used in the <body> of the document.
Your program should look like this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
you should add the head tag yourself to the top of the document if you do not have one already. for the href change that to the name of your css file.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang='en'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1' name='viewport'/>
<!--[if ie]><meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/> <![endif]-->
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='https://justpaste.it/redirect/3qnyk/http://www.blogger.com/openid-server.g' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
<link expr:href='' rel='nofollow'/>
</head>
I have created an intranet website(i am new to website creation) and the HTML view was perfect without any errors in all browsers. i have made it has local host with IIS on the same system i am working with.
But when i tried to load it on any browser it loaded the page with just the content on it without any style that i made in the css definition it shows an error "MainMenu.css 404 (Object Not Found)"
Q1. Should i also define my css location in the IIS.
Q2. should i have to declare any line on the html
below is my code:
<!doctype html>
<html>
<head>
<link href="../css/MainMenu.css" rel="stylesheet" type="text/css">
<meta charset="ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-Type" content="text/html, charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOCUMENTATION</title>
</head>
<body>...</body></html>
Your call to the CSS:
<link href="../css/MainMenu.css" rel="stylesheet" type="text/css">
Is saying look in the directory above this one, look for a directory called 'css' and find 'MainMenu.css'.
This infers a directory structure like this:
/top/
/wwwroot/
... index.html etc ...
/css/
MainMenu.css
It's more likely that the directory structure looks like this:
/wwwroot/
index.html etc.
/css/
MainMenu.css
With the css directory within the site root (wwwroot in my example).
Therefore, your link should look like this:
<link href="css/MainMenu.css" rel="stylesheet" type="text/css">
For a relative path, or this:
<link href="/css/MainMenu.css" rel="stylesheet" type="text/css">
For an absolute path (better)
Hope this helps ?
Google Chrome Audit tool says:
Put CSS in the document head (3) CSS in the document body adversely
impacts rendering performance. Link node bootstrap-extract.css should
be moved to the document head Link node style.css should be moved to
the document head Link node css should be moved to the document head
But the stylesheets are linked in the head. Here is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR" xml:lang="fr-FR">
<head>
<title>site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/resources/css/bootstrap-extract.css">
<link rel="stylesheet" type="text/css" href="/resources/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
etc.
What am I missing?
Your code looks like it should be valid to me, however, the meta tag shouldn't be closed with />:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
This could cause the <head> tag to close, but that's very unlikely.
Have you looked at the HTML in Google Chrome to see how it is being displayed in comparison with what the code should look like?