I am sending emails by phpmailer and I need to add an external font. I tried 2 ways to add it and no one is working.
1) I tried to use <link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'><meta charset="UTF-8"> in header of my mail. When I read source of email in my Gmail it is something like this:
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'><meta charset="UTF-8">
</head>
<body style="background-color: #232227;">
<div id="content" style="width: 600px; background-color: white; margin: 0 auto; padding-bottom: 20px; border-radius: 5px;margin-top: 50px;">
<div id="photo" style="width: 600px; height: 300px; background-image: url('https://mywebsite.com/pic/mail.jpg'); background-size: 100% 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;"></div>
<div id="temat" style=style="width: 600px; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 30px; text-align: center; margin-top: 20px; margin-bottom: 10px;">Hello<span style="color: #1274FF; font-size: 30px;">!</span></div>
<div id="tresc" style="width: 500px; margin: 0 auto; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 16px; text-align: justify;">content</div>
<div id="button" style="width: 240px; height: 45px; line-height: 45px; text-decoration: none; margin: 0 auto; background-color: #1274FF; cursor: pointer; font-family: 'Titillium Web', sans-serif; color: white; font-size: 22px; text-align: center; margin-top: 30px; margin-bottom: 30px; border-radius: 5px;">Activate</div>
</div>
</body>
</html>
So looks good but still don't work.
2) I used font-face and effect is same:
<html>
<head>
<style>#font-face{
font-family: 'Titillium Web';
src: url(https://mywebsite.com/font.ttf);}
</style><meta charset="UTF-8">
</head>
<body style="background-color: #232227;">
<div id="content" style="width: 600px; background-color: white; margin: 0 auto; padding-bottom: 20px; border-radius: 5px;margin-top: 50px;">
<div id="photo" style="width: 600px; height: 300px; background-image: url('https://mywebsite.com/pic/mail.jpg'); background-size: 100% 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;"></div>
<div id="temat" style=style="width: 600px; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 30px; text-align: center; margin-top: 20px; margin-bottom: 10px;">Hello<span style="color: #1274FF; font-size: 30px;">!</span></div>
<div id="tresc" style="width: 500px; margin: 0 auto; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 16px; text-align: justify;">content</div>
<div id="button" style="width: 240px; height: 45px; line-height: 45px; text-decoration: none; margin: 0 auto; background-color: #1274FF; cursor: pointer; font-family: 'Titillium Web', sans-serif; color: white; font-size: 22px; text-align: center; margin-top: 30px; margin-bottom: 30px; border-radius: 5px;">Activate</div>
</div>
</body>
</html>
Apparently this is possible, but email client compatibility is hazy. Additionally, this is a large resource for something like an HTML newsletter (as opposed to a web page, where you can control rendering and loading).
If you really wish to do this, see here for some good information on the subject:
https://www.campaignmonitor.com/dev-resources/will-it-work/webfonts/
Related
The position of the portfolio page is well positioned but I think I don't use correctly propriety margin-left, I think that I have to use another propriety?
Then, my second problem is that my languages page is too far from my portfolio page, I would like to fix to 50 px. But I cannot do because I am stuck with my first problem.
Thank you for help.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
}
<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="page-left">Languages</div>
</div>
</header>
</body>
You should create a new selector for your code for the second question:
View the result in full screen for actual margin-left working.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
border:1px solid black;
}
.Languages{
display: inline-block;
margin-left: 30px;
border:1px solid red;
}
<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="Languages">Languages</div>
</div>
</header>
</body>
Just add margin-left: 430px; to the header-block div
You can use "flex" it's help you
In different screen sizes It will help arrange the right proportions
Try.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
display: flex;
}
.page-first{
display: inline-block;
margin-left: 430px;
}
.page-second{
margin-left: 50px;
}
<body>
<header>
<div class="header-block">
<div class="page-first">Portfolio</div>
<div class="page-second">Languages</div>
</div>
</header>
</body>
Example.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a piece of code that isn't working on Windows/Android but works fine on OSX and Linux. I know it has something to do with the CSS, but I can't figure out the issue. All the data in the select boxes don't display in the box. Both images below have the same values chosen.
Windows
OSX
Here is my code:
CSS
input::placeholder {
color: dodgerblue;
}
.filter-form {
font-size: .75em;
}
.filter-form select {
color: dodgerblue;
border-radius: 0;
margin: 0px;
padding: 15px;
display: block;
height: 35px;
width: 100%;
border: 1px solid dodgerblue;
font-family: "PT Sans", "Helvetica", sans-serif;
font-weight: bold;
}
.filter-form input {
color: dodgerblue;
border-radius: 0;
margin: 0px;
padding: 15px;
display: block;
height: 35px;
width: 100%;
border: 1px solid dodgerblue;
font-weight: bold;
font-family: "PT Sans", "Helvetica", sans-serif;
}
And the code from the page:
<div class="product-filter">
<h3>Filter By:</h3>
<div class="sort">
<div class="collection-sort filter-form">
<form method="get">
{{ filter.form.as_p }}
<button class="btn-a btn-a_size_small btn-a_color_theme" type="submit"
style="margin:10px 0;">Filter Results
</button>
</form>
</div>
</div>
</div>
so, I'm new to this and I'm working on a basic redirect Tumblr theme [not important] but I have a banner which is a div box and I want to fit into an image as it would if I was using overflow:hidden. the only problem is, that command isn't working. Part of the code had to be copied and pasted, and I think something within the c/p'ed css is keeping that from working. Also, sorry in advance if my code is written terribly, again I'm new at this.
The white background/banner that says 'this blog has moved' is what I'm trying to hide so it doesn't overlap the border.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</HEAD>
<STYLE>
body {background-color: #dff2f4;}
img {
height: 500px;
width: 710px;
margin-top: 100px;
margin-left: 355px;
border-width: 15px;
border-radius: 50px;
border-style: double;
border-color: white;
overflow: hidden;
background-color: #cbdaff;
}
.centered {
font-family: 'SourceSansPro-ExtraLight';
transform: translate(-50%, -50%);
background-color: white;
text-align: center;
position: absolute;
color: #dadada;
top: 50%;
left: 50.7%;
width: 750px ;
font-size: 30px;
letter-spacing: 10px;
overflow: hidden;
padding: 7px 7px 7px 7px;
}
#font-face {
font-family: 'SourceSansPro-ExtraLight.ttf';
src: url('fonts/SourceSansPro-ExtraLight.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</STYLE>
<BODY>
<div class="banner">
<div class="centered">THIS BLOG HAS MOVED</div>
<img src="https://66.media.tumblr.com/0ec32bfc5aeafd4db56b123737224ef8/tumblr_pn6qcyuFhy1xiq9t5o2_r1_540.gif">
</div>
</BODY>
</HTML>
Is this?
body {background-color: #dff2f4;}
.img {
background: url("https://66.media.tumblr.com/0ec32bfc5aeafd4db56b123737224ef8/tumblr_pn6qcyuFhy1xiq9t5o2_r1_540.gif");
height: 500px;
width: 710px;
margin-top: 100px;
margin-left: 355px;
border-width: 15px;
border-radius: 50px;
border-style: double;
border-color: white;
overflow: hidden;
background-color: #cbdaff;
}
.centered {
font-family: 'SourceSansPro-ExtraLight';
transform: translate(-50%, -50%);
background-color: white;
text-align: center;
color: #dadada;
margin-top: 50%;
width: 750px ;
font-size: 30px;
letter-spacing: 10px;
padding: 7px 7px 7px 7px;
}
#font-face {
font-family: 'SourceSansPro-ExtraLight.ttf';
src: url('fonts/SourceSansPro-ExtraLight.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="banner">
<div class="img">
<div class="centered">THIS BLOG HAS MOVED</div>
</div>
</div>
I just started learning HTML5 in congruence with CSS, and I am trying to make my own resume (exercise from Codecademy). My issue is with the subheading divs I am planning to make, where I am trying to place a black line underneath the subheading text. There is large gap in between the line and text, however.
#header {
margin-top: -3.5px;
background-color: #C3CDD4;
height: 90px;
width: 98.5%;
position: relative;
}
#name {
font-family:Verdana, Geneva, sans-serif;
font-size: 40px;
float: left;
margin-left: 20px;
margin-top: 20px;
/*padding bottom: 50px;*/
}
#address {
font-family: Verdana, Geneva, sans-serif;
float:right;
margin-top: 25px;
margin-right: 60px;
}
#contact {
font-family: Verdana, Geneva, sans-serif;
float: right;
clear: left;
margin-top:-60px;
margin-right: 20px;
}
.subheader {
position: relative;
height: 100px;
margin-left: 20px;
margin-top: -2.5px;
font-size: 20px;
font-family: Verdana;
border-bottom: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
<p id="name"> Vincent William Barker </p>
<p id="address">67294 Washington Way</p>
<p id="contact">999.999.9999 · vwbarker#gmail.com</p>
</div>
<div class="subheader">
<h4 class="subheader_title">Education</h4>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
If you want the sides of your div to be straight, remove the property border-radius: 5px;. The space between your line and the subheader was due to this property - height: 100px; in your .subheader div. Remove that property and your problem will be fixed. To make it closer to the subheader, you will have to delete its border bottom property. After that, make a new div and look at its properties below.
#header {
margin-top: -3.5px;
background-color: #C3CDD4;
height: 90px;
width: 98.5%;
position: relative;
}
#name {
font-family: Verdana, Geneva, sans-serif;
font-size: 40px;
float: left;
margin-left: 20px;
margin-top: 20px;
/*padding bottom: 50px;*/
}
#address {
font-family: Verdana, Geneva, sans-serif;
float: right;
margin-top: 25px;
margin-right: 60px;
}
#contact {
font-family: Verdana, Geneva, sans-serif;
float: right;
clear: left;
margin-top: -60px;
margin-right: 20px;
}
.subheader {
position: relative;
margin-left: 20px;
margin-top: -2.5px;
font-size: 20px;
font-family: Verdana;
}
.line {
margin-top: -20px;
height: 1px;
width: 100%;
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title></title>
</head>
<body>
<div id="header">
<p id="name">Vincent William Barker</p>
<p id="address">67294 Washington Way</p>
<p id="contact">999.999.9999 · vwbarker#gmail.com</p>
</div>
<div class="subheader">
<h4 class="subheader_title">Education</h4>
</div>
<div class="line">
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
please can someone help with my website reponsiveness, at the moment when the viewport shrinks the website messes up and i dont know what i have done in the code to make it like that.
thanks in advance!
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
margin-left: 10vw;
width: 79.4vw;
height: 80vw;
max-width: 1000vw;
position: absolute;
overflow: hidden;
margin-top: 0px;
font-size: 1.6vw;
padding: 5px 5px;
}
.webheadimg {
margin-left: 10vw;
width: 80vw;
max-width: 1000vw;
max-height: 150vh;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
overflow: hidden;
}
#menu {
width: 80vw;
font-size: 1vw;
max-font-size: 1.6vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-color: #FFFFFF;
font-size: 1vw;
max-font-size: 1.6vw;
text-align: center;
margin-left: 10vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 1000vw;
}
#menu ul {
height: auto;
padding: 0.8vw 0px;
margin: 0px;
}
#menu li {
display: inline;
font-size: 1vw;
max-font-size: 16vw;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.8vw 0.8vw 0.8vw 0.8vw;
font-size: 1.5vw;
max-font-size: 16px;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position: absolute;
overflow: hidden;
margin-left: 10vw;
float: left;
height: auto;
width: 5%;
padding: 5px 5px;
}
#media (max-width: 1285px) {
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
width: 72.8vw;
height: 100vw;
overflow: hidden;
font-size: 3vw;
margin-left: 23.4vw;
padding: 5px 5px;
bottom: 48.9vw;
position: relative;
}
.webheadimg {
width: 96vw;
height: auto;
max-width: auto;
max-height: auto;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
margin-left: 1vw;
}
#menu {
width: 21.4vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 1vw;
text-align: left;
margin-left: 1vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 96vw;
}
#menu ul {
height: auto;
padding: 0.5vw 0vw;
margin: 0px;
}
#menu li {
display: block;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.5vw 0.5vw 0.5vw 0.5vw;
font-size: 3vw;
display: block;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position: absolute;
overflow: hidden;
margin-left: 1vw;
float: left;
height: auto;
width: 10%;
padding: 5px 5px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Hull Daily News</title>
</head>
<<body>
<div>
<img class="webheadlogo" src="logo1.png" alt=".logo">
<img class="webheadimg" src="Webhead.jpg" alt=".Webhead" />
</div>
<div id="menu">
<ul>
<li>Home
<li>Breaking News
</li>
<li>Sport
</li>
<li>Hull Today
</li>
<li>Property
</li>
<li>Social Media
</li>
<li>Music
</li>
<li>Reviews
</li>
<li>Movies
</li>
<li>Weather
</li>
</ul>
</div>
<div class="body1">
Text Box
</div>
</body>
as you can see the 'text box' jumps around the screen and there is a random grey box at the bottom of the page, i would be so grateful if someone could find me a fix for this
example
You need add
<head>
...
<meta name="viewport" content="width=device-width"/>
...
</head>
You are missing viewport in <head> tag. You can use this for example:
<meta name="viewport" content="width=device-width"/>