HTML5 Infographic Email Template Source Code Issue

HTML5 Infographic Email Template Source Code Issue - php

i have been searching on net to get an infographic email template to send email using PHP. Can we have functionalities like moving HTML content within the Email body or like popups within the email body on click event. Basically show and hide of HTML content will do.
Any sites or URLs which have achieved this can be very helpful for me to go forward with this development.
See the sample code below: (But the style gets removed in Gmail :( )
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- This code is part of a tutorial from Email on Acid: https://www.emailonacid.com/blog/article/email-development/build-an-interactive-carousel-for-email -->
<title>Interactive Carousel</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
#media only screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1), (max-width: 480px), (max-device-width: 480px) {
.slide1-content,
.slide2-content,
.slide3-content {
display: block;position: absolute;top: 0px;left: 0px;width: 600px;height: 520px;background-color: #FFFFFF;
}
}
#media only screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1) {
.slide1-content {left: 0px;}
.slide1:hover { background-color: #37B330;}
#slide-1:checked ~ .slide1 {background-color: #37B330 !important;}
#slide-1:checked + span + table .swoosh { left: 0px !important; }
.slide2 { top: 66px; left: 321px; }
.slide2-content { left: 600px; }
.slide2:hover { background-color: #37B330;}
#slide-2:checked ~ .slide2 {background-color: #37B330 !important;}
#slide-2:checked + span + table .swoosh { left: -600px !important; }
.slide3 { top: 122px; left: 321px; }
.slide3-content { left: 1200px; }
.slide3:hover { background-color: #37B330;}
#slide-3:checked ~ .slide3 {background-color: #37B330 !important;}
#slide-3:checked + span + table .swoosh { left: -1200px !important; }
}
</style>
</head>
<body style="background-color:#6c6c6c;margin: 0px;padding: 0px;" bgcolor="#6c6c6c">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#6c6c6c" style="width: 100% !important; table-layout:fixed;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" align="center" style="border-collapse: collapse;">
<div class="wrapper" style="min-width: 640px;">
<table id="CarouselWrapper" width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="shrink" style="width:600px; margin:0 auto;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 415px !important;height: 895px !important;position: relative;display: block;overflow: hidden;">
<tr>
<td style="border-collapse: collapse;">
<table class="CarouselMain" width="600" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 600px !important;height: 1400px !important;">
<tr>
<td valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<form action ="foo">
<input class="yahoo" type="radio" name="action" checked="checked" id="slide-1" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<input class="yahoo" type="radio" name="action" id="slide-2" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<input class="yahoo" type="radio" name="action" id="slide-3" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
</form>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="border-collapse: collapse;">
<table class="swoosh" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;position: relative;transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;">
<tr>
<td class="slide1-content" style="border-collapse: collapse;display: block;position: absolute;top: 0px;left: 0px;width: 600px;height: 520px;background-color: #FFFFFF">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image3.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
<tr>
<td class="slide2-content" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image2.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
<tr>
<td class="slide3-content" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image4.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<label class="button slide3" for="slide-3" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;">
<span class="hide" style="color:#ffffff;">Three</span>
</label>
</td>
</tr>
</table>
<label class="button slide2" for="slide-2" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;">
<span class="hide" style="color:#ffffff;">Two</span>
</label>
</td>
</tr>
</table>
<label class="button slide1" for="slide-1" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;top: 10px; left: 321px;">
<span class="hide" style="color:#ffffff;">One</span>
</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
NB:
Is it possible to add dynamic moving content ie show and hide div elements within the Email body.

it's not possible to send scripts per Mail because of security issues. Also many of the major Mail Clients, like you noticed in Gmail, dont't support most of the simplest Html and Css.
Css animation works in some Clients, in others work gifs, but scripts wont work in any. Maybe you can design a workaround using this Recource. Css animation are complicated to design, pretty annoying to build, but can hide elements or move them around, if supported by the client.
Also you could have the button, that would start the animation, link to a webpage, where the animation will be. But in my expirience, this gives a terrible Usebility.
If most of your audience uses Outlook, its not worth to create something with Animations at all since Outlook doesn't support any of this.
Hope this was helpful!

Related

how to $_POST form attributes to another file

This is the thank you page I am trying to have someones name be displayed like "Thank you John, ..."
But i can't seem to have it post the name. my $first_name is in another php file
<?php include("email.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<base target="_blank">
<title>Mid-Night Designs</title>
<style type="text/css">
body *{font-family: 'Open Sans', Arial, sans-serif !important}
div, p, a, li, td { -webkit-text-size-adjust:none; }
*{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
td{word-break: break-word;}
a{word-break: break-word; text-decoration: none; color: inherit;}
body .ReadMsgBody
{width: 100%; background-color: #ffffff;}
body .ExternalClass
{width: 100%; background-color: #ffffff;}
body{width: 100%; height: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;}
html{ background-color:#ffffff; width: 100%;}
body p {padding: 0!important; margin-top: 0!important; margin-right: 0!important; margin-bottom: 0!important; margin-left: 0!important; }
body img {user-drag: none; -moz-user-select: none; -webkit-user-drag: none;}
body a.rotator img {-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; }
body a.rotator img:hover {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg); }
body .hover:hover {opacity:0.85;filter:alpha(opacity=85);}
body .jump:hover {opacity:0.75; filter:alpha(opacity=75); padding-top: 10px!important;}
body .logo img {width: 150px; height: auto;}
body .icon25 img {width: 25px; height: auto;}
body .icon18 img {width: 18px; height: auto;}
</style>
<style type="text/css">#media only screen and (max-width: 640px){
body body{width:auto!important;}
body table[class=full] {width: 100%!important; clear: both; }
body table[class=mobile] {width: 100%!important; padding-left: 30px; padding-right: 30px; clear: both; }
body table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body .erase {display: none;}
body .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
body td[class=pad20] {padding-left: 20px!important; padding-right: 20px!important; text-align: center!important; clear: both; }
}</style>
<style type="text/css">#media only screen and (max-width: 479px){
body body{width:auto!important;}
body table[class=full] {width: 100%!important; clear: both; }
body table[class=mobile] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
body table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body .erase {display: none;}
body .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
body td[class=pad20] {padding-left: 20px!important; padding-right: 20px!important; text-align: center!important; clear: both; }
}</style>
</head>
<body style='margin: 0; padding: 0;'>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center">
<table class="full" align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center" class="pad20">
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td width="100%" height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" width="100%" style="font-family: Helvetica, Arial, sans-serif, 'Open Sans'; color: #929292; font-weight: 400; font-size: 12px; line-height: 20px; text-align: center;">
<br>
</td>
</tr>
<tr>
<td width="100%" height="40" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" align="center" width="100%" class="logo" style="line-height: 1px; text-align: center;"></td>
</tr>
<tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; border-top-left-radius: 5px; border-top-right-radius: 5px;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tbody><tr>
<td align="center" class="pad20">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" width="100%" style="font-family: Helvetica, Arial, sans-serif, 'Open Sans'; color: #111111; font-weight: 800; font-size: 30px; line-height: 36px; text-align: center; text-transform: uppercase;">
Thank you!
</td>
</tr>
<tr>
<td width="100%" height="20" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 14px; text-align: center; line-height: 22px;" class="fullCenter">
<span style="color:#000000;"><span style="font-size:14px;"><strong>Thank you<?php echo $_POST['first_name'];?>
, for using our quote calculator. If you have any further questions feel free to contact us!</strong></span></span>
</td>
</tr>
<tr>
<td width="100%" height="20" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td align="center" class="pad20">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td valign="top" width="100%">
<table width="75" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
<tbody><tr>
<td valign="middle" align="center" width="30" class="fullCenter" style="line-height: 1px;"></td>
</tr>
</tbody></table>
<table width="15" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
<tbody><tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
<table width="350" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
<tbody><tr>
<td width="100%" style="color: #111111; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 700; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
Lorenzo Preciado
</td>
</tr>
<tr>
<td width="100%" style="color: #61b94d; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 600; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px text-transform: uppercase;" class="fullCenter">
<span style="color:#000000;">Web Designer & Developer </span>
</td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
Owner of Mid-Night Designs
</td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
+81 080-6499-4974 | help#mid-nightdesigns.com
</td>
</tr>
<tr>
<td width="100%" height="5" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" align="center" class="icon18">
<!-- Social Icons -->
<table width="120" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="buttonScale">
<tbody><tr>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td width="100%" valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile">
<tbody><tr>
<td align="center">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align: center;" class="fullCenter">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" style="color: #d2d2d2; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 12px; text-align: center; line-height: 24px;" class="fullCenter">
© Copyright - Mid-Nightd<span style="color:#FFFFFF;"></span>esigns.com
</td>
</tr>
<tr>
<td width="100%" style="color: #61b94d; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 12px; text-align: center; line-height: 24px;" class="fullCenter">
<br>
</td>
</tr>
<tr>
<td width="100%" height="50" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" height="1" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
This is the portion of the form
<label>
First Name
<input NAME="first_name" type="text" required="required" class="SV_validate" placeholder="First Name">
</label>
This is part of my email.php and it works, displaying the name in the email sent but doesn't work in the thank you.
$first_name = $_POST['first_name'];

PHP File that receives POST will be somewthing along the lines of
<?php
session_start();
$_SESSION['Name'] = $_POST['first_name'];
?>
Second File will be
<?php
session_start();
echo $_SESSION['Name'];
?>
Not recommended to do exactly that but that's the basis. You also can't set a session on the same page and call it on the same page.

Please check the simple scenario created for you, change the form action to thank-you.php file.
index.php
<form action="thank-you.php" method="post">
<input type="text" name="firstname">
<input type="text" name="email">
<input type="submit" name="contact" value="Contact">
</form>
thank-you.php
<?php
include_once('email.php');
$firstname = '';
if(isset($_POST['firstname'])) {
$firstname = $_POST['firstname'];
}
?>
<div class="message">Thank you for contacting - <?php echo $firstname;?></div>
email.php
<?php
if(isset($_POST['contact'])) {
$to = 'email#example.com';
$subject = 'Contact';
$message = 'Message';
if(mail($to,$subject,$message)) {
echo "mail sent";
}
}
?>

change Image In Responsive?

I have created web site, it's non responsive site. I want change my site to fully responsive site.
When I resize my browser for checking responsiveness it's showing like this
Not showing top picture? How will I change image to responsive?
<?php
session_start();
require_once("conf.php");
$section = $_REQUEST['section'];
$logout = $_REQUEST['logout'];
$buttombanner="<img src=\"images/buttombanner.gif\" />";
?>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<title>LMS</title>
<link rel="stylesheet" href="style/style.css" type="text/css"/>
<link rel="stylesheet" href="style1.css" type="text/css" />
<style type="text/css">
#media only screen and (max-width : 780px)
{
.leftborder
{
background-color:skyblue;
}
.rightborder {
border-right: 1px solid #000000;
}
.leftborder {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-style: thin;
width:800px;
height:600px;
}
.style2 {font-size: xx-small}
.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
}
BODY { font-family: Arial, Helvetica, sans-serif;
line-height:160%;
font-size:14px;
color:#000;
background: url(images/gradient2.jpg);
background-repeat: repeat-x;
background-color:#FFF;
}
table[class="leftborder"] {
width: 100% !important;
}
}
.rightborder {
border-right: 1px solid #000000;
}
.leftborder {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
width:800px;
height:600px;
border-style: thin;
}
.style2 {font-size: xx-small}
.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
}
BODY { font-family: Arial, Helvetica, sans-serif;
line-height:160%;
font-size:14px;
color:#000;
background: url(images/gradient2.jpg);
background-repeat: repeat-x;
background-color:#FFF;
}
</style>
<script type="text/javascript">
function openWindow(winName)
{
window.open(winName,"FAQs", "width=950,height=650,resizable=no,scrollbars=no,toolbar=no,status=no,menubar=no,copyhistory=no,left=100,top=100,screenX=100,location=no,screenY=100");
}
</script>
</head>
<link href="style.css" rel="stylesheet" type="text/css">
<body bgcolor="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
<tr bgcolor="#FFFFFF">
<!--- image code--->
<td colspan="2" style="background-image:url('site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right">
<?php
if(!is_null($sid)&&$session_error=="none")
{
$_SESSION['lms_username']=$lms_username;
?>
<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="190" >
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000">Logged in as: <B><?php echo $lms_username; ?></B></TD>
</TR>
<?php
if($lms_groups=="on" && $lms_user_group!=""){
?>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo"$lms_gtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_group</B>";}?></TD>
</TR>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo "$lms_sgtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_subgroup</B>";}?></TD>
</TR>
<tr>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php if($section=="reports" && $report){echo"<A HREF='index.php?section=reports&sid=$sid'>Back to Detailed Reports Section";}?></FONT></TD>
</tr>
<?php }?>
</TABLE>
<?php
}
?></td>
</tr>
<tr>
<td colspan="2" height="20" background="images/bg.gif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<TD align="right"><?php
if(!is_null($sid)&&$session_error=="none")
{
?><a style="" href="index.php?section=<?php echo $section; ?>&logout=YES&sid=<?php echo $sid; ?>"><img src="images/logout.gif" border="0" align="ABSMIDDLE" alt="Click here to Log Out"></a><?php
}
?></TD>
</tr>
</table></td>
</tr>
<tr>
<?php
if(is_null($sid)||$session_error!="none")
{
$nav_display = 'display: none';
}
?>
<td valign="top" style=" <?php echo $nav_display; ?> ">
<!---------BEGIN SIDE NAV TABLE------------->
<table width="198" border="0" cellspacing="0" cellpadding="0" >
<tr valign="top" bordercolor="#FFFFFF">
<td width="198" bordercolor="#FFFFFF"><?php
if((!is_null($sid)&&$session_error=="none"))
{
include($dir_components."navbar2.php");
}
?></td>
</tr>
<tr><td> </td></tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td class="boxcontent" VALIGN="TOP" >
<?php
include($mysection);
?></td>
</tr>
</table>
</td>
</tr>
</table>
<hr width="200px;">
</body>
</html>

