css formatting in php - php

I have a css question.
I have the following php code which displays a name.
while ($db_field = mysql_fetch_assoc($result)) {
print $db_field['ship_name'] . "<BR>";
I'm trying to add some text style to it but I'm not that good in css and I'm somehow lost.
I'm trying to do something like <t> $db_field['ship_name'].<t/> but it gives me an error.

judging by your comment, probably you want
print "<span class='t'>".$db_field['ship_name']."</span><BR>";
and for your CSS file define
.t { font-size: 50pt; color:black; text-shadow: 0 1px 2px white; }

There are 2 ways of doing this. Either you embed html in PHP or write separate HTML snippet. I will show you the both ways :
The first one is already explained above in the answer by sinclairchase.
echo "<td>" . $db_field['ship_name'] . "</td>";
The other way is :
<?php while ($db_field = mysql_fetch_assoc($result)) {
?>
<td>
<?php print $db_field['ship_name'] . "<BR>"; ?>
</td>
<?php } ?>
I dont unsderstand why you write t in question it would be td.

This will echo out the data into a span tag:
echo "<span>" . $db_field['ship_name'] . "</span>";
To add a css class:
echo "<span class=\"class_name\">" . $db_field['ship_name'] . "</span>";
Then in your css file:
span.class_name { font-size:24px; color:#666; }

Related

How to change height of a <br> tag in HTML?

I want to change height for a <br> tag.
This code written inside HTML tag which I have tried:
echo "<br style="padding-top:xxpx;">"
But, it doe not work:
echo " $x" . " Degree"."<br>"."<br>"."<br>"."<br>";
echo " $y" . " percent"."<br>"."<br>"."<br>";
echo " $a" . " percent"."<br>"."<br>"."<br>"."<br>";
echo " $b" . " percent"."<br>"."<br>"."<br>"."<br>";
echo " $c" . " percent"."<br>"."<br>"."<br>"."<br>";
echo " $d" . " percent";
header("Refresh:5");
//}else {
//echo "No Results";
//}
//$conn->close();
?>
</div>
As the 'margin' doesn't work in Chrome, that's why I used 'border' instead.
br {
display: block;
content: "";
border-bottom: 10px solid transparent; // Works in Chrome/Safari
}
#-moz-document url-prefix() {
br {
margin-bottom: 10px; // As 'border-bottom' doesn't work in firefox and 'margin-bottom' doesn't work in Chrome.
}
}
This is a tiny CSS for answering your question:
br
{
display: block;
margin: 10px 0;
}
But, I suggest you use <div> for formatting your layout, instead of using <br> tag.
Changing height of <br> is not appreciated. Place <br> element inside a <p> tag and apply line-height to the <p> element
echo '<p style="line-height:30px;margin:0px;"><br></p>
or simply the best try this
echo"<p style='margin:0px;'line-height:20px;>Your content Here</p>";

Filepath from SQL database not looping a BG image

I have an Image uploaded to a folder with the filepath stored in a table along with other info (title, description). I would like this info looping inside a repeated div. Both other variables loop correctly, however the filepath variable needs to be used in a background URL and at the moment only echos the value of the last row. Thank you very much for your help, there has got to be a simple solution! -Sean
<?php
$result = mysql_query("SELECT * FROM `program`");
$values = mysql_fetch_array($result);
$globals['filepath'] = $row['filepath'];
echo "<div>"; // start a table tag in the HTML
while($row = mysql_fetch_array($result)){ //Creates a loop to loop through results
echo "<div class=wrapper3 >
<h2>" . $row['program_name'] . "</h2>
<p>" . $row['program_description'] . "</p>
</div>
<p> </br> </p>";
$globals['bgimage'] = $row['filepath'];
}
echo "</div>";
?>
<style type="text/css">
.wrapper3{
width:85%;
margin:0 auto;
padding:20px;
height:auto;
color:#FFF;
background: url(/SMLC/<?php while ($row = mysql_fetch_array($result)){ echo $globals['bgimage'];} ?>
) no-repeat;
background-size:cover;
color:#000;
height:250px;
text-align:center;
background-color:#fff;
border-radius:6px;
border:1px solid #0FF;
}
</style>
<?php mysql_close();?>
Remove the background from the .wrapper3 in css, and add it to the element as an inline style.
<?php
$result = mysql_query("SELECT * FROM `program`");
echo "<div>"; // start a table tag in the HTML
while ($row = mysql_fetch_array($result)) { //Creates a loop to loop through results
$globals['filepath'] = $row['filepath'];
echo "<div class='wrapper3' style=\"background: url('/SMLC/".$row["filepath"]."');\">
<h2>" . $row['program_name'] . "</h2>
<p>" . $row['program_description'] . "</p>
</div>
<p></br></p>";
}
echo "</div>";
?>
NOTE: Use mysqli functions or PDO instead of mysql functions, since, mysql functions are deprecated.

CSS effect inside PHP code

I have written some HTML code inside PHP with echo as below:
echo '<a class = "fragment" href = "'.$row['url'].'" target = "_blank" >';
echo '<div>';
echo "Title: $title"; echo '<br/>';
echo "URL:"; echo '<h4>' .$url. '</h4>';
echo "Preview : $preview"; echo '<br/>';
echo "Image url: $image"; echo '<br/>';
echo '</br>';
echo '</div>';
echo '</a>';
Problem is $url appears on a new line and in bold text. Though i have not used here <b> or <br/> before and after it.
How can I show it like
URL : www.url.com
same like other parameters appears?
CSS effect appears properly.
css for h4:
.fragment h4
{
padding: 0;
margin: 0;
color: #000;
}
.fragment h4:hover
{
background-color:#ccc;
text-decoration: underline;
}
An h4 tag is (a) a heading tag (hence the boldness) and (b) a block-level tag (hence the new line). If you don't want these aspects, why are you using it?
If you want to style this text, you should use the tag provided for the purpose: <span>. Give it a class or an id and style that.

Styling code within php

I'm having trouble styling the information that I'm pulling from the database. If anyone can help I'd really appreciate it. I tried defining $style within the while loop, and then assigning it the $questions, but nothing happens on the webpage. I'm new with coding in general, and while I have some knowledge of css, I don't know how you use it within php script.
style for the background I was trying to put behind each question*
#frm1
{
background: #D9D9D9;
margin:auto;
top:150px; left:200px; width:880px; height:60px;
position:absolute;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 9px;
font-style: italic;
line-height: 24px;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.7);
}
PHP code retrieving info from database*
if (mysql_num_rows($result) >= 0)
{
$toggle = false;
while ($rows = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 )
{
$i++;
$toggle = !$toggle;
if($toggle)
$style = "id:frm1;";
else
$style = "background: white;";
questions .= "<a style='$style'> </a>";
questions .= "Titlee: " ."<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['title'] . "</a> <br> ";
questions .= "Details: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['detail'] . "</a> <br> ";
questions .= "Category: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['categories'] . "</a> <br> <br> <br> ";
}
echo questions;
}
while I have some knowledge of css, I don't know how you use it within
php script.
Okay.
Your PHP script is a PHP script on the server, and results in a regular HTML page for the user. [See the bottom of the answer, I'll try to give you a quick overview]
You can use CSS exactly as you would with a plain HTML page, and it will work just fine despite being backed by PHP.
This means do not use style="$style". Style attributes are Bad.
As it looks like you want to construct your CSS conditionally, my suggestion is either:
Change a class using PHP, and have an external stylesheet which acts on that class
Put the styles you're conditionally changing inside <style> tags in your header, and change those with PHP.
This answer will use the first option
(Edited to take into account new information)
In your PHP code, before your links:
if($toggle) {
$questions.='<div id="frm1">';
}
else {
$questions.='<div id="frm2">';
}
In your PHP code, after your links:
$questions .= "</div>";
And finally, in either your external stylesheet, or your in-head <style> tags:
#frm1 {
...
}
#frm2 {
...
}
Quick overview of server-side languages
So, web programming. This is generally done in two ways. client side (read: javascript) and server side (in your case, read: php, but there's a lot more to this).
With a client side language like javascript, the code actually gets sent to the web browser. The web browser then modifies the contents of the page according to what the script says for it to do. This means your users can see the code, even turn it off in their web browser or execute other javascript in its place.
With a server side language, there's a different workflow.
The user asks for your webpage (identified by its URL)
The web server (read: your webhosting) receives this request, and looks up what the webpage is
Finding that the webpage is a php page, the server executes the php code
The php code gives the server an html page (which you have built, as you can see, your php script outputs HTML)
The server sends the resulting html code to the user
Note that the web browser, which is the component doing all of the processing of HTML and CSS, never sees the php. By the time your php script reaches your users, it's just an html page.
Because the web browser only sees an HTML page, there is no functional difference between using CSS on your php script, and using CSS on a regular HTML page.
This will work:
if (mysql_num_rows($result) >= 0) {
$toggle = false;
while ($rows = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 ) {
$i++;
$toggle = !$toggle;
if($toggle)
$style = "background: #D9D9D9;"; else
$style = "background: green;";
questions .= "<a href='#' style='display:block;$style'> </a>";
questions .= "Titlee: " ."<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['title'] . "</a> <br> ";
questions .= "Details: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['detail'] . "</a> <br> ";
questions .= "Category: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['categories'] . "</a> <br> <br> <br> ";
}
echo questions;
}
The problem was your a-tag doesn't have a href attribute and since it's displayed inline (default-behaviour) the background CSS property won't work.
Instead of style, build classes and define them in css.
if ($toggle)
$questionClass="redBackground";
else
$questionClass="greenBackground";
$questions.="<a class='$questionClass'>";
Also, definitely look into mysqli or pdo. mysql_ functions are deprecated and not nearly as cool!
You can do -
if (mysql_num_rows($result) >= 0)
{
$toggle = false;
while ($rows = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 )
{
$i++;
$toggle = !$toggle;
if($toggle)
$style = "bg";
else
$style = "bg_green";
echo("<a class='".$style."'> </a>");
echo("Titlee: " ."<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['title'] . "</a> <br> ");
echo("Details: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['detail'] . "</a> <br> ");
echo("Category: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['categories'] . "</a> <br> <br> <br> ");
}
In this file add -
<style type="text/css">
.bg {
background: #D9D9D9;
}
.bg_green {
background: green;
}
</style>
As ben said use class.
first create a class
<style>
.gray{background: #D9D9D9;}
.green{background: green;}
</style>
Then try this
if (mysql_num_rows($result) >= 0)
{
$toggle = false;
while ($rows = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 )
{
$i++;
$toggle = !$toggle;
$style = ($toggle)?"green":"gray";
$questions .= "<a class='".$style."'> Put some thing here </a>";
$questions .= "Titlee: " ."<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['title'] . "</a> <br> ";
$questions .= "Details: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['detail'] . "</a> <br> ";
$questions .= "Category: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['categories'] . "</a> <br> <br> <br> ";
}
echo $questions;
}
Please try it, I have not tested but it should work, according to your need.
You can alternate on your counter $i with $i % 2 to switch between two CSS classes. This will give you 0, 1, 0, 1, 0, 1, ... and so select the first and second CSS class name in turn.
PHP:
$css_class = array('frm1', 'second');
while ($rows = mysql_fetch_array($result, MYSQL_ASSOC) and $i<10 )
{
$i++;
questions .= "<a class='$css_classes[$i % 2]'> </a>";
questions .= "Titlee: " ."<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['title'] . "</a> <br> ";
questions .= "Details: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['detail'] . "</a> <br> ";
questions .= "Category: " . "<a href='show_question2.php?question_id=" . $rows["question_id"] . "'>". $rows['categories'] . "</a> <br> <br> <br> ";
}
and in your CSS file you define the two classes
.frm1 {
background: #D9D9D9;
margin:auto;
top:150px; left:200px; width:880px; height:60px;
position:absolute;
...
}
.second {
background: white;
}

css div not being recognized

I have the following css code:
#Layer3
{
position:absolute;
width: 89%;
height: 40%;
left: 10%;
top: 56%;
background-color: #f1ffff;
}
#Layer3 h1
{
font-size: medium;
color: #000033;
text-decoration: none;
text-align: center;
}
.tableheader {
border-width:10px; border-style:solid;
}
.tablecontent {
height: 95%;
overflow:auto;
}
However, when I use this PHP to generate the html
echo '<div id="tableheader" class="tableheader">';
echo "<h1>{$query} Auctions</h1>" . "\n";
echo "</div>";
echo '<div id="tablecontent" class="tablecontent">';
echo "<table border='0' width='100%'><tr>" . "\n";
echo "<td width='15%'>Seller ID</td>" . "\n";
echo "<td width='10%'>Start Date</td>" . "\n";
echo "<td width='75%'>Description</td>" . "\n";
echo "</tr>\n";
// printing table rows
foreach ($rows as $row)
{
$pk = $row['ARTICLE_NO'];
echo '<tr>' . "\n";
table contens generated in here
echo '</tr>' . "\n";
}
echo "</table>";
}
echo "</div>";
which generates this html:
<div id="tableheader" class="tableheader">
<h1>hardy Auctions</h1>
</div>
<div id="tablecontent" class="tablecontent">
<table border='0' width='100%'>
<tr>
<td width='15%'>Seller ID</td>
<td width='10%'>Start Date</td>
<td width='75%'>Description</td>
the rest of table stuff
</div>
The stylesheet is correctly referenced so I am unsure what is causing the error. But there is no border around tableheader at all. Both of these layers are in Layer3 which no longer displays properly on the page.
#tableheader {
border: 10px solid #000;
}
Try giving it a color.
EDIT: since its id is tableheader, try changing the style selector to be an id. You could also try using !important to see if anything is overriding your class selector.
Specificity values:
inline: 1000; id: 100, class: 10, element: 1
!important trumps all other non-important declarations.
Start by browsing the HTML DOM in the rendered page either using Firebug in Firefox or using the IE Developer Toolbar in IE.
That way, you can see what styles are actually associated with the element in the rendered page. It's a lot easier to debug the issue from there.
One possibility is that there's a syntax error somewhere in the CSS file causing the styles not to be applied correctly.
I've just had a quick look at this and it seams fine, I've also created a local copy of these and the styles work out okay as well, I get a nice thick black border around the h1 text.
So from what your explaining something is either overwriting the styles, or the styles aren't being applied to the page.

Categories