Hi I have a system developed with PHP and CSS.
I wish to have background images that will cover the full screen of each page. However with my existing setup the image covers the other content on screen. I have tried this with my homepage initially. I created an img tag (Learning) in my php file on line 19 as shown.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome - <?php echo $userRow['username']; ?></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="left">
<label>NHSCT E-Learning Portal</label>
</div>
<div id="right">
<div id="content">
Welcome <?php echo $userRow['forename']; ?> Sign Out
</div>
</div>
</div>
<img src="images/Learning.jpg" id= "Learning" alt="">
<br>
<p align="center"><img src="title.jpeg" width="400"height="100" alt="title.jpeg">
<br>
<center>
<h1> Select an E-Learning Module<h1>
<br>
<table align="center" height="200" width="40%" border="0">
<tr>
<td><button name="Surface" onclick="window.location.href='SurfaceExecute.php'">Surface Pro Basic Skills</button></td>
</tr>
<td><button name="eNISAT" onclick="window.location.href='eNISATExecute.php'">eNISAT Tutorials</button></td>
</tr>
<td><button name="Email" onclick="window.location.href='EmailExecute.php'">Email Tutorials</button></td>
</tr>
<td><button name="Policies" onclick="window.location.href='Policyview.php'">Policies and Procedures</button></td>
</tr>
</table>
</body>
</html>
I then added the following CSS to my style.css file
/* css for home page */
#Learning {
position: fixed;
top: -20;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
My question is, how do I display this image in the background with existing screen content on top? Or is there a way to make the background image opaque so that the other content can be seen through it and clicked?
UPDATE Solution found from the answer provided. Removed img tag from php file and updated CSS to the following
html {
background: url(images/Learning.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You would use the background-image property in CSS.
If you are doing that for the whole page, you might as well use it on the body element :
body {
background-image : ........;
}
Related
I'm using PHP mpdf library for PDF export. But the HTML code alignment and position of all content changes when i export HTML to PDF.
Please explain how can I export the full HTML page as it is to the PDF page.
<?php $html='<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
body, html { height: 100%; margin: 0px; width: 100% !important;}
</style>
</head>
<body>
<center>
<div class="container" style="position: relative; width: 80%; left: 20%; display: block; text-align: center;">
<div style="position: absolute; left: 40%; width: 60%; text-align: center;">
<img src="p1/logo.png">
<h1 style="text-align: center;">TALENTXâ˘</h1>
<h1>Profile</h1>
<h1>Aljoharah AlBabtain</h1>
<p>RESULTS REFERENCE REPORT JUNE 2020</p>
</div>
</div>
</center>
</body>
</html>';
require_once APPPATH . 'libraries/mpdf/autoload.php';
$mpdf = new \mPDF('utf-16','A4','');
$html = $this->load->view('reps/p1',null,true);
$mpdf->WriteHTML($html);
$mpdf->Output("files/test.pdf",'F');
The best way for aligning the HTML content in PDF export or for printout is the <table> approach. Put all your content in the table columns.
I use this approach and all my problem fixed.
I have button book flights.
<a class="book-flight-btn" href="https://fairdealtravel.tripprosites.com/">Book flight</a>
and it will take user to a flight booking website.
I don't want to show this link "https://fairdealtravel.tripprosites.com/" in the url bar. the link in the url bar should be like this/ "https://mydomainame.com/flight". I am working in native Php and jquery.
So here is what I would do if I were you:
The following would be https://mydomainame.com/flight.php or flight depending on your htaccess.
You a button would now be:
<a class="book-flight-btn" href="https://mydomainame.com/flight>Book flight</a>
in flight.php You would have this code:
<!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>
<title>Test Layout</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="https://fairdealtravel.tripprosites.com/" />
</div>
</body>
</html>
The previous html code is what is recommended by this question: Full Page <iframe>
Does this make sense?
You can't hide the URL, if the browser on the URL. But you can use <iframe> tag.
Put the following code in a file, to which you set the URL https://mydomainame.com/flight:
<body style="margin: 0; max-width: 100%; overflow-x: hidden;">
<iframe src="https://fairdealtravel.tripprosites.com/" frameborder="0" style="width: 100%; height: 100%;"></iframe>
</body>
Note that you have to put this link https://mydomainame.com/flight to your button href:
<a class="book-flight-btn" href="https://mydomainame.com/flight">Book flight</a>
I am using css to break the content as required to be printed in fresh pdf page, I want to include the header/footer on each pdf page, I tried with fixed css/ along with margin but that works for first page not the successive page. The footer is getting overlapped with page content..
mypage.php
<?php //call_db
//call_func
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Print Page</title>
<style>
body {
background-color: white;
color: black;
font-size: small;
font-family: sans-serif, helvetica, tahoma, arial;
margin: 20%;
}
.page-break {
display:block;
page-break-before:always;
}
#media screen {
div.divFooter {
display: none;
}
div.divHeader {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
bottom: 0;
}
div.divHeader {
position: fixed;
top: 0;
}
}
</style>
<script type="text/javascript" src="jquery.js" > </script>
<script type="text/javascript">
$(document).ready(function(){
window.print();
});
</script>
</head>
<body>
//call sql query for content // A collection of 200 lists
<div class="divHeader"> <h1 align="center" style="font-size:36px;"> THE GAME OF THORNES</h1> </div>
<h1>Sean's CSS Print vs. Screen Example</h1>
<h2>Lesson 1</h2>
<p>This is my first Page in the document.</p>
<div class="page-break"></div>
<h2>Lesson 2</h2>
<p>Examples and theory of lesson2</p>
<div class="page-break"></div>
<h2>Lesson 3</h2>
<p>Examples and theory of lesson2</p>
<div class="divFooter">UNCLASSIFIED </div>
</body>
</html>
** I am adding PHP tag as if you have any other better way to print the content from db, please suggest.
I think this is duplicate of this Convert HTML + CSS to PDF with PHP? ,
you must use your pdf convertor library to add header and footer to pdf.
I'm used http://www.tcpdf.org/ in my project. you can use it too.
A few month back I posted a question about how to show the caption when hovering over an image.
This is the thread:
Don't understand how to show the caption when hovering image
The issue is that when I used TinyMce to edit the caption, it won't show the caption hovering. Instead it doesn't show any caption, it just hovers.
This is editor side (I shortened it):
<script language="javascript" type="text/javascript">//<![CDATA[
tinyMCE.init({
// General options
mode: "textareas",
elements : "ajaxfilemanager",
theme : "advanced",
});
//]]</script>
This is output:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style>
#caption { display: none;font:12px Times New Roman;}
img:hover + #caption { position: absolute; display: block;}
.caption { display:none; text-decoration: none; font:12px Times New Roman;}
.image-with-caption:hover .caption {display: block; text-decoration: none;}
a:hover { text-decoration: none; }
</style>
<table width="100%">
<tr>
<td>
<?php echo(stripslashes($_POST['content'])); ?>
</td>
</tr>
</table>
</body>
</html>
This is the input I copy and paste the code into TinyMCE:
<table width="100%">
<tr>
<td>
<div class="image-with-caption">
<a href="images/artistc.php">
<img src="images/imagec08.jpg" style="width:209px" />
<p id="caption">Caption 3</p>
</a>
</div>
</td>
<td>
<div class="image-with-caption">
<a href="images/artistb.php">
<img src="images/imageb12.jpg" style="width:195px" />
<p id="caption">Caption 5</p>
</a>
</div>
</td>
<td>
<div class="image-with-caption">
<a href="images/artista.php">
<img src="images/imagea02.jpg" style="width:260px" />
<p id="caption">Caption 4</p>
</a>
</div>
</td>
</tr>
</table>
Any suggestions and advice would be appreciated. I just want to know why it doesn't show the caption.
I don't completely understand your question, but I see you have several tags with same id. That is not allowed. Maybe if you fix that, it helps to fix the issue. You should replace the id="caption" by class="caption" (or anything else), and then, modify your css replacing #caption by .caption
I have a PHP script A which displays data from database.
I have another another script B which gets the content of script A .But I need the content after script A is executed . But this is not happending .
// Script A
enter code here
<?php
session_start();
if(!isset($_SESSION['username']))
{
print "You have not logged in";
header('Location: index.htm');
}
session_write_close();
?>
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv
="content-language" content="cs" />
<meta name="robots" content="all,follow" />
<meta name="author" content="All: ... [Nazev webu - www.url.cz]; e-mail: info#url.cz" />
<meta name="copyright" content="Design/Code: Vit Dlouhy [Nuvio - www.nuvio.cz]; e-mail: vit.dlouhy#nuvio.cz" />
<title>WAVES 1.0!</title>
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<link rel="index" href="./" title="Home" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="./css/main.css" />
<link rel="stylesheet" media="print" type="text/css" href="./css/print.css" />
<link rel="stylesheet" media="aural" type="text/css" href="./css/aural.css" />
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script language="javascript" type="text/javascript">
function getQueryParams( val )
{
//Use the window.location.search if we don't have a val.
var query = val || window.location.search;
query = query.split('?')[1]
var pairs = query.split('&');
var retval = {};
var check = [];
for( var i = 0; i < pairs.length; i++ )
{
check = pairs[i].split('=');
retval[check[0]] = check[1];
}
return retval;
}
var values = getQueryParams();
var v = values['id'];
$(function()
{
$.getJSON("getviewresults.php?id="+v, function(data)
{
$.each(data, function(entryIndex, entry)
{
var name = entry['tid'];
var user = entry['status'];
var p= entry['description'];
var f = entry['time'];
var stime = entry['stime'];
$('<tr> <td>'+name+'</td> <td > '+p+'</td> <td> '+user+'</td> <td>'+f+'</td> <td> Log </td> <td>Device Log </td><td> LAN </td> </tr> ').appendTo('#container');
});
});
});
</script>
</head>
<body>
<!-- Main -->
<div id="main" class="box">
<!-- Header -->
<div id="header" style="left: 0px; width: 100%; top: 1px; height: 61px">
<!-- Logotyp -->
<h1 id="logo" style="left: 46px; top: 19px">WAVES 1.0!<strong>!</strong><span></span></h1>
<hr class="noscreen" />
<img src="Design/logo.jpg" style="right:0px; width: 134px; position: absolute;
top: -2px; height: 61px" />
</div> <!-- /header -->
<!-- Main menu (tabs) -->
<div id="tabs" class="noprint" style="width:100%; left: 0px; position: relative; top: 0px; height:24px">
<h3 class="noscreen">Navigation</h3>
<ul class="box">
<li>Home<span class="tab-l"></span><span class="tab-r"></span></li>
<li>Package<span class="tab-l"></span><span class="tab-r"></span></li>
<li >Configs<span class="tab-l"></span><span class="tab-r"></span></li>
<li>Live<span class="tab-l"></span><span class="tab-r"></span></li>
<li id="active">Results<span class="tab-l"></span><span class="tab-r"></span></li>
<li>Log out<span class="tab-l"></span><span class="tab-r"></span></li>
</ul>
<hr class="noscreen" />
</div> <!-- /tabs -->
<!-- Page (2 columns) -->
<!-- /page -->
<div style="border-right: #336699 thin solid; border-top: #336699 thin solid; left: 0px;
border-left: #336699 thin solid; width: 100%; border-bottom: #336699 thin solid;
position: relative; top: 0px; height: 480px; overflow:auto">
<table id="container" style="left: 0px; width:100%; position: relative; ">
<tr>
<td style="width: 100px">
<strong>Testid</strong></td>
<td style="width: 382px">
<strong>Description</strong></td>
<td style="width: 100px">
<strong>Status</strong></td>
<td style="width: 100px">
<strong>Time Taken</strong></td>
<td style="width: 100px">
<strong>Log </strong></td>
<td style="width: 100px">
<strong>Device Log </strong></td>
<td style="width: 100px">
<strong>LAN </strong></td>
</tr>
</table>
</div>
</div>
<!-- Footer -->
<!-- /footer -->
<!-- /main -->
</body>
</html>
// Script B
$ch = curl_init();
$url = "http://localhost/waves/viewresults.htm?id=".$id;
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_URL, $url);
$data = curl_exec($ch);
curl_close($ch);
chdir("temp/file");
$myFile = "summary.htm";
$fh = fopen($myFile, 'w') or die("can't open file");
fwrite($fh, $data);
fclose($fh);
The file summary.htm just has the code of the script A , which means it has not executed nnd hence has not data from the database .
What am I doing wrong ?
So I started to answer without reading your code but now see that you are using JavaScript to output the data from Script A instead of using PHP.
Why it wont work: You are dynamically creating a table at run time using client side JavaScript. This will render properly in a browser but will not render via curl. libcurl does not support javascript.
Suggested Solution
I would suggest that you modify getviewresults.php and follow this tutorial to buffer the output to a file or you could also optionally just rewrite Script A to use a server side script.
This was a really entertaining problem thank you.
Try renaming "viewresults.htm" to "viewresults.php" so it's parsed as PHP (you could use mod_rewrite to internally redirect viewresults.htm to viewresults.php so your URLs don't change).
Open the URL you're trying to get in your browser - i.e. http://localhost/waves/viewresults.htm?id=X (with correct value of X) - and see what content is output.
If you still see PHP code displayed in your browser then you know that the file is not being parsed as PHP. By default only filenames with .php on the end will be executed as PHP.
Also, I don't think the code in Script A is going to be executed properly anyway because the session variables won't be set.