<html>
<link rel="stylesheet" type="text/css" media="screen" href="blogstyle.css">
<title>Welcome to my blog</title>
<body>
<frameset cols="10%,60%,30%" border="0" framespacing="5" frameborder="0">
<frame src="leftpane.htm" name="left_frame" scrolling="no" />
<frame src="middlepane.htm" name="middle_frame" scrolling="no" />
<frame src="rightpane.htm" name="right_frame" scrolling="no" />
</frameset>
</body>
</html>
The file leftpane.html contains following code:
<link rel="stylesheet" type="text/css" media="screen" href="blogstyle.css">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="generator" content="Studio 3 http://aptana.com/">
<meta name="author" content="RP">
<!-- Date: 2010-10-22 -->
</head>
<body>
<div id="PhotoBox-Outline" style = "top: 50px; left: 50px">
<div id="PhotoBox" class="shadow" style = "top: 20px; left: 20px">
</div>
</div>
<div id="PhotoBox-Outline" style = "top: 280px; left: 50px">
<div id="PhotoBox" class="shadow" style = "top: 20px; left: 20px">
</div>
</div>
</body>
</html>
The same code was working when the above div s were in the first code and when I had not defined frameset.
When you use frameset you use it instead of body. Just remove your body and /body tags in the main html file.
http://www.w3.org/TR/html4/present/frames.html
"A standard document has one HEAD section and one BODY. A frameset document has a HEAD, and a FRAMESET in place of the BODY."
In the first example with the frames;
<link rel="stylesheet" type="text/css" media="screen" href="blogstyle.css">
<title>Welcome to my blog</title>
should probably look like;
<head>
<link rel="stylesheet" type="text/css" media="screen" href="blogstyle.css">
<title>Welcome to my blog</title>
</head>
Also in the left pane;
<link rel="stylesheet" type="text/css" media="screen" href="blogstyle.css">
<html lang="en">
<head>
I believe it is best practice to put the style sheet within the head tag;
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="blogstyle.css">
See http://www.w3.org/TR/html401/struct/links.html for an example.
Related
I want to style "Login" text , can I do it without "label" tag ?
here's my code
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="WebFontKit/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body>
<div class="logindiv">
<label class="login">Login</label>
Yes, you can. See the fiddle
div.logindiv::before {
content:'Login';
position: top;
color: red;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="WebFontKit/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body>
<div class="logindiv">
</div>
</body>
</html>
I have set up a node js based server. I need to display specific polish characters in one of my pages. I have tried to add few lines I found in internet but there was no success, I'm still getting "?" instead of getting polish character. For views I use ejs.
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta charset = "UTF-8">
<meta http-equiv="refresh" content="10" >
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id = "NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
My actual result is "Niepubliczny Zak?ad medycyny rodzinnej" instead of "Niepubliczny Zakład medycyny rodzinnej". (you can find it in div).
You could try this:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>KOLEJKA</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="icon" href="/images/favicon1.png" />
</head>
<body style="background-color: #c2c2d6; overflow: hidden">
<div id="NazwaPrzychodni">
Niepubliczny Zakład Medycyny Rodzinnej <br />
"Modzelewska - Bakun" S.C.
</div>
</body>
</html>
For me, this code works OK :
http://next.plnkr.co/edit/DKvMsvAwoxMPu36J?open=lib%2Fscript.js&preview
I'm not sure if this could be a known scenario. But I'm confused since I couldn't find any discussions on this.
Raising my clarification. Does thymeleaf based html page allow meta tags within its head?
I've this code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Data Services Platform Support</title>
<div th:replace="fragments/header :: header-css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../../css/main.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
which displays the page I'm looking for.
But when I tried adding the meta tag to upgrade my page with few functionalities(which require a meta tag), Whitelabel Error Page is all what I get.
My modified code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Data Services Platform Support</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="fragments/header :: header-css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../../css/main.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
Is there something I need to consider? Please help.
Yes, Thymeleaf supports all tags. If you are using an old version of thymeleaf, it may be likely that it needs to be valid xhtml. So your meta tags should looks like this:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
(with the ending slash). The server log error message will contain the details of the error.
I'm using StackEdit (Which is amazing!).
It has a feature to export HTML file of the document.
The document uses The CSS File which is the default.
For instance, I downloaded HTML file with the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><h2 id="hello">Hello</h2>
<p>We’re dealing with…</p>
<blockquote>
<p>Written with StackEdit.</p>
</blockquote></div></body>
</html>
What I want to do is change the background color if the 'div' element with ID: "container" without changing any other property of his.
I only have access to the basic template which is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container"><%= documentHTML %></div></body>
</html>
How can I do that the simplest way?
Notes:
I can only edit the template.
I want to change the color into f6f7f9.
I want any other properties of the elements to be kept.
Updates
Tried your suggestions on the sample code above:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New Markdown document</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><div class="container" style="background-color:#f6f7f9;"><h2 id="hello">Hello</h2>
<p>We’re dealing with…</p>
<blockquote>
<p>Written with StackEdit.</p>
</blockquote></div></body>
</html>
It doesn't work, it changes the whole look of the document.
You can try by creating a local HTML file and see. -> I was wrong. It works!
if you are only able to edit the template, use inline styling like this:
<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
or since your template is the whole page, you can add custom styles in the head and use !important directive to override any other custom styling.
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
<%= documentHTML %>
</title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
<style type="text/css">
.container {
background-color:#f6f7f9 !important;
}
</style>
</head>
<body>
<div class="container">
<%= documentHTML %>
</div>
</body>
</html>
Add the style background-color:yellow; to the container div.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<div class="container" style="background-color:yellow;"><%= documentHTML %></div>
</body>
</html>
try this one
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
<style>
.container
{
background:#f6f7f9;
}
</style>
</head>
<body>
<div class="container" style="background-color:#f6f7f9;"> <%= documentHTML %></div>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= documentTitle %></title>
<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://stackedit.io/libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<div class="container" style="background-color:#f6f7f9;"><%= documentHTML %></div>
</body>
</html>
The title does show up in the browser's title bar as expected, but it also shows up as text on the first line of the Web page. Here's the HTML. What gives?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8">
<title>User pics</title>
</head>
<body>
<img src="http:/blah.s3.amazonaws.com/1xrfnyf08goxpsda1mhs.jpg">
</body>
</html>
Try
<!DOCTYPE html>
<html>
<head>
<title>User pics</title>
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<img src="http:/blah.s3.amazonaws.com/1xrfnyf08goxpsda1mhs.jpg" alt="" />
</body>
</html>
You can not define link tag outside html tag.
If you have
*{
display:block;
}
in your CSS file make sure to remove it because that will cause the title to show up
remove css reference and check it once.. may be the issue with css
You need to properly close the link tag above.
You have
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8">
it should read
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8"/>