I'm searching for a program or website that does convert html-code and css-code into a single html-sequence.
|| CSS
div { color: #eaf; }
|| HTML
<div>Foo</div>
<p>Bar <div>& Spam!</div></p>
Should be converted to
<div style="color:#eaf;">Foo</div>
<p>Bar <div style="color:#eaf;">& Spam!</div></p>
Why I search for it?
Because most email-clients do not support <style></style> in the email's body.
Thanks!
Proper syntax would be...
<div style="color:#eaf;">Foo</div>
<p>Bar <span style="color:#eaf;">& Spam!</span></p>
Here's a link to an online tool.
Here's another link to an online tool.
I've used both of these in the past with good results.
I found this: http://www.pelagodesign.com/sidecar/emogrifier/
Is that what you're looking for?
Related
I am new to HTML, and that's about to be very obvious, but I need some help on putting a simple link onto my website. The problem I'm experiencing is that my link when clicked on in Safari tries to pull from "file:///Users/kingwoody1/Desktop/Sample%20Website/“http://www.google.com/â€%C2%9D".
What am I missing? Why isn't it just going loading up google.com?
My code looks like this:
<html>
<body>
<div class=“headings”>
<h1>Scott Woodson for President</h1>
<p>A Man Of The People</p>
</div>
<div class=“options”>
<ul>
<li>
Search for stuff
</li>
</ul>
</div>
</body>
You have funky quotes which are probably breaking safari. Change all of the “ and ” to ":
<div class=“headings”> to <div class="headings">
and
<div class=“options”> to <div class="options">
This all looks good to me!
The only problem I can see in this code are the speach marks. Make sure to use the (") version for coding.
Not sure if this will help your problem or not.
Close your </html> tag it may cause some problems.
By the way it works fine on Safari!
your code works fine, but remember to close with
<./html>
, and use " as the funky quotes can cause problems in PHP (not sure about html). Try using http://jsfiddle.net/ to test websites, and it allows you to make small changes without having to reopen the page.
If my HTML looks like this:
<div class="purely-aesthetic-wrapper">
<section>
…
</section>
</div>
…is it possible to omit the outside div from the HTML and do something like this (with LESS):
section {
enclose-with(.purely-aesthetic-wrapper);
}
Sorry if it's an obvious question but I'm not having much luck finding the answer.
Short answer is no, it's not possible.
LESS is css pre-processor and it has nothing to do with HTML/DOM-tree
I'm trying to edit Tumblr Custom HTML to add another header link to my Tumblr theme.
I have searched stackoverflow for "Tumblr" "Custom HTML" "block:Pages" and "link" but have not found the bug in my code that's leading to the following problem:
I copy and pasted
<li>{lang:Archive}</li>
I then changed
"/archive/"
to
"/submit/"
and
{lang:Archive}
to
{lang:Submit a Post}
I end up with a webpage with a header link that, when clicked on, takes you to the correct page, but there is no text for that link. Please see a screenshot of the problem and the website I'm trying to fix.
I've included a code snippet so that you can help me troubleshoot. Thank you!
<div class="container">
<div id="headerwrap">
<div class="span-18" id="header">
<div class="span-18 last"><ul>
<li>{Title}</li>
{block:HasPages}
{block:Pages}<li>{Label}</li>{/block:Pages}
{block:HasPages}
<li>{lang:Random post}</li>
<li>{lang:Submit a Post}</li>
<li>{lang:Archive}</li>
</ul></div>
</div></div>
{block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}
<div class="span-24"><div class="span-5 blue_striped"> </div><div class="span-18 last"><p>{Description}</p></div></div>
<hr/>
The {lang:} tag lets you specify an English string that should be displayed in the user's language, but it only works with a predefined set of strings that can be found here:
http://www.tumblr.com/docs/en/localizing_themes
You can "request a string be added", but I have no idea how long that would take. Best would probably be to drop the {lang:} wrapper and just include the text directly:
<li>Submit a Post</li>
The string won't be localized for non-English users, but oh well!
My simple question is, how can I use multiple languages in one HTML page?
Something like
<div>
<p>This text is in English</p>
</div>
<div>
<p>This text in Japanese</p>
</div>
<div>
<p>This text in French</p>
</div>
It's for a language selector. The page is pure HTML.
Yes. It is possible. You can have the other language text in Unicode. Check out an example I created for you here:
Code:
Welcome
नमस्कार
வணக்கம்
Just use UTF-8 for your page encoding and it will all work. Browsers do this naturally; Unicode (of which UTF-8 is a representation) was invented for this.
The same was as you use one language. You just have the limitation that an HTML document has one character encoding, so you cannot use, for example, ISO-8859-1 encoding for French text and some JIS encoding for Japanese text, as you could if you wrote two separate pages.
The conclusion is that you should normally use UTF-8 if possible, and use workarounds like character references if not.
You can, and should, use the lang attribute to indicate the language of each part. But this is not necessary for basic functionality, and it’s really just good authoring habit more than anything else for now.
One tricky way to do it, is to set your CSS with, for example:
[lang=en-GB] [lang=fr-FR],
[lang=en-GB] [lang=ja-JP],
[lang=fr-FR] [lang=en-GB],
[lang=fr-FR] [lang=ja-JP],
[lang=ja-JP] [lang=en-GB],
[lang=ja-JP] [lang=fr-FR]
{
display: none !important;
}
And then mark your HTML with the lang attribute, such as:
<div lang="en-GB">
<p>This text is in English</p>
</div>
<div lang="ja-JP">
<p>This text in Japanese</p>
</div>
<div lang="fr-FR">
<p>This text in French</p>
</div>
You can have a simple javascript that detects the language selected and change the HTML root document :root.
Using jQuery, it would be like this:
$(document).on('change', 'select[name="lang"]', function(e)
{
$(':root').attr('lang', $(this).val() );
});
And automatically, the correct localised version only would be displayed and the other would not be visible.
After accidentally using a CSS selector in an HTML template I started wondering if there is a template language or an extension to one that would allow this syntax, and whether it would be useful. So instead of writing this:
<div id="mydiv">
<div class="first column">1</div>
<div class="second column">2</div>
</div>
We could write it like:
<div#mydiv>
<div.first.column>1</div>
<div.second.column>2</div>
</div>
Does something like this exist?
Maybe you mean something like Jade?
It is an HTML preprocessor.
The following:
doctype 5
html(lang="en")
head
title= pageTitle
script(type='text/javascript')
if (foo) {
bar()
}
body
h1 Jade - node template engine
#container
if youAreUsingJade
p You are amazing
else
p Get on it!
Will be translated to:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
if (foo) {
bar()
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container">
<p>You are amazing</p>
</div>
</body>
</html>
Also, it is not exactly what you're asking, but you may like Zen Coding. It is a plugin to code HTML at high-speed. GIF showing what it does:
It's basically:
Write pseudo-html.
Hit the shortcut.
Get full HTML.
?????
Profit!
You should check with your editor if it can support this. FWIW, I use this in VIM and it's awesome.
Maybe haml will fit your needs? It looks very similar.
There's a tool that uses a similar (though not identical) syntax called Zen Coding. You type this in your Zen Coding enabled editor:
div#page>div.logo+ul#navigation>li*5>a
... and get it expanded to:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
This differs from what you describe in that it doesn't require a preprocessor to run the template, it's just an editor helper to compose the final HTML. It may suit your needs or not.