Try using bootstrap in your website and class="img-responsive" in your image tag

You're using background property in css, so you should use CSS3 background-size property.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Try adding background-size: contain; to the td's style attribute and see if that helps. Note that if the containing td is set to a fixed height, you may get some unsightly, dead space.

Edit a full HTML file from PHP using TWIG

I am trying to develop tool for a platform that uses Symfony2. This tool needs to edit the full html file (with his html,head and style tags).
By now, i am passing the whole content of the file from the controller using file_get_contents, it passes the content correctly to the client.
on the PHP contoller:
When loading the page that contains the tool, the server receives a petition to controller, where i return some parameters that TWIG will render on the view. In this case i return a certain id needed for some stuff and a string that contains the whole content of the template file.
$file = file_get_contents($basePath.$this->getTemplate($template_id). '.html.twig');
return array('template_id' => $template_id, 'plantilla' => $file);
on the view:
TWIG uses the '{{ }}' notation to render the parameters returned by the controller on the petition. As I passed a string with a html content, TWIG features a filter that instead of rendering a string, renders the 'raw' data passed, in this case the HTML code.
<div id='plantilla-content'>
{{ plantilla | raw }}
</div>
<script>
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "fullpage",
theme_advanced_buttons3_add : "fullpage"
});
<script>
this is the original mail template content :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Company</title>
<style>
a:hover {
text-decoration: underline;
}
td.promocell p {
color:#FFFFFF;
font-size:16px;
line-height:26px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:14px;
font-weight:normal;
}
td.contentblock h4 {
color:#444444 !important;
font-size:16px;
line-height:24px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:10px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock h4 a {
color:#444444;
text-decoration:none;
}
td.contentblock p {
color:#888888;
font-size:13px;
line-height:19px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#3ca7dd;
text-decoration:none;
}
#media only screen and (max-device-width: 480px) {
div[class="header"] {
font-size: 16px !important;
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
table[class="promotable"], td[class="promocell"] {
width: 325px !important;
}
td[class="footershow"] {
width: 300px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"] {
display: none !important;
}
img[class="divider"] {
height: 1px !important;
}
td[class="logocell"] {
padding-top: 15px !important;
padding-left: 15px !important;
width: 300px !important;
}
img[id="screenshot"] {
width: 325px !important;
height: 127px !important;
}
img[class="galleryimage"] {
width: 53px !important;
height: 53px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
h4[class="secondary"] {
line-height: 22px !important;
margin-bottom: 15px !important;
font-size: 18px !important;
}
}
</style>
</head>
<body bgcolor="#EEEEEE" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4e4e4">
<tr>
<td bgcolor="#EEEEEE" width="100%"><table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="600" class="cell">
<table width="600" cellpadding="10" cellspacing="0" border="0" class="table" bgcolor="#e31818" >
<tr>
<td width="168" class="logocell">
<img src="{{ app.request.getSchemeAndHttpHost() }}/{{ app.request.getBasePath() }}/path/logo.png" alt="Plantilla email" width="168" height="54" style="display: block; -ms-interpolation-mode:bicubic;" /></td>
<td align="center" width="350" class="hide" style="color:#fff;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="middle">
<strong>Some text</strong></td>
</tr>
</table>
<br>
<repeater>
<layout>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#e31818" nowrap width="5"></td>
<td width="100%" bgcolor="#ffffff"><table width="100%" cellpadding="20" cellspacing="0" border="0">
<tr>
<td bgcolor="#ffffff" class="contentblock"><h4 class="secondary"> <strong>
<singleline label="Title"></singleline>
{{ subject }} </strong> </h4>
<multiline label="Description">
<p>{{ translate | raw }}</p>
{% block fos_user_content %}
{% endblock fos_user_content %}
</multiline></td>
</tr>
</table></td>
</tr>
</table>
<br>
</layout>
</repeater></td>
</tr>
</table>
<br>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f2f2f2">
<tr>
<td><br>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tr>
<td width="600" nowrap bgcolor="#f2f2f2" class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td width="380" valign="top" class="footershow"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size: 10px; color: #777;">
<tr>
<td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> Si recibe este correo electrónico por error, por favor, tenga en cuenta que puede contener información confidencial, por lo tanto, el uso de esta información está estrictamente prohibida.
Sírvanse informar al remitente del error y elimine la información recibida.
Gracias por su colaboración. </td>
</tr>
<tr>
<td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> If you receive this e-mail by error, please note that it may contain confidential information,therefore, the use of this information is strictly forbidden.
Please inform the sender of the error and delete the information received.
Thank you for your collaboration. </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td width="600" nowrap class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td align="center" style="color:#a6a6a6;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="top" class="hide"><br>
<p>Company © 2014</p></td>
</tr>
</table></td>
</tr>
</table>
<br></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
And this, is what TWIG is actually rendering. As you see, it does not match the original content that i want to edit. I am trying to use TinyMCE to edit the whole file but is not working properly, the CSS is not being loaded properly and some tags are being omited.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Company</title>
<style>
a:hover {
text-decoration: underline;
}
td.promocell p {
color:#FFFFFF;
font-size:16px;
line-height:26px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:14px;
font-weight:normal;
}
td.contentblock h4 {
color:#444444 !important;
font-size:16px;
line-height:24px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:10px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock h4 a {
color:#444444;
text-decoration:none;
}
td.contentblock p {
color:#888888;
font-size:13px;
line-height:19px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#3ca7dd;
text-decoration:none;
}
#media only screen and (max-device-width: 480px) {
div[class="header"] {
font-size: 16px !important;
}
table[class="table"], td[class="cell"] {
width: 300px !important;
}
table[class="promotable"], td[class="promocell"] {
width: 325px !important;
}
td[class="footershow"] {
width: 300px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"] {
display: none !important;
}
img[class="divider"] {
height: 1px !important;
}
td[class="logocell"] {
padding-top: 15px !important;
padding-left: 15px !important;
width: 300px !important;
}
img[id="screenshot"] {
width: 325px !important;
height: 127px !important;
}
img[class="galleryimage"] {
width: 53px !important;
height: 53px !important;
}
p[class="reminder"] {
font-size: 11px !important;
}
h4[class="secondary"] {
line-height: 22px !important;
margin-bottom: 15px !important;
font-size: 18px !important;
}
}
</style>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4e4e4">
<tbody><tr>
<td bgcolor="#EEEEEE" width="100%"><table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tbody><tr>
<td width="600" class="cell">
<table width="600" cellpadding="10" cellspacing="0" border="0" class="table" bgcolor="#e31818">
<tbody><tr>
<td width="168" class="logocell">
<img src="{{ app.request.getSchemeAndHttpHost() }}/{{ app.request.getBasePath() }}/path/logo.png" alt="Plantilla email" width="168" height="54" style="display: block; -ms-interpolation-mode:bicubic;"></td>
<td align="center" width="350" class="hide" style="color:#fff;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="middle">
<strong>company</strong></td>
</tr>
</tbody></table>
<br>
<repeater>
<layout>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td bgcolor="#e31818" nowrap="" width="5"></td>
<td width="100%" bgcolor="#ffffff"><table width="100%" cellpadding="20" cellspacing="0" border="0">
<tbody><tr>
<td bgcolor="#ffffff" class="contentblock"><h4 class="secondary"> <strong>
<singleline label="Title"></singleline>
{{ subject }} </strong> </h4>
<multiline label="Description">
<p>{{ translate | raw }}</p>
{% block fos_user_content %}
{% endblock fos_user_content %}
</multiline></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<br>
</layout>
</repeater></td>
</tr>
</tbody></table>
<br>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f2f2f2">
<tbody><tr>
<td><br>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
<tbody><tr>
<td width="600" nowrap="" bgcolor="#f2f2f2" class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tbody><tr>
<td width="380" valign="top" class="footershow"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size: 10px; color: #777;">
<tbody><tr>
<td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> Si recibe este correo electrónico por error, por favor, tenga en cuenta que puede contener información confidencial, por lo tanto, el uso de esta información está estrictamente prohibida.
Sírvanse informar al remitente del error y elimine la información recibida.
Gracias por su colaboración. </td>
</tr>
<tr>
<td style="padding: 15px 0px 15px 0px; color:#a6a6a6;font-size:10px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"> If you receive this e-mail by error, please note that it may contain confidential information,therefore, the use of this information is strictly forbidden.
Please inform the sender of the error and delete the information received.
Thank you for your collaboration. </td>
</tr>
</tbody></table></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td width="600" nowrap="" class="cell"><table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tbody><tr>
<td align="center" style="color:#a6a6a6;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" valign="top" class="hide"><br>
<p>Company</p></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<br></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
Without the possibility to manipulate the structure/format of the original mail, how could be possible to edit the full content of the file?
Also, taking that the code is received correctly, i want to pass again to a method in the controller to store the changes, maybe using a string with the content. The other problem is that the HTML code contains simple and double quote simbols that interfer with the formation of the string.

change to Responsive Site

i have used on my site Width and height like
<table width="800px" height="600px" border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
i have to changed this code media query for responsive but its not working i set background color red when i re size my browser its showing color only not in resize content
My code:
<style type="text/css">
#media only screen and (min-width: 320px) and (max-width : 780px)
{
.leftborder
{
background-color:skyblue;
}
.rightborder {
border-right: 1px solid #000000;
}
.leftborder {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-style: thin;
}
.style2 {font-size: xx-small}
.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
}
BODY { font-family: Arial, Helvetica, sans-serif;
line-height:160%;
font-size:14px;
color:#000;
background: url(images/gradient2.jpg);
background-repeat: repeat-x;
background-color:#FFF;
}
table.leftborder{
align:"right";
width:800px ! Important;
height:600px ! Important;
}
}
/* MOBILE LANDSCAPE */
#media only screen and (min-width: 480px) and (max-width: 780px)
{
.leftborder {
background-color:blue;
}
}
/* SMALL TABLET */
#media only screen and (min-width: 600px) and (max-width:780px)
{
.leftborder
{
background-color:green;
}
}
/* TABLET/NETBOOK */
#media only screen and (min-width: 768px) and (max-width: 780px)
{
.leftborder
{
background-color:yellow;
}
}
.rightborder {
border-right: 1px solid #000000;
}
.leftborder {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-style: thin;
}
.style2 {font-size: xx-small}
.descriptor_row
{
background:#003366;
font-size:x-small;
color:#FFFFFF;
border:#FFFFFF;
}
BODY { font-family: Arial, Helvetica, sans-serif;
line-height:160%;
font-size:14px;
color:#000;
background: url(images/gradient2.jpg);
background-repeat: repeat-x;
background-color:#FFF;
}
</style>
<script type="text/javascript">
function openWindow(winName)
{
window.open(winName,"FAQs", "width=950,height=650,resizable=no,scrollbars=no,toolbar=no,status=no,menubar=no,copyhistory=no,left=100,top=100,screenX=100,location=no,screenY=100");
}
</script>
</head>
<link href="style.css" rel="stylesheet" type="text/css">
<body bgcolor="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="design"/ >
<tr>
<td align="center">
<table width="800px" height="600px" border="0" cellspacing="0" cellpadding="0" class="leftborder"/>
<tr bgcolor="#FFFFFF">
<td colspan="2" style="background-image:url('site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right" />
<?php
if(!is_null($sid)&&$session_error=="none")
{
$_SESSION['lms_username']=$lms_username;
?><TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="190" >
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000">Logged in as: <B><?php echo $lms_username; ?></B></TD>
</TR>
<?php
if($lms_groups=="on" && $lms_user_group!=""){
?>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo"$lms_gtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_group</B>";}?></TD>
</TR>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo "$lms_sgtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_subgroup</B>";}?></TD>
</TR>
<tr>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php if($section=="reports" && $report){echo"<A HREF='index.php?section=reports&sid=$sid'>Back to Detailed Reports Section";}?></FONT></TD>
</tr>
<?php }?>
</TABLE>
<?php
}
?></td>
</tr>
<tr>
<td colspan="2" height="20" background="images/bg.gif">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<TD align="right"><?php
if(!is_null($sid)&&$session_error=="none")
{
?><a style="" href="index.php?section=<?php echo $section; ?>&logout=YES&sid=<?php echo $sid; ?>"><img src="images/logout.gif" border="0" align="ABSMIDDLE" alt="Click here to Log Out"></a><?php
}
?></TD>
</tr>
</table></td>
</tr>
<tr>
<?php
if(is_null($sid)||$session_error!="none")
{
$nav_display = 'display: none';
}
?>
<td valign="top" style=" <?php echo $nav_display; ?> ">
<!---------BEGIN SIDE NAV TABLE------------->
<table width="198" border="0" cellspacing="0" cellpadding="0" >
<tr valign="top" bordercolor="#FFFFFF">
<td width="198" bordercolor="#FFFFFF"><?php
if((!is_null($sid)&&$session_error=="none"))
{
include($dir_components."navbar2.php");
}
?></td>
</tr>
<tr><td> </td></tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td class="boxcontent" VALIGN="TOP" >
<?php
include($mysection);
?></td>
</tr>
</table>
</td>
</tr>
</table>
<hr width="200;">
</body>
</html>
added image what i am getting ?please help me any advise ?

