I am no beginner with HTML and CSS... but I am with PHP. I have a very tiny dynamically generated PHP page that creates a table and fills it with numbers. The CSS is working on random items, very weirdly and I'm not sure what is going on. The <body> tag CSS is not working at all. Not one property is being affected by it. The table.temps css is not working either, but if I remove it, then the <th> tag looses its styling. This is for a homework assignment and I know it's an easy fix, I've just been having the worst time with CSS and PHP lately.
It's all one page, and its relatively small, so here is the document:
<!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" xml:lang="en" lang="en">
<head>
<title>Lab 1</title>
<style type="text/css">
<!-- Declare document <body> styles -->
body{
background-color: #9FDBFF;
color: #333;
font-family: Helvetica, sans-serif;
font-size: .8em;
height: 100%;
width: 100%;
}
<!-- Declare document table styles -->
table.temps {
width: 50%;
height: auto;
min-height: 400px;
border: 2px solid black;
color: #333;
}
th {
background: blue;
color: #FFF;
height: 20px;
width: 100px;
}
.colorIt {
background-color: #CCC;
}
</style>
</head>
<body>
<?php
$intTableTotalWidth = 8;
$intTableTotalHeight = 8;
$intCount = 1;
print("<table class='temps'>");
print("<th>Farenheight</th>");
print("<th>Celcius</th>");
for ($intHeight = 0; $intHeight < $intTableTotalHeight; $intHeight++) {
print("<tr>");
for ($intWidth = 0; $intWidth < $intTableTotalWidth; $intWidth++) {
if ($intCount % 2 == 0){
print("<td class='colorIt'>" . $intCount ."</td>");
}
else {
print ("<td>" . $intCount . "</td>");
}
$intCount++;
}
print("</tr>");
}
print("</table>");
?>
</body>
</html>
EDIT: My fault people, I didn't even realize I was using HTML comments in the CSS. It's internal CSS so the CSS comments don't change color in the HTML document which was throwing me off. I fixed the issue. I appreciate your input!
You are using html comments in the style tag. This is not allowed. You should never use html comments in style and script tags.It's not allowed. Remove them and it will all work.
remove these lines
<!-- Declare document <body> styles -->
<!-- Declare document table styles -->
Your <th> tags should be embeded in <tr> tags: <tr><th>col1</th><th>col2</th></tr>.
You are outputing more cells / row than columns defined with <th>. If you want a <th> to contain two columns, you should use <th colspan="2">col1</th>.
much easier sollution: have session_start() at begining of .php file, put all your theme in a array and later, include stylesheet
session_start()
$theme=array("links"=>"#ff0000", "bkg"=>"#00ff00");
$_SESSION["Theme"]=$theme;
...
<link rel="stylesheet" type="text/css" href="default.php">
and your stylesheet look like this:
default.php
<?php session_start();
if (isset($_SESSION["Theme"])) {
extract($_SESSION["Theme"]);
header("Content-type: text/css");
} else {
// this part is for proper coloring the file, editor will see <style>
// but when loaded from main file <style> will be discarded
?>
<style>
<?php } ?>
a {
color:<?=$links?>;
}
body {
background-color: <?=$bkg?>;
}
Related
I want to add CSS that is dependent on some PHP variables in the code that is generated before a WP_Query loop. Basically I want to use uniqid and apply the ID to some elements and then add some media query rules for these elements, possibly as <style> tags. I've tried the following, but I'm not sure if style tags that are put in the <body> are ignored or not since this is not working.
$id = uniqid();
<style>
#<?php echo $id; ?> {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
The tag is placed in the DOM, but it's ignored. So I'm either looking for a way to put CSS that is generated in the template, in the <head>. Or any other method for adding CSS other than inline on the element itself, since I can't use media queries that way. Just to be clear, the code above is put inside a loop, as I need the meta values from the post in order to generate the CSS.
Or is this just stupid?
Placing <style> tags within the <body> of your document is technically invalid, but in practice will work almost everywhere.
The problem I suspect you're running into is: the return value of uniqid() may begin with a number, and CSS identifiers cannot begin with numbers. So, if you generate an ID like "4b3403665fea6", your CSS might look okay, but it will be ignored.
You can fix this by passing a prefix to your call to uniqid(), like so:
$id = uniqid('id-');
...so that $id will be a value like "id-4b3403665fea6".
Sample demonstrating in-body <style>
<head>
<style>
#id-4b3403665fea6 {
background: blue;
}
</style>
</head>
<body>
<h1>Test</h1>
<div id='id-4b3403665fea6'>Style me!</div>
<style>
#id-4b3403665fea6 {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
</body>
Note that the <div> winds up with a red background, not blue like the <head> style specifies.
Hope this will help you.
<?php
$id = uniqid('cnt-');
?>
<style>
#<?php echo $id; ?> {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
<div id="<?php echo $id; ?>">Test Content</div>
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.
Im using php to display data from mysql. Here are my css statements:
<style type=”text/css”>
table {
margin: 8px;
}
th {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: 1px solid #000;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
border: 1px solid #DDD;
}
</style>
They are used for displaying table, tableheader, tabledate.
Im new to php css, so im just wondering how to use the above css style in php displaying codes:
<?php>
echo "<table>";
echo "<tr><th>ID</th><th>hashtag</th></tr>";
while($row = mysql_fetch_row($result))
{
echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td> <td>$row[1]</td></tr>\n";
}
echo "</table>";
<?>
I guess you have your css code in a database & you want to render a php file as a CSS. If that is the case...
In your html page:
<html>
<head>
<!- head elements (Meta, title, etc) -->
<!-- Link your php/css file -->
<link rel="stylesheet" href="style.php" media="screen">
<head>
Then, within style.php file:
<?php
/*** set the content type header ***/
/*** Without this header, it wont work ***/
header("Content-type: text/css");
$font_family = 'Arial, Helvetica, sans-serif';
$font_size = '0.7em';
$border = '1px solid';
?>
table {
margin: 8px;
}
th {
font-family: <?=$font_family?>;
font-size: <?=$font_size?>;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: <?=$border?> #000;
}
td {
font-family: <?=$font_family?>;
font-size: <?=$font_size?>;
border: <?=$border?> #DDD;
}
Have fun!
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language.
more info : http://en.wikipedia.org/wiki/Cascading_Style_Sheets
CSS is not a programming language, and does not have the tools that come with a server side language like PHP. However, we can use Server-side languages to generate style sheets.
<html>
<head>
<title>...</title>
<style type="text/css">
table {
margin: 8px;
}
th {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: 1px solid #000;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
border: 1px solid #DDD;
}
</style>
</head>
<body>
<?php>
echo "<table>";
echo "<tr><th>ID</th><th>hashtag</th></tr>";
while($row = mysql_fetch_row($result))
{
echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td> <td>$row[1]</td></tr>\n";
}
echo "</table>";
?>
</body>
</html>
Just put the CSS outside the PHP Tag. Here:
<html>
<head>
<title>Title</title>
<style type="text/css">
table {
margin: 8px;
}
</style>
</head>
<body>
<table>
<tr><th>ID</th><th>hashtag</th></tr>
<?php
while($row = mysql_fetch_row($result))
{
echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td> <td>$row[1]</td></tr>\n";
}
?>
</table>
</body>
</html>
Take note that the PHP tags are <?php and ?>.
Try putting your php into an html document:
Note: your file is not saved as index.html but it is saved as index.php or your php wont work!
//dont inline your style
<link rel="stylesheet" type="text/css" href="mystyle.css"> //<--this is the proper way!
//save a separate style sheet (i.e. cascading style sheet aka: css)
I didn't understood this Im new to php css but as you've defined your CSS at element level, already your styles are applied to your PHP code
Your PHP code is to be used with HTML like this
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles Go Here */
</style>
</head>
<body>
<?php
echo 'Whatever';
?>
</body>
</html>
Also remember, you did not need to echo HTML using php, simply separate them out like this
<table>
<tr>
<td><?php echo 'Blah'; ?></td>
</tr>
</table>
Absolute easiest way (with your current code) is to add a require_once("path/to/file") statement to your php code.
<?php
require_once("../myCSSfile.css");
echo "<table>";
...
Also, as an aside: the opening <?php tag does not have a > on the end, and the closing ?> php tag does not start with <. Weird, but true.
You can also embed it in the php. E.g.
<?php
echo "<p style='color:blue; border:2px red solid;'>CSS Styling in php</p>";
?>
hope this help for anyone in the future.
I don't know this is correct format or not. but it can solved my problem with removing type="text/css" when insert css code in html/tpl file with php.
<style type="text/css"></style>
become
<style></style>
Example
css :hover kinda is like js onmouseover
row1 {
// your css
}
row1:hover {
color: red;
}
row1:hover #a, .b, .c:nth-child[3] {
border: 1px solid red;
}
not too sure how it works but css applies styles to echo'ed ids
I had this problem just now and I tried the require_once trick, but it would just echo the CSS above all my php code without actually applying the styles.
What I did to fix it, though, was wrap all my php in their own plain HTML templates. Just type out html in the first line of the document and pick the suggestion html:5 to get the HTML boilerplate, like you would when you're just starting a plain HTML doc. Then cut the closing body and html tags and paste them all the way down at the bottom, below the closing php tag to wrap your php code without actually changing anything. Finally, you can just put your plain old link to your stylesheet into the head of your HTML. Works just fine.
This is the easiest:
require_once("../myCSSfile.css");
as elbrant mentioned.
I had to add <style> at beginning of myCSSfile.css and </style> at the end (normally not needed in a CSS file).
so, I am trying to echo error warnings such ass (incorrect password/email),(fill in all fields) with the same styles but just differnt text but I cant seem to find a shortcut to do this without echoing the whole style schpiel in every echo, I'm sure this is painfully obvious for most people so please help me out. TVM .heres the code:
if ($oldpassword!==$oldpassworddb)
{ echo"<head>
<style type='text/css'>
.tab2
{
width:400px; height:40px;
position: absolute; right: 300px; top: 70px;
}
.td2
{
background-color:pink;
color:blue;
text-align:center;
}
</style>
</head>
<body>
<table class='tab2'>
<td class='td2'>first meggage</td>
</table>
</body>";}
else if (strlen($newpassword)>25||strlen($newpassword)<6)
{echo "what should I put in here!!! ">second message;}
You're approaching this incorrectly. Avoid intermixing your PHP logic and your output HTML.
Determine which message to display first before outputting anything, and store it in a variable. Then output all the HTML with the variable in place. This allows you to define any other variables you need ahead of time as well, and insert them all into the output simultaneously.
<?php
// First define the $message variable
$message = "";
if ($oldpassword!==$oldpassworddb) {
$message = "first message";
}
else if (strlen($newpassword)>25||strlen($newpassword)<6) {
$message = "Second message";
}
else {
// some other message or whatever...
}
Close the <?php tag so you can output HTML directly
?>
Then output the HTML (don't forget a DOCTYPE!)
<!DOCTYPE html>
<head>
<style type='text/css'>
.tab2
{
width:400px; height:40px;
position: absolute; right: 300px; top: 70px;
}
.td2
{
background-color:pink;
color:blue;
text-align:center;
}
</style>
</head>
<body>
<table class='tab2'>
<!-- the PHP variable is inserted here, using htmlspecialchars() in case it contains <>&, etc -->
<td class='td2'><?php echo htmlspecialchars($message); ?></td>
</table>
</body>
It is not considered a good modern practice to use <table> for layout, and it would be better to move your CSS into an external .css file linked via a <link rel='stylesheet' src='yourcss.css'> tag in the <head>, but you should first address your PHP issue.
I have a few pages which I'd like to have the same background across, so I figured an external style sheet would be the way to go. However, the background changes depending on the time of day, so I had to mix some PHP into the CSS. So now I have a file, background.php:
<html>
<style type="text/css">
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
</style>
</html>
Which is being called from two different pages. One page works perfectly fine, but the other page completely broke when I added the line require_once 'background.php', by which I mean nothing displays at all anymore. The offending page is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Penelope's Conquests</title>
<?php require_once 'background.php'; ?>
<style type="text/css">
table {
margin: 10px;
margin-left: 50%;
margin-right: 50%;
padding: 12px;
border: 10px;
text-align: center;
background-color: #fffb40;
border-style: ridge;
border-collapse: separate;
border-color: #9c6ad6;
outline-style: inset;
}
td.cap {
text-transform: capitalize;
font-variant: small-caps;
}
td.str {
font-weight: bolder;
font-size: 1.4em;
}
</style>
</head>
<body>
<h2>To date, Queen Penelope has destroyed:<br /><br /></h2>
<?php
require_once 'victims.php';
require_once 'mysqlSheep.php';
echo '<table border="3"
frame="box"
cellpadding="5">
<caption>Penelope\'s Victims.</caption>
<tr><th>Victim</th><th>Times Zapped</th>';
$hits = mysql_query("
SELECT *
FROM victims
ORDER BY amount
");
if( $hits )
{
while( $row = mysql_fetch_array($hits) )
{
echo '<tr><td class="cap">'.$row['victim'].'</td>
<td>'.$row['amount'].'</td></tr>';
}
}
else
{
echo '<p>' . mysql_error() . '</p>';
}
echo '</tr></table><br /><br />';
echo '<table border="3"
frame="box"
cellpadding="5">
<caption>Button Clicks.</caption>
<tr><th>Hour of day</th><th>Times Clicked</th>';
$time = mysql_query("
SELECT *
FROM time
ORDER BY hits
");
while( $row = mysql_fetch_array($time) )
{
print "<tr><td class='str'>".$row['hour']."</td>";
print "<td>".$row['hits']."</td></tr>";
}
?>
</body>
</html>
Why doesn't the page want to behave with the style sheet?
Another option is to attach your css file with the <link> attribute.
So in your background.php place
<?php
header("Content-type: text/css");
?>
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
And then call it using
<link rel="stylesheet" type="text/css" href="background.php" />
Placing this in 1 answer would get messy which is why I've added another one.
You've got an <html> tag inside your PHP stylesheet, which means you will get duplicate <html> tags.. not nice
Remove that and just use the <style> tags..
background.php
<style type="text/css">
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
</style>
Ohhh, the issue is that the function day() is defined in a separate file, I forgot to move it over when I was reorganizing the site.
Come on Marko, it was super fantastic script!!! I used your way in order to set custom width inside an external css file and it works great.
I do all php stuff if needed any in here:
<?php
header("Content-type: text/css");
$width= $_COOKIE['scr_width']-10;
?>
then I use the variables below inside the css file like this:
width:<?PHP echo $width."px;";?>
and I have done the include like this:
<head>
<link rel="stylesheet" href="<?PHP echo myLocVars::$mySpacePath."style.php";?>">
</head>
Including CSS can be very tricky because unfortunately it doesn't throw an error (at least I don't know how to..), and it can be a trouble. That's why I give the full path because it is a local CSS included by a local file included itself from index.php.
If you are testing your site on localhost, then try
require_once(dirname(background.php) . "/background.php");
instead of require_once(background.php);