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">
Related
I'm converting HTML to PDF and its working fine but the issue is when I generate PDF first page of PDF is blank. All records are set from second page of that PDF.
I'm Using Codeigniter framework.And using below package
#package Html2pdf
* #author Laurent MINGUET <webmaster#html2pdf.fr>
* #copyright 2017 Laurent MINGUET
Below is the code which doing all that.
try {
$html2pdf = new Html2Pdf('P', 'A4', 'fr');
$html2pdf->pdf->SetDisplayMode('fullpage');
$html2pdf->writeHTML($content);
$html2pdf->output($pdfname.'.pdf','D');
} catch (Html2PdfException $e) {
$html2pdf->clean();
$formatter = new ExceptionFormatter($e);
echo $formatter->getHtmlMessage();
}
Below is html content
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Invoice</title>
<style type="text/css">
body {background-color: rgb(204,204,204); margin: 0; padding: 0;}
.header {margin-bottom: 40px;}
/*.header div {width: 700px;}*/
.text-right {text-align: right;}
.table-value td { border-bottom: 1px solid #e7ecf1;
border-right: 1px solid #e7ecf1;
border-left: 1px solid #e7ecf1;}
.table-value th{ border-top: 1px solid #e7ecf1;
border-bottom: 2px solid #c8c8c8;
border-right: 1px solid #e7ecf1;
border-left: 1px solid #e7ecf1;}
</style>
</head>
<body>
<!-- <page size="A4"> -->
<div class="header">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; font-size: 11pt;">
<tr>
<td colspan="1" style="width: 360px;">
<img src="http://test.com/assets/image-2019-05-13-16-32-28-565.png" style="width: 60%;">
</td>
<td colspan="1" valign="middle" style=" text-align: right; width: 350px;">
<p style="margin: 0;">Test</p>
<p style="margin: 0;">Test</p>
<p style="margin: 0;">Test</p>
</td>
</tr>
</table>
</div>
<div class="content">
<div class="content-box" style="padding-bottom: 30px; border-bottom: 1px solid #000; margin-bottom: 50px;">
<p style="color: #d71383;font-size: 36px;margin-bottom: 10px;">Test</p>
<p></p>
<div style="line-height: 20px;">
<div style="margin-top: 0px;margin-bottom: 0px;" id="client-name">Test: <span>##COMPANYNAME##</span></div>
<div style="margin-top: 0px;margin-bottom: 0px;" id="client-contact">Test: <span>##USERNAME##</span></div>
<div style="margin-top: 0px;margin-bottom: 0px;" id="client-email">E-mail: <span>##EMAIL##</span></div>
<p></p>
<div style="margin-top: 0px;margin-bottom: 0px;" id="uren-periode">Test: <span>##FROMDATETODATE## </span></div>
<div style="margin-top: 0px;margin-bottom: 0px;" id="datum">Test: <span>##TODAYDATE##</span></div>
<div style="margin-top: 0px;margin-bottom: 0px;" id="total-aantal-uren">Total: <span>##HOURMIN##</span></div>
<div style="margin-top: 0px;margin-bottom: 0px;" id="hourly-rate">Test: <span>##HOURLYRATE##</span></div>
</div>
</div>
<div class="table-value-box">
<div class="table-responsive">
<table class="table-value" width="100%" cellspacing="0" cellpadding="0" role="presentation" style="max-width: 800px;margin: 0 auto; font-size: 11pt;">
<thead>
<tr>
<th style="width: 60px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Ticket #</span></th>
<th style="width: 100px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Datum</span></th>
<th style="width: 288px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Onderwerp</span></th>
<th style="width: 158px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Tijd</span></th>
<th style="width: 100px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Status</span></th>
</tr>
</thead>
<tbody>
##DATA##
</tbody>
</table>
</div>
</div>
</div>
<!-- </page> -->
</body>
</html>
Any Help will be appreciated.
Without calling the constructor twice, Try the following :
try {
$html2pdf = new Html2Pdf('P', 'A4', 'fr', true, 'UTF-8', [2, 2, 2, 5]);
$html2pdf->pdf->SetDisplayMode('fullpage');
$html2pdf->writeHTML($content);
$html2pdf->output($pdfname.'.pdf','D');
} catch (Html2PdfException $e) {
$html2pdf->clean();
$formatter = new ExceptionFormatter($e);
echo $formatter->getHtmlMessage();
}
Also the number of pages and placement of page breaks depends highly on the structure of your html content. An empty <page> tag or a misplaced <div> could also create troubles while using html2pdf.
Incase the above solution doesn't workout , please post sample html document content, esp.the first few lines from the source of the browser, will try to help
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!
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.
I have made few pages where all the files where tested on screen resolution 1366x768. But when i tested it on 1024x768 the menu & images overlap. Is there some solution to this ?
Please Help!
This is my homepage.php
<?php session_start();?>
<html>
<head><title>Welcome</title></head>
<style>
#heading{ text-align:right;font-size: 18px;float:right;margin:35px 20px;}
a:hover{ color:#BEBEBC; }
a{ color:black;}
#img{margin:10px 10px;}
.box {margin-left: auto;margin-right: auto;}
.wrapper {display: table-cell;vertical-align: middle;width: 2500px;height:450px;}
#rectangle {width: 300;height: 200;border-style: solid black;border-radius:5px;border-width:10px;border-color:black;}
img{opacity: 0.5;filter: alpha(opacity=40); /* For IE8 and earlier */}
img:hover {opacity: 1.0;filter: alpha(opacity=100); /* For IE8 and earlier */}
#copyright{text-align:center;color:black;}
ul{
padding: 0;
list-style: none;
}
ul li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
}
li{
width: 100px;
display: inline-block;
position: relative;
text-align: center;
line-height: 21px;
//background: #1E90FF;
color:black;
}
ul li a{
display: block;
//padding: 5px 10px;
color: black;
//background: #B0D8FF;
text-decoration: none;
}
ul li a:hover{
color: white;
//background: #939393;
}
ul li ul{
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
</style>
<body background="a6.jpg">
<img id="img" src="LOGO.jpg" width="150px" height="100px">
<h1 align="center" style="position:absolute;top:30px; left:400px;">MEETING ROOM APPLICATION</h1>
<div id="heading"><ul>
<li>Home</li>
<li><?php echo ucwords($_SESSION['usr_name']); ?> ▾
<ul>
<li>Change Password</li>
<li>Logout</li>
</ul>
</li>
<li>Help</li>
</ul></div>
<br><br>
<hr width="100%">
<table border="1" width="100%" style="border:black;">
<tr><th align="center" colspan="8" style="border-radius: 5px;border-style: solid;">No. of Booking for Present Day</th></tr>
<tr><td align="center" style="border-radius: 5px;border-style: solid;">3-Seater</td><td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center">5-Seater</td><td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center" align="center">8-Seater</td>
<td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td>
<td style="border-radius: 5px;border-style: solid;" align="center">16-Seater</td>
<td align="center" style="border-radius: 5px;border-style: solid;"><?php include('count.php'); ?></td> </tr>
</table>
<div class="wrapper">
<table class="box">
<tr>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" style="border: 10px solid white;border-radius:10px;"><h2 align="center">3-Seater</h2><p align="center">This is a 3-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="5-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">5-Seater</h2><p align="center">This is a 5-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="8-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">8-Seater</h2><p align="center"><This is a 8-Seater room.</font></p></td>
<td align="center"> <img src="#" id="rectangle" width="330" height="250" alt="16-Seater" style="border: 10px solid white;border-radius:10px;"><h2 align="center">16-Seater</h2><p align="center">This is a 16-Seater room.</font></p></td>
</tr>
</table>
</div>
</body>
</html>
With the code provided above you will find that the rendering of the site will differ dependent on the screen size. For example when using an iPad or iPhone you will have issues having to scroll round the page.
The only way to counter this is to use responsive design which effectively uses percetages to calculate the desired width.
For example we have two elements on a page side by side, rather than say each element is 500px wide (as this would require scrolling on a screen smaller than 1000px, we can say that each element has a width of 50%, this way regardless of the screen size, the elements sizes according to the device.
Responsive design is really the way forward and you will not be able to solve your issue without following this path. Responsive design is becoming the standard more and more and you may as well learn sooner rather than later or risk being left in the dust.
I would suggest reading the following and should you still struggle, create a new question targeted towards responsive design.
http://blog.froont.com/9-basic-principles-of-responsive-web-design/
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
You may also find that integrating a pre-existing responsive template may be the quickest solution, see the following:
http://www.responsivegridsystem.com/
http://getbootstrap.com/css/
Hope this helps.
I am working on a web based game. I have made the navigation but the text is not aligned correctly.
HTML
<table width="123" height="253" border="0" align="right" cellpadding="0" cellspacing="2" class="table"> <tr>
<td height="23" class="header">Main Game</td> </tr> <tr>
<td height="65" valign="top" class="cell" align="center"> Homepage Staff Page
</td> </tr> <tr>
<td height="23" class="header">Social</td> </tr> <tr>
<td height="65" valign="top" class="cell">Discussions</td> </tr> <tr>
<td height="23" class="header">LogOut</td> </tr> </table>
CSS
.table {
border:#000000 1px solid; background-color:#363636;
}
.cell {
color:#FFFFFF; padding:3px; background-color:#1C1C1C; align:center;
}
.header {
padding:0px; padding-left:2px; color:#FFFFFF;
background:#3A0D07; font-family:verdana; font-size:10px;
line-height:18px; text-align:left; border-bottom:2px solid;
border-color:#000000; align:center;
}
output
for your code, the anchor tags are displayed inline-block by default
a quick fix for your code is to change the display for the a tags, add the following to your css:
.table .a{
display:block;
}
Instead of tables you should use list item as they render the same in every browser. Also you have better control over if.
HTML
<ul class="nav">
<li>Home</li>
<li>Stuff</li>
<li>About</li>
</ul>
CSS
ul {
list-style-type: none;
}