On your media queries you have just changed the color and how do you supposed to get responsive design. You need to change other properties like width or height to adjust on that respective screen size. Or there are other options for you, like responsive tables plugins or if you want to fix via media queries you need to first decide how you wanna display on specific screen size, options are like scrollable tables or breaking table headings into blocks and columns below and so on then only you go to media queries to adjust as accordingly.

php ul li class and id

I have looked but the answers that people have given didn't help my problem. Rather confusion.
I am creating a small project for my website and i am trying to convert it to php for the pages and easier maint.
The way i want it set up is like how i have it now. Soloentertainment.org But this is all html and each page is it own Html page and if i need to edit or add to the nav bar or anywhere else i have to go to each html and change it. That is a big no no. So trying to convert it to php but the problem i have encountered, which is weird is that i have it highlight what page you are on now. But for the php, Soloentertainment.org/index.php, (i don't have all links working so the projects page and bout leads to the html links) but the home should be highlighted like in the original home page.
Code for the index.php:
<body bgcolor="#000000" id="home">
<div align="center">
<table class="contentTable" >
<tbody>
<tr>
<td colspan="0" border="0" height="50px" align="center">
<?php include("message.php"); ?>
</td>
</tr>
<tr>
<td colspan="0" border="0" height="125px" align="center">
<?php include("header.php"); ?>
</td>
</tr>
<tr>
<?php include("navbar.php"); ?>
</tr>
<?php include("home.php");?>
</tbody>
</table>
</div>
</body>
Code for the Navbar.php:
<td id="navbar">
<ul>
<li onclick="location.href='http://www.soloentertainment.org/index.php';" class="home" title="Home">Home</li>
<li class="projects" title="Projects">Projects</li>
<li class="about" title="About">About</li>
<li>Contact</li>
</ul>
</td>
The original index.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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico">
<title>Solo Entertainment</title>
</head>
<style>
.contentTable {
width: 795px;
border-left: 10px;
border-left-color: #b7ad6f;
border-right: 10px;
border-right-color: #b7ad6f;
margin: 0px;
padding: 0px;
}
.header {
background-color; #000
background-repeat: no-repeat;
background-position: right;
}
#navbar {
width:100%;
height:30px;
background-color:#000;
}
#navbar ul {
width:50%;
margin:0 auto 0 auto;
}
#navbar ul li {
float:left;
color: #FFF;
padding:0 20px 0 20px;
border:1px solid #FFF;
height:30px;
list-style:none;
display:block;
line-height:30px;
text-align:center;
cursor:pointer;
}
#navbar ul li:hover {
background-color:#CCC;
color: #000;
}
#home #menu .home, #projects #menu .projects {
background-color:#FFF;
color: #111
}
</style>
<body bgcolor="#000000" id="home">
<div align="center" id="menu">
<table class="contentTable">
<tbody>
<tr>
<td colspan="2" border="0" height="55px" align="center">
<font color="#FF0000" size="+2">This site is still being built. Please be Patient</font>
</td>
</tr>
<tr>
<td colspan="2" class="header" align="left" border="0" height="125px">
<img src="images/solo.png" width="785" height="112" alt="Title" title="Solo Enertainment" border="0">
</td>
</tr>
<tr>
<td id="navbar">
<ul>
<li onclick="location.href='http://www.soloentertainment.org';" class="home" title="Home">Home</li>
<li onclick="location.href='http://www.soloentertainment.org/projects';" class="projects" title="Projects">Projects</li>
<li onclick="location.href='http://www.soloentertainment.org/about';" class="about" title="About">About</li>
<li>Contact</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" class="header" align="center" border="0" height="100px">
<font color="#FFFFFF" size=""> Welcome to Solo Entertainment, One Man One Show.</font>
</td>
</tr>
<tr>
<td colspan="2" class="header" align="Center" border="0">
<img src="./images/kyleandsteve1280.jpg" width="307" height="245" />
<br />
<font color="#FFFFFF">Kyle and Steve Save the world.
<br />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Now the i don't get why Home is highlighted in the html and not for the php?

Your css that make the highlight looks like this:
#home #menu .home, #projects #menu .projects {
background-color: #FFFFFF;
color: #111111;
}
On your PHP file, the button with .home class is under an element with a #home id but there's no element with #menu id.
This is the part on your HTML:
<body bgcolor="#000000" id="home">
<div align="center" id="menu">
This is the part on your PHP:
<body bgcolor="#000000" id="home">
<div align="center">

We Keep Coding

PHP, A popular general-purpose scripting language that is especially suited to web development.

HTML5 Infographic Email Template Source Code Issue - php

Related

how to $_POST form attributes to another file

change Image In Responsive?

Edit a full HTML file from PHP using TWIG

change to Responsive Site

php ul li class and id

Categories

Resources