So basically i have two php files, one with all the functions etc. and one with mixed php and html code.
<table>
<?php echo read(); ?> //This prints a full table with <tbody> etc.
</table>
My question: How do I access this PHP printed html code from my CSS style sheet? It
s a seperate file and i have linked it correctly etc. (since it styles all the html code on the same file)
I have tried just putting
tbody { width:100px; padding: 20px;}
and all those normal ones, but for som reason it doesn't apply to the code the PHP prints out.
Suggestions? (new to PHP, be nice)
Add a class to the <table> tag like
<table class="my-table"> and then try to add in your css file
.my-table{
width:100px;
}
You should apply the css styles to the table tag.
So if anyone stumbles on this thread with the same problem, I managed to solve it by putting all the CSS info in the <table> tag like this:
<table
style="
width:480px;
margin-left:10px;
font-family: calibri;
background-color:white;
color:black;
padding:5px;
border:1px solid black;
"
>
Related
I am trying to pass the percentage in HTML/CSS but I can not succeed.
I am trying:
<?php
$myPercentage = 100;
?>
I am trying to pass the variable in HTML/CSS. I want my progress bar to increase/decrease according to the PHP value.
<style>
.bar-4 {width:70%; height: 18px; background-color: red}
/* Here is the problem, the above progress bar 4 is working and its width increases to 70% but below code is not working. */
.bar-5 {width: <?php echo $myPercentage;?>%; height: 18px; background-color: #4CAF50;}
</style>
Your idea or suggestions would be welcome.
Thank You.
You question lacks some important data, but here are the general guidelines that will make it work:
To have a dynamic variable in the CSS block, you need to be echo the relevant part, or include it in the PHP file (and not on a separate CSS file)
The value given to the variable must come before the CSS block.
So for example, your PHP file should have something like:
<?php
$myPercentage = 100;
?>
<style>
.bar-5 {width: <?php echo $myPercentage;?>%;}
</style>
For cleaner code, the rest of .bar-5 CSS is better to stay in your CSS file, and only the dynamic values should be printed as inline CSS.
I know: opinion-based stuff shouldn't be asked etc., but this isn't about opinion, but for now simply about what still exists or rather what will still work today.
My concern: I am looking for a solution to generate one-page pdf files from PHP/HTML pages that get their content from a database and are rather heavily styled with CSS (also including tabular data and images). A function that lets you open or download the PDF when clicking on a link. The PDF should just basically look the same as the corresponding webpage at size A4 (I'll style it that way). As if you choose "preview/save as PDF" in MacOS' printing dialog, but without the user needing any particular software, working on any OS and browser.
I searched SO and the web, and I found a lot of old posts and pages (3 years and much older), like Convert HTML + CSS to PDF with PHP? , Generate PDF report from php and Generate PDF from HTML PHP I can't see in these posts if any of this is still up-to-date / working.
So I'd have to download all that stuff and build it into my pages, maybe only find out that it doesn't work anymore or isn't really applicable for my situation.
Could people who have experience with that kind of stuff please point me to places where I can find scripts/libraries which are able to do this and work with PHP 5.6 and 7? It doesn't have to support CSS3, I can restrict these pages to CSS2, and although I am using webfonts on that website, I can get along without them for the PDFs. Possibly for free, but also a not-too-expensive commercial solution would be okay. I'd be very grateful for any help.
You can use the mpdf library. It's very easy to learn. Here is the sample code.
It works perfectly.
You can get value from another page, using post method also. Your choice.
<?php $student_id = $_GET['student_id']; ?>
<?php
include("mpdf/mpdf.php");
$html .= "
<html>
<head>
<style>
body {font-family: sans-serif;
font-size: 10pt;
background-image: url(\"images/ok.jpg\");
background-repeat: no-repeat;
padding-top:10pt;
margin-top: 100px;
padding-top: 50px;
}
td { vertical-align: top;
border-left: 0.6mm solid #000000;
border-right: 0.6mm solid #000000;
align: center;
}
p.student_id{
padding-left : 140px;
padding-top : -27px;
}
</style>
</head>
<body>
<!--mpdf
<p class=\"student_id\">$student_id</p>
<sethtmlpageheader name='myheader' value='on' show-this-page='1' />
<sethtmlpagefooter name='myfooter' value='on' />
mpdf-->
</body>
</html>
";
$mpdf=new mPDF();
$mpdf->WriteHTML($html);
$mpdf->SetDisplayMode('fullpage');
$mpdf->Output();
?>
I have a container to center my web page using css:
#container{
width: 1000px;
height: 100%;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
This perfectly displays the left and right borders from the top of the page to the bottom of the page, no problem.
However I have some HTML that is only displayed by PHP when the relevant $_GET is present, for example:
<body>
<div id="container">
<?php if($_GET['something'] == "something"){ ?>
<div>
<table>
<tr>
<td>Some HTML Here</td>
</tr>
</table>
</div>
<?php } ?>
<div>
<table>
<tr>
<td>Some HTML Here</td>
</tr>
</table>
</div>
</div><!--container end-->
</body>
When this html is displayed it pushes the content below it down as it should, however the left and right borders end part way up the page at the point where it would end should the html displayed by the PHP not be there.
Does anybody know why this is happening and if possible point me in a direction to get the border to continue down to the bottom of the page?
I have googled and googled but cant seem to find what I need.
Many Thanks
Fixed it, changed height:100% to min-height:100% in the CSS.
Its amazing how you spend hours searching then as soon as you post a question you find the solution. Nvm its here for others to see should they need it :)
This is somewhat a very peculiar situation to me. Am not sure yet as to why this is happening but here goes. I have a particular div tag with class="sidehead" This class has some style attached as shown below
<style>
.sidehead {
background: none scroll 0 0 #105289;
//border-radius: 15px 15px 15px 15px;
color: #FFFFFF;
font-weight: 700;
padding: 3px 15px;
margin: 5px;
text-shadow: 0 0 2px #000000;
}
</style>
Now the purpose of this div is style the header of every item in the sidebar. however when I add 2 back to div's the blue color gets smeared over the previous div also. I am not sure as to why this is happening.
You can check the flawed effect on http://mashup2.sunnydsouza.com. Just check the sidebar and you will realize what i am talking about. The 2 items I am talking about are fetched using include() statements in php. They are the same scripts called twice.
echo '<div class="sidehead">Most Popular articles</div>';
include('widget_2.php');
echo '<br>';
echo '<div class="sidehead">Random articles</div>';
include('widget_2.php');
Can someone please help me solve this problem. Dunno why the blue color spreads over the first div also :(
It appears the problem is related to the floated items under the headings.
Try making that br one that clears, eg. <br style="clear:both">.
echo '<div class="sidehead">Most Popular articles</div>';
include('widget_2.php');
echo '<br style="clear:both">'; //CHANGE HERE
echo '<div class="sidehead">Random articles</div>';
include('widget_2.php');
This works for me when I change it in the inspect element console with Chrome.
Each of the elements brought in by your include statements have a style of 'float: left'. Removing them, (under 'Most Activities' and 'Recent') does the trick.
I examined it quickly, though I did not pin-point the exact error, I notice a lot of things you can do in order to improve code quality and ease debugging your error.
Firstly, <center> is, I believe, deprecated. Use <p align="center"> or use CSS instead.
Secondly, <br> is wrong, it should have been <br></br> , or alternatively <br />, although this is likely to be ignored by most browsers, it is not W3C compliant, and it is important to create a good habit.
Thirdly, your CSS is everywhere, this is bad. You see, there are three ways to do CSS,
(1) inline
<div style="some css here" >
(2) external file
<head> <link ...."yourCss.css" > </head>
(3) document-wide
<head> <style>some css here </style></head>
Avoid using all three methods, all mixed up, in different locations. Generally the best way is to use class and id to identify all elements you want to style, then have their css properties defined in an external CSS.
The problem seems to be CSS scope, the above methods each has different "scoping priority", so having them mixed up really complicate the priority of which style is applied to an element. Hope this helps.
//border-radius: 15px 15px 15px 15px;
above css style ignore
Use below
/*border-radius: 15px 15px 15px 15px;*/
Not sure but only css problem, its working
Removing float:left; from the Most Popular Articles container worked for me in Firefox.
I have two divs, one on the left, and one on the right side of my page.
I have an iframe in the middle of my site, which content is loaded from a php file with mysql results in it.
I want the two divs on my page to get the TOTAL height of my page and set it as its own height so the borders continue all the way down. I also would like the iframe to adjust its height depending on the "results_table" which "myPhpFile" echoes out.
Here is my two divs code:
<div class="bgr_left">
<div class="bgr_right">
Here is the css:
.bgr_right {
background-image: url(../Graphics/bgr_right.jpg);
background-repeat: repeat-y;
background-position: right;
position: absolute;
top: 0px;
width: 30px;
right: 0px;
background-color: #E7F5F0;
}
AND
.bgr_left {
background-image: url(../Graphics/bgr_left.jpg);
background-repeat: repeat-y;
background-position: left;
position: absolute;
left: 0px;
top: 0px;
width: 30px;
background-color: #E7F5F0;
}
And here is the iframe inside a table:
<table width="850px" height="1000px" border="0" align="center">
<tr>
<td width="845px" height="998px">
<iframe style="border:none; width:100%; height:100%;" name="iframe001" src="frame.html" id="iframe001"></iframe>
</td>
</tr>
</table>
And here is the form:
<form id="nav_form_main" name="nav_form_main" action="bincgi/myPhp.php" target="iframe001" method="get">
And here is the part in the php file which creates a table from the mysql query:
while($row = mysql_fetch_array($qry_result)){
My question: Is this way the best way to get two side borders on my page? AND, is there a way to set the iframe height to the content which is about to be loaded inside it from my "FORM"...
BACKGROUND HISTORY:
I have a form on my site, which targets the iframe, and the action on the form is a php file which returns a mysql query result inside a table. So this table is what ends up inside the iframe!
Trying to resize an IFrame onload using Javascript can be done but is very cumbersome in my experience. Using Ajax to dynamically load the PHP results into your HTML structure would be easier and more reliable. If you load the PHP output into a DIV, that DIV's height can increase the page's height, thus increasing the other DIVs' height.
You can access an iframe content height with JavaScript only if both the iframe and the JavaScript are on the same domain.
You can try inserting content with PHP like:
$content = file_get_contents('http://domain.net/iframe.php');
//
//Do something with the content here
//
echo($content);
But it's not clear solution if you can't modify the iframe.php to get only content you need. I think you'll end up with static iframe height.