I am using Thunderbird as my primary work mail client. I have just created a new HTML signature, which shows correctly in the Thunderbird, in Opera and in an online HTML Viewer but not on GMail. I would be very grateful if anyone could point me in the direction of what the problem is about. I have attached the .html signature file.
EDIT: I realized that I didn't specify the problem: when I inspect the elements in Opera on the GMail web inbox I see that the whole text is formated to Arial, 12.8 px while losing the different color on the first line (class = .name).
My CSS is very rusty so I suspect the error is on my side...
EDIT 2: code below as corrected by Tim Gerhard (thanks a lot!)
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.normal{font-family:"Arial"; font-size:9pt; line-height:1.25; color:#606060; font-weight:400}
.name{font-size:10.5pt; color:rgb(119,187,65); font-weight:700;}
.link{color:rgb(17,85,204)}
</style>
</head>
<body>
<div class="normal">
<span class="name">Rostislav Janda</span></br>
Obchodní zástupce</br></br>
<a style="link"; href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</br>
<a style="link"; href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
</br></br>
IQ Budovy s.r.o.</br>
<a style="link"; href="[map link]">Mečířova 5, 612 00 Brno</a></br></br>
<img alt="IQ_Logo" src="[image address]">
<br><br><br>
</div>
</body>
</html>
Edit:
You can use inline stylings to style your E-Mail as classnames aren't fully supported (as far as I', concerned). Use style="color:red" instead of classes. Inline should work with every Mail program.
Your html was full of errors which probably caused the issue.
I took the time to fix it and this is the (now correct) markup:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.normal {
font-family: "Arial";
font-size: 9pt;
line-height: 1.25;
color: #606060;
font-weight: 400;
}
.name {
font-size: 10.5pt;
color: rgb(119, 187, 65);
font-weight: 700;
}
.link {
color: rgb(17, 85, 204);
}
</style>
</head>
<body>
<div class="normal">
<span class="name">Rostislav Janda</span><br/>
Obchodní zástupce<br/>
<br/>
<a class="link" href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</a><br/>
<a class="link" href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
<br/>
<br/>
IQ Budovy s.r.o.<br/>
<a class="link" href="[map link]">Mečířova 5, 612 00 Brno</a><br/>
<br/>
<img alt="IQ_Logo" src="[image address]"/>
<br><br><br>
</div>
</body>
</html>
What was wrong?:
You use the <br> tag wrong. It's <br/> and not </br>
One of your image tags was not closed properly
One of your hyperlinks (<a>) was not closed
You use style="" instead of class=""
Related
I've been trying to integrate my FTP server into a basic HTML webpage, so it looks a bit better, and it feels more like a cloud storage site. I've tried <object>, <embed> and <iframe>. Here's the details for the sites:
FTP server - "FTP://F-Drive.myftp.org/",
Website - "HTTP://F-Drive.myftp.org/"
Yes, I am aware this is not secure, but I don't use it for anything sensitive.
Here is the code of the page:
<html>
<head>
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon"/>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-family: Century Gothic;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #ff00ff;}
</style>
<!--<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon"/>-->
<title>F-Drive</title>
<section align="center" style="padding: 2%;">
<img src="favicon.png" alt="F-drive Logo">
</section>
</head>
<body style=background-color:#002c8b;">
<section style="background-color:#10c5fb;">
<h2 style="text-align: center;"><span style="font-family: Century Gothic"><strong>Welcome to</strong></span></h1>
<h1 style="text-align: center;"><span style="color: #ff2600;"><span style="font-size:71px"><span style="font-family: Century Gothic"><strong>F-Drive Online Storage</strong></span></span></h1>
<h2 style="text-align: center;"><span style="color: #ff7b00;"><span style="font-family: Century Gothic"><strong>Created by Eddie Farnworth</strong></span></span></h1>
</section>
<div style="background-color:#ffe6cc;color:white;padding:20px">
<section style="background-color:#ffe6cc;">
<div align="center">
Log out
</div>
<body>
<object data="FTP://F-Drive.myftp.org" width="400" height="300" type="text/html"></object>
</body>
</html>
Might be a bit untidy because I'm not massively experienced with HTML.
Any help is appreciated.
Due to security issues it is not really possible to change .
But anyway take a look at this Change ftp css style
I am trying to finish a project but I am stuck on the final step.
All I want to do is put some text on the side of an interactive google map. However so far no matter what I have tried the text stays underneath. Here is the HTML code:
<!--Reach out section begins-->
<section id="reach-out" class="contact">
<h2 class="section-title secondary-border">
<p>Reach Out</h2></p>
<div class="contact/info">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
>
</iframe>
</div>
<div>
<h3>Pump Buddy</h3>
<p>
Any questions or concerns before signing up? <br />
Let us know, and we will be happy to talk to you.
</p>
<address><!-- <address>: Defines the contact information
for the author or owner of the document or parent element.-->
55 Main Street<br />
Some Town, CA<br />
12345<br />
P: 555.PUMP.BUDZ (555.786.2839)<br />
E: info#pumpbuddy.io
<!-- Using the mailto: prefix in the anchor tag's href attribute
instructs the browser to open the default mail client application
upon clicking the link and then populates the address field with
the email address listed in the href value. -->
</address>
</div>
</section>
</body>
and this is the corresponding CSS:
/* REACH OUT STYLES START */
.contact {
text-align: center;
background: #024e76;
}
.contact h2 {
color: #fce138;
}
.contact-info iframe {
width: 400px;
height: 400px;
}
/* This is a potentially
dangerous choice due to possible side effects
(unless a global rule is needed). By using the
class (contact-info) as the CSS selector, also called a class
selector, we can safely target the <iframe> that
is a descendant or child of the element with this class.*/
.contact-info div {
width: 410px;
display: inline-block;
vertical-align: top;
text-align: left;
margin: 30px 0 0 60px;
color: white;
}
.contact-info h3 {
color: #fce138;
font-size: 32px;
}
.contact-info p, .contact-info address {
margin: 20px 0;
line-height: 1.5;
font-size: 20px;
font-style: normal;
}
.contact-info a {
color: #fce138;
}
/* REACH OUT STYLES END */
Any kind of help would be greatly appreciated!
Try this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-5">Reach Out</h2>
<div class="row">
<div class="col">
<div class="text-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12182.
30520634488!2d-74.0652613!3d40.2407219!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!5e0!3m2!1sen!2sus!4v1561060983193!5m2!1sen!2sus"
></iframe>
</div>
</div>
<div class="col">
<div class="">
<h3>Pump Buddy</h3>
<p>Any questions or concerns before signing up? <br> Let us know, and we will be happy to talk to you.</p>
<address>
55 Main Street<br>
Some Town, CA<br>
12345<br>
P: 555.PUMP.BUDZ (555.786.2839)<br>
E: info#pumpbuddy.io
</address>
</div>
</div>
</div>
</div>
</body>
</html>
Use z-index and set position property to absolute or fixed for the text you want to display over the map.
I just started learning webdesign and I'm having this ongoing problem and I've posted a question about it before. Everything I tried didn't work but I made a few changes so I wanted to rephrase the question and add some more details.
I'm making a simple website for a Romanian artist and it will have an English version and a Romanian version (switching languages with tiny flags in the nav bar).
It's all written in WordPad, using just html and css, and all pages are in the same root folder. I have several html files and one css file (so it's an external file), which is linked in the head of each page. I have English versions and Romanian versions and they're all linked accordingly from the navigation.
Now, my issue is that the CSS will only work on the main English page and refuses to on any of the others, no matter which language, despite all of them having the same head, header and footer structure.
I tried Firefox and Chrome and it's the same story.
I clicked on "Page Source" on all the pages when opened in a browser, corrected any errors showing up, and the link to the css and all pages works when I click it.
I initially had several CSS files, one for each html file, but I deleted them except for one (I misunderstood the process initially and didn't realize they can all have the same css file). So now there is only one CSS file in the root folder "Style.css".
All html files are saved in "Unicode" encoding.
Except for the modified words, this is the exact css, as well as html structure of the main English page (on which the CSS works):
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
article.figures figure {
display: inline-block;
float: left;
}
aside {
float: right;
Font-family: Verdana;
}
footer {
color: grey;
font-family: Tahoma;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Name</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="Name, visual artist">
<meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
<meta name="author" content="Me">
</head>
<body>
<header>
<img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
<h1>Name </h1>
<nav>
<a href=///C:/Users/.../main page in English.html>Galleries</a>
<a href=file:///C:/Users/.../News.html>News</a>
<a href=file:///C:/Users/.../About.html>About</a>
Shop
<a href="file:///C:/Users/.../webpageinRomanian.html">
<img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
</a>
</nav>
</header>
<address>email</address>
<article class="figures">
<figure>
<img src="images\painting.jpg" width="335" height="325" alt="painting">
<figcaption>Paintings from 2010 - 2015</figcaption>
</figure>
<figure>
<img src="images\2.jpg" width="335" height="325" alt="painting 2">
<figcaption>2009 - 2000</figcaption>
</figure>
<figure>
<img src="images\3.jpg" width="335" height="325" alt="painting 3">
<figcaption>1990 - 1999</figcaption>
</figure>
</article>
<footer>copyright Name
<br>
<A HREF="https://www.facebook./...">
<IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
</A>
<A HREF="https://www.behance....">
<IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
</A>
<br>Webdesign by me
</footer>
</body>
</html>
This is a page on which the same CSS doesn't work:
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
article.figures figure {
display: inline-block;
float: left;
}
aside {
float: right;
Font-family: Verdana;
}
footer {
color: grey;
font-family: Tahoma;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Name News</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="Name, visual artist">
<meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
<meta name="author" content="Me">
</head>
<body>
<header>
<img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
<h1>Name </h1>
<nav>
<a href=///C:/Users/.../main page in English.html>Galleries</a>
<a href=file:///C:/Users/.../News.html>News</a>
<a href=file:///C:/Users/.../About.html>About</a>
Shop
<a href="file:///C:/Users/.../webpageinRomanian.html">
<img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
</a>
</nav>
</header>
<address>email</address>
<h2>What's New</h2>
<h3>Upcoming exhibitions:</h3>
<ul>
<li>July 2016</li>
<li>October 2016</li>
</ul>
<footer>copyright Name
<br>
<A HREF="https://www.facebook./...">
<IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
</A>
<A HREF="https://www.behance....">
<IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
</A>
<br>Webdesign by me
</footer>
</body>
</html>
Which might work on this website, but I swear, it won't work in my browsers.
It's driving me nuts.
I'd be extremely grateful for any help!
EDIT:
This is what shows up in the developers console for the 'News' page:
And this is the root folder:
Try this inside your <head>
Source: w3schools
<base href="http://www.yourwebsite/" target="_blank">
Well it is working for me... make sure that the html and css files actually are in the same folder
/folder
--thing.html
--other.html
--style.css
And as pointed out in comment don't use c:/ to referer to files
<html>
<body>
<font color="#FF0000">Red</font>
<BR>
<font color=green>Green</font>
<BR>
<font color= rgb(255,255,0)>Gold</font>
</body>
</html>
From the code above I am trying to use different ways to change the font color. The first 2 ways work perfectly (in hex and the actual name); but the third one in RGB format is not displayed correct. What is the error in there?
style="color:rgb(255,255,0)". The font tag is deprecated and inline style should also be avoided. Don't forget your double quotes on attribute names: attr="value" not attr=value
This would be best done in CSS using a target class:
<p class="my-class">Some text</p>
In your css file:
.my-class {
color: rgb(255,255,0);
}
The tag is also not to be used for layout. It should only be used for new-lines in text. Instead, use display: block on the elements that should be on a new line.
Here's a complete sample: (note that <p> tags have display: block by default)
<p class="red-text">Red</p>
<p class="green-text">Green</p>
<p class="gold-text">Gold</p>
CSS:
.red-text {
color: #FF0000;
}
.green-text {
color: green;
}
.gold-text {
color: rgb(255,255,0);
}
Live demo (click).
How about this?
<style>
.red{
color: #FF0000;
}
</style>
HTML Tag:
<div class="red" >Red</div>
<html>
<head>
<title>webpage name</title>
</head>
<body>
<font color="#FF0000">Red</font> (it's look right).
<BR>
<font color=green>Green</font>(wrong).
<BR>
<font color= rgb(255,255,0)>Gold</font>(wrong).
</body>
</html>
modified
<html>
<head>
<title>webpage name</title>
</head>
<body>
<font color="#FF0000">Red</font>
<BR>
<font color="green">Green</font>
<BR>
<font color="rgb(255,255,0)">Gold</font>
</body>
</html>
Basically I am trying to create an email template using HTML and Dreamweaver. It's my first template. The fact that I cannot use <div> tag for email templates is really giving me headache. I am having difficulty aligning the social icons with the "I am social text". They both are assigned with align="center" inside the td tag. The image that is displayed below is "footer" section of my email template.
Here's the screenshot:
I am only posting the code for footer section because my content and header section is working fine.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrickyPhotoshop Newsletter</title>
<style type="text/css">
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
background: #CCC;
}
h4.copyright, p.copyright {
padding-left: 50px;
color: #FFF
}
h4.social {
padding-left: 50px;
color: #fff;
}
p.footer {
color: #FFF;
}
</style>
</head>
<body>
<table width="600" align="center" bgcolor="#999999">
<tr>
<td align="center"><h4 class="social">I am also social</h4></td>
</tr>
<tr>
<td align="center"><p class="footer">
<a href="http://www.facebook.com/trickyphotoshop">
<img src=
"images/Facebook-256.gif" width="25px" height="25px"/>
</a>
<a href="http://www.tricky-photoshop.com">
<img src="images/g+.gif" width="25px" height="25px" />
</a>
<a href="http://www.twitter.com/trickyphotoshop/">
<img src="images/twitter.gif" width="25px" height="25px" />
</a>
</p></td>
</tr>
<tr>
<td height="10"><h4 class="copyright">Copyright Area</h4></td>
</tr>
<tr>
<td height="10"><p class="copyright">
© All rights reserved
</p></td>
</tr>
</table>
</body>
</html>
Basically I want two things:
I want to properly align "I am also social" text with the three icons i.e. facebook, twitter, google+
As you can see there is a huge space between "Copyright Area" and "All Rights Reserved". I want to remove this space.
I know that my code is not too much professional but it's my first HTML code.
You should change the style as follows:
h4.social {
/* remove: padding-left: 50px; */
color: #fff;
}
h4.copyright, p.copyright {
padding-left: 50px;
margin: 0px; /* add this line */
color: #FFF;
}
I recommend using this chrome extension for "playing" with CSS changes