when I am sending an email via PHP mail functon (I put this html code in one line and add it to the message), lets say this what I want to send:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.box h3{
text-align:right;
position:relative;
direction: rtl;
}
.box {
width:70%;
top:80px;
height:200px;
background: whitesmoke;
margin:40px auto;
text-align:right;
direction: rtl;
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<div class="box effect2">
<b>שלום,</b>
<p>
אנא לחץ על הקישור המצורף ע"מ לאשר את התחברותך לאתרץ
</p>
<p>
הלינק הוא:
</p>
<b>
תודה מראש,
</b>
<p><b>
צוות האתר
</b></p>
</div>
</body>
</html>
I want to send it via php. When I send this email I am getting the email with it tags and not styled as I wanted.
Thanks
email clients don't support css..
You have to right inline styles..
HTML emails that appear to the receiver as you intended them to appear are not simple. They are more like late '90s html. Styles should be inlined, and you should use tables for layout. Backgrounds don't work reliably on many clients, and for sure you test on a variety of clients because html will vary WILDLY between various clients.
Bonus: forget about javascript / jQuery and the like....
Also, don't count on being able to display CSS3 and html5 elements etc. MANY clients have no support. Outlook doesn't even support margins very well, let alone all the css we have gotten used to. So keep it very simple, use tables for layout, test widely and don't think you will even get close to pixel-perfect.....
here is some help on universally supported html/css
As you have the CSS and HTML already, you can make use of this website to convert the CSS style into inline CSS style for HTML emails.
http://inlinestyler.torchboxapps.com/
Email client doesn't support CSS. So try to write inline CSS as below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="margin:0;padding:0;border=0;font-size:14px;font-family:YOUR_FONT_FAMILY_NAME">
<div style="position:relative;">
<h3 style="text-align:right;position:relative;direction:rtl;">This is heading 3</h3>
<b>שלום,</b>
<p>אנא לחץ על הקישור המצורף ע"מ לאשר את התחברותך לאתרץ</p>
<p>הלינק הוא:</p>
<b>תודה מראש,</b>
<p><b>צוות האתר</b></p>
</div>
</body>
</html>
Related
I have two nearly identical web pages. In fact, I copied the code for the first and saved it as the 2nd before just modifying some of the elements in the 2nd. The styles in the style tag were left exactly the same. They are displaying different font-sizes, and I haven't the foggiest idea why.
Without getting off on tangents about what I should be doing (e.g. using a stylesheet) or nitpicking my code (unless it actually answers the question), can someone please explain why I'm getting two different styles using identical style tags?
P.S. - I know I can fiddle and get them both to have the same style, but it drives me crazy not knowing why this is happening. Believe me, I would have already had them looking the same by now if it weren't for my obsessive desire to understand things I don't understand.
P.S.S. - Adding a meta tag for the viewport, as suggested in an answer to this question, did not work for me.
---DETAILS---
options.php, the desired style, looks like this in mobile Chrome on an LG phone...the screenshots below are from Opera (Chrome) DevTools with device toolbar toggled on with Galaxy S5 being emulated. (These screenshots are exactly what I am seeing on my real device, the LG phone):
admin.php, has noticeably smaller font-sizes. It's hard to see in these screenshots, but the img at the top stays exactly the same size. Also, notice that both screenshots are the same width:
Code for options.php (php renders it):
$admin_str = "<div class=\"a-div\">Admin Options</div>";
$body = "
<div id=\"hero-img\">
<img src=\"imgs/logo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">What would you like to do next?</h2>
<div class=\"a-div\">Record------</div>
<div class=\"a-div\">Manage -----</div>
<div class=\"a-div\">Manage my account information</div>
<div class=\"a-div\">Add a ----</div>
$admin_str
<div class=\"a-div\">Log out</div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>------- Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
Code for admin.php (php also renders it):
$body = "
<div id=\"hero-img\">
<img src=\"imgs/dtlogo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">Administrative Options</h2>
<div class=\"a-div\">Add a new approved email</div>
<div class=\"a-div\">Back to main options</div>
<div class=\"a-div\">Log out</div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>Administrative Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
UPDATE --Per the request by Donkey Shame, here are the computed font-sizes:
_______________________________
|______| 1st pg. | 2nd pg. |
|______|___________|___________|
| h1 | 40.133px | 32px |
|______|___________|___________|
| h2 | 36.133px | 24px |
|______|___________|___________|
| a | 38.133px | 28px |
|______|___________|___________|
UPDATE #2 --As Dejan suggested, I tried viewing the two sites in desktop mode, and they are the same even when they are not the same when viewed on mobile.
UPDATE #3 --After some tinkering, I got the two pages to have the same style when viewed on mobile. Of course, I never doubted I'd do that, and it still doesn't answer my original question regarding the original code, but it actually might have helped me to narrow it down to a very specific culprit. Here's what I did. I removed the font-size altogether from body. Then I changed the h1 and h2 both to divs. I edited the style tag to reflect those new divs. Then I set font-size: 5vw for the #heading div (the old h1). I set font-size: 3.022727vw (more on that 3.022727 later) for the #subheading div (the old h2). I set font-size: 3.5vw for the a elements. Here's where it gets strange again: If I change the 3.022727vw to 3.022726vw in both style tags, the 1st page has virtually no change (which is what should be expected), but the 2nd page does this (note how the #subheading changes the font-size of the a tags also):
admin.php - #subheading { font-size: 3.022727vw; }
admin.php - #subheading { font-size: 3.022726vw; }
It seems like a user-agent scaling issue. The solution to avoid such problems is to add viewport meta tag inside the <head> section (is it necessary?):
<meta name="viewport" content="width=device-width, initial-scale=1">
Without viewport tag:
Both pages with viewport tag:
I believe the issue is in applying body font-size as 100%. There're two ways of solving the issue: replace font-size: 100%; with font-size: 1rem; or with font-size: 16px; Bootstrap for example uses font-size: 1rem;.
If it doesn't help open Devtools of your browser, open a page with smaller font-size and inspect font sizes of and texts. It might be overwritten by some additional styles.
<style>
body {
font-family: sans-serif;
font-size: 1rem;
}
I created pdf with wkhtml2pdf with Arial font, while generate on local does not matter. But at the time of generating in online, font changed to be Times New Roman.
Code CSS
.div1 {
font-family: Arial;
font-size: 10px;
padding-left: 5px;
padding-top: 0px;
}
Try this
.div1 {
font-family: Arial!important;
font-size: 10px;
padding-left: 5px;
padding-top: 0px;
}
Hope it will help.
kind late, but i use this and works fine...
<head>
<meta charset="UTF-8">
<style>
body{
font-family:Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hi!</h1>
</body>
the key is in meta charset inside the head tag
I'm trying to set up a universal navigation bar. I'm using include to import menu.php into index.php. When I do, it works fine; however, when I add something after the menu.php include, the menu's CSS rules carries on.
index.php
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Home | Website</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
menu.php
<head>
<title>Menu | Website</title>
<style>
// menu-only styles...
</style>
</head>
<body>
Home
</body>
<?php return; ?>
You're essentially including an HTML page within an HTML page doing it your way.
To get your CSS to target only your menu, keep it in your style.css file, but make your div have a "menu" class.
Something like this should do what you're looking for, I believe.
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
style.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
.menu {
/* padding: top&&bottom left&&right; */
padding:10px 0;
background-color: #7786ff;
text-align: center;
}
.menu a {
/* merge transitions into one line to make both functional */
transition: background-color .25s ease-in-out, padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
/* padding:top right bottom left */
padding:10px 10px 5px 10px;
}
.menu a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
menu.php
<div class="menu">
Home
</div>
This is not a PHP issue
Your CSS in menu.php comes later in the DOM than your actual stylesheet and therefore is being overwritten. Either scope your menu.php styles with some containing element or put your menu CSS code earlier in the DOM (like before style.css)
You are almost a bit closer to what you code. A HTML page can have only one html,head,title,body tag.
Just remove these html,head,title,body tags from menu.php
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test
</body>
</html>
style.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
menu.php
<style>
body {
padding-top: 10px;
padding-bottom: 10px;
background-color: #7786ff;
text-align: center;
}
a {
transition: background-color .25s ease-in-out;
transition: padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
</style>
Home
<?php return; ?>
I'm trying create a template for my control panel
I want make a "Back" button in the template, where I can set your href is set for extended page
So I tried use #yield for set, but not have success
Fallowing my code
// in my template -> layouts.master.blade.php
Back
//my extended page -> user.edit.blade.php
#extends('../layouts.master')
#section('back')
dashboard
#stop
I'm not sure why it's not working for you, but it should. Here's a test I just did on my end. I got a clean Laravel app, renamed home.php to
layout.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel PHP Framework</title>
<style>
#import url(//fonts.googleapis.com/css?family=Lato:700);
body {
margin:0;
font-family:'Lato', sans-serif;
text-align:center;
color: #999;
}
.welcome {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
}
a, a:visited {
text-decoration:none;
}
h1 {
font-size: 32px;
margin: 16px 0 0 0;
}
</style>
</head>
<body>
<div class="welcome">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAACHCAYAAAA850oKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyNUVCMTdGOUJBNkExMUUyOTY3MkMyQjZGOTYyREVGMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyNUVCMTdGQUJBNkExMUUyOTY3MkMyQjZGOTYyREVGMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI1RUIxN0Y3QkE2QTExRTI5NjcyQzJCNkY5NjJERUYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI1RUIxN0Y4QkE2QTExRTI5NjcyQzJCNkY5NjJERUYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+g6J7EAAAEL1JREFUeNrsXQmU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" alt="Laravel PHP Framework">
<h1>#yield('youhave')</h1>
</div>
</body>
</html>
As you can see I'm using two different yields, wich you'll see in the new
home.blade.php
#extends('layout')
#section('youhave')
You have arrived.
#stop
#section('laraveldotcom')
http://laravel.com
#stop
And it worked fine for me, I could even click the Laravel logo to be redirected to the Laravel site. So you might have a problem somewhere else.
I was following this tutorial to learn about the include and include_once functions in PHP.
The following files work just fine:
index.php:-
<?php
include_once 'header.php';
echo 'variable';
header.php:-
<h1>My Page's Header</h1>
But when I try to include the following .php file into my index.php, it does not produce the desired result. The header rather overlaps and thus completely hides the 'variable'
What I want is that after I include the header from an external file, My page should start underneath the header. The header included from external file should not be considered included in my page, so none of the elements are overlapped or such. How can I achieve that?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top-bar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding: 5px;
}
.logo {
display: inline-block;
vertical-align: top;
color: white;
}
</style>
</head>
<body>
<div class="top-bar">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" alt="Logo" class="logo" >
</div>
</body>
</html>
<?php
include_once 'header.php';
?>
<div id="parent_div" >
<script>
function getHeaderHeight() {
return document.getElementById("top-bar").height(); //top-bar is in header.php
}
document.getElementById("parent_div").style.padding-top="getHeaderHeight()";
</script>
<h1>Heading</h1>
</div>
That's because your header is set to position: fixed;. It is taken out of the document flow and will follow you as you scroll arround.
When you want it to not stick to the client top, change your css to this:
.top-bar {
position: relative;
background: #000029;
padding: 5px;
}
If you like your header to be fixed, you may also set a padding to the body of the document, that equals the height of your header.
Here you see your current problem: http://jsfiddle.net/Lc3W8/
Solution 1: http://jsfiddle.net/Lc3W8/1/
body
{
margin:0;
padding:0;
height: 3000px;
/*new:*/
padding-top: 30px;
}
.top-bar
{
position: fixed;
left:0;
right:0;
top:0;
height: 30px;
background-color: blue;
}
Solution two: http://jsfiddle.net/Lc3W8/2/
body
{
margin:0;
padding:0;
height: 3000px;
}
.top-bar
{
height: 30px;
background-color: blue;
}