Help. Am learning HTML5/CSS. Things are going spiffy until I cannot debug my HTML/CSS markup.
Am using WeBuilder which auto-completes and has links to standard tools like Tidy and others.
Here is what I’ve tried
used an internal CSS link in my HTML: it works;
put the styles.css in same and in a css folder- BUMMER
have relocated both files to another HDD- BUMMER
both files validate with my available tools
I am sure the problem is in the HTML file and have fiddled with every modification I can find suggestions about. I have rewritten the HTML again using WeBuilder’s auto complete but have not done it in Notepad. I understand the basics of HTML and CSS plus am very familiar with files and folders so have directed the href correctly (even so have tried several ideas from W3C.
NOTE: I see in the "publish" here, it picks up the Arial font where mine has times. If Arial is not your default, I'm at a loss because the color doesn't show. Neither shows the color. If I can be of further help please advise. I really thank you for any help.
Here is my HTML markup:
<!DOCTYPE html5>
<html>
<head>
<title>A Simple Page</title>
<meta http-equiv="content-type" content="text/htm; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
<link rel="stylesheet" href="styles.css" />
</style>
</head>
<body>
<h1>First Title</h1>
<p>A paragraph of interesting content</p>
<h2>Second Title</h2>
<p>A paragraph of interesting content</p>
<h2>Third Title</h2>
<p>A paragraph of interesting content</p>
</body>
</html>
Here is the CSS:
h1, h2 {
color: #3366CC;
font-family: "Arial", sans-serif;
}
This makes no sense:
<style type="text/css">
<link rel="stylesheet" href="styles.css" />
</style>
It should simply be:
<link rel="stylesheet" href="styles.css" type="text/css" />
The <style> tags are only used for inline CSS in a page. So if you wanted to you could do this:
<style type="text/css">
h1, h2 {
color: #3366CC;
font-family: "Arial", sans-serif;
}
</style>
But it is really better to keep CSS in a separate file.
Also, there is a minor issue with your DOCTYPE at the top of your HTML file. An HTML5 DOCTYPE is simply:
<!DOCTYPE html>
And not:
<!DOCTYPE html5>
The purpose of HTML5 is to—among other things—simplify document formatting & readability. So there is no such thing as <!DOCTYPE html5> it is simply <!DOCTYPE html>.
Related
I followed the example for setting up the ant-design-mobile for react, I'm using next.js - the styles are loaded, but not fonts.
I also extracted the HTML and created plain HTML example with full ant-design-mobile CSS and it also doesn't have proper fonts loaded.
See the difference, the font from the official ant-design-mobile button example
And the font from my example
P.S. Also - very strange - in the official ant-design-mobile documentation they advise against loading full CSS, but in its own example they actually include the full CSS
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8" class="next-head" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="http://unpkg.com/antd-mobile#2.2.8/dist/antd-mobile.min.css" />
</head>
<body>
<a role="button" class="am-button" aria-disabled="false"><span>Start</span></a>
</body>
</html>
Remove the css link and add this to your component
<head>
...
<style global jsx>{`
html,
body {
font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
margin: 0;
}
`}</style>
...
</head>
I'm working with Sendgrid's template system and need to manually inline some css for content that will be included in the Sendgrid smtpapi call.
Premailer doesn't seem to be actually inlining the css styles. I can inspect the result of calling Premailer.new but the processed_doc and doc both do not have the styles inlined.
Different methods I've tried:
Including the css file directly:
header = <<-HTML
<div class="preview-content">
#{data["content"]}
</div>
HTML
p header
=> "<div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. </p>\n</div>\n"
premailer = Premailer.new(header, with_html_string: true, adapter: :nokogiri,css: [Rails.root.join('app', 'assets', 'stylesheets', 'email_base.css').to_s], input_encoding: "UTF-8", verbose: true)
p premailer.processed_doc.to_html
=> "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"http://www.w3.org/TR/REC-html40/loose.dtd\">\n<html><body>\n<div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>\n</div>\n</body></html>\n"
premailer.doc.to_html returns the same thing with no inlined css.
I checked that the css file is accessible and that the styles apply to .preview-content p.
Adding a header to the document
header = <<-HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link rel="stylesheet" href="/asset/email_base.css" media="all">
</head>
<body width="100%" height="100%" bgcolor="#ffffff" style="margin: 0; padding: 0 20px;">
<div class="preview-content">
#{data["content"]}
</div>
</body>
</html>
HTML
p header
=> '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n <html xmlns=\"http://www.w3.org/1999/xhtml\">\n <head>\n <meta charset=\"utf-8\"> <!-- utf-8 works for most cases -->\n <meta name=\"viewport\" content=\"width=device-width\"> <!-- Forcing initial-scale shouldn't be necessary -->\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <!-- Use the latest (edge) version of IE rendering engine -->\n <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->\n <link rel=\"stylesheet\" href=\"/asset/email_base.css\" media=\"all\">\n </head>\n <body width=\"100%\" height=\"100%\" bgcolor=\"#ffffff\" style=\"margin: 0; padding: 0 20px;\">\n <div class=\"preview-content\">\n<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p></div>\n </body>\n </html>\n'
The desired css to be inline:
.the-excerpt,
.the-excerpt p,
.preview-content p
// +responsive-text(18px, 30px)
line-height: 1.8 !important
font-size: 18px
Is there something I'm missing to inline css manually? Both ways don't seem to yield any different results.
I'm trying out Premailer right now, and having some problems of my own.. but the way that i see Premailer actually processing the content and getting something different back (it removes the classes with the proper configuration setting, at least) is using this method:
premailer = Premailer.new(html, { :with_html_string=>true, :verbose=>true, :remove_classes=>true })
return premailer.to_inline_css
I decided that I wanted to learn Jquery Mobile so I set up a test site and instantly came across a weird bug, from what I've read and seen data-theme="a" should be the white theme and data-theme="b" should be the black/grey one. However, for me it's the other way around.. Have I perhaps done something wrong when downloading the library onto my site? And does this matter or should I just ignore it?
The markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div data-role="page" data-theme="a">
<h1>Testing</h1>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
This is what I get with data-theme="a":
I think it might be because your using a pretty old version of jquery mobile, I see you're referencing version 1.2.1, try version 1.4.5.
Currently I am using the JavaFx Webview to load a HTML page. But there is a problem when it loads the HTML page. It doesn't read the letter-spacing or -webkit-letter-spacing attribute in CSS. It's fine with the Chrome browser. How can I make it work in JavaFx?
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style>
.text {
letter-spacing: 20px;
}
</style>
</head>
<body>
<div class="text">
abcdefg
</div>
</body>
</html>
Looks like this property is not supported in JavaFX/JDK 7, but works for me in JavaFX/JDK 8. As far as I know, some of the WebViews rendering bugs fixed in JDK 8 won't be backported to JDK 7 and this one seems like being one of such bugs.
I have a simple web-app that I'm throwing together.
By & large, the default grails main.css is fine for all the scaffolded pages.
However, I want to supress this and use different, in-line css for the landing page.
How do I configure grails not to link main.css on a specific page?
The html is extremely simple, and contains no grails specific markup:
<!doctype html>
<html>
<head>
<meta name="layout" content="main" />
<title>My landing page</title>
<style type="text/css" media="screen">
body
{
background-color: #fff;
}
img {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img alt="Welcome!"
src="${resource(dir:'images',file:'Landing.png') }">
</body>
</html>
Also -- is main.css linked purely out of convention, or is there some configuration lurking somewhere I haven't spotted? (I've done a search but couldn't find it anywhere).
Can someone please reference where in the docs it talks about these conventions?
main.css is included in your landing page because you have specified that your landing page is based on the main layout
<meta name="layout" content="main" />
this layout is defined by grails-app/views/layouts/main.gsp and includes the main.css, most likely with a tag like this in the <head> of the page:
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
If you remove:
<meta name="layout" content="main" />
your landing page will no longer be based on the main layout, so it will not include anything defined therein (e.g. main.css).
However, rather than removing the layout completely just to prevent main.css from being included, it may be simpler to just override the CSS rules that you want to cusomise on the layout page by including custom rules in a <style> block in the <head> of the landing page
<style type="text/css">
body {
/* styles in here override styles from main.css */
}
</style>
Take a look at the resources plugin in grails 2.0.x. You can define Modules comprising of specific javascript and CSS files which will be compressed, optimized for the web. In the page of your choice, you can include the module you want. In your case, you could add a case like this in your main.gsp
<g:if test="${controllerName == "landing"}">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'custom.css')}"/>
</g:if>
<g:else>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}"/>
</g:else>