align fields of a php variable - php

I have a php to echo three variable fields :
<li>
<mark> <?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo $toprow2['overallRank'] ." ".$toprow2['EmployeeName'] ." ".$toprow2['Total_points_Rewarded']."<br/>";} ?>
</mark>
</li>
Among these three variables of the list,I want to align the first field "overallRank " to left ,"EmployeeName " to centre and "Total_points_Rewarded" to extreme right.
Below is the code I tried for the first field:
<li>
<mark> <?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo "<div style = "text-align=left" ."$toprow2['overallRank'] "</div>"." ".$toprow2['EmployeeName'] ." ".$toprow2['Total_points_Rewarded']."<br/>";} ?>
</mark>
</li>
when I use three divs :
echo "<div style ='text-align:left'>" . $toprow2['overallRank'] . "</div><div style ='text-align:left'>" . $toprow2['EmployeeName'] . "</div><div style ='text-align:right'>" . $toprow2['Total_points_Rewarded'] . "</div>";
I am not able to align them :Current scenario :
the first block is the rank,then name and last points - the three fields that I am trying to echo here.

You can wrap your content elements with <div> and use flexbox to align your items, e.g. like this:
li mark {
display: flex;
justify-content: space-between;
}
li mark div {
flex: 0 1 auto;
width: 100px;
height: 100px;
border: 1px solid;
}
<li>
<mark>
<div>some content</div>
<div>some content</div>
<div>some content</div>
</mark>
</li>
Your PHP code would than probably look like this:
<li>
<mark>
<?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo "<div>" . $toprow2['overallRank'] . "</div><div>" . $toprow2['EmployeeName'] . "</div><div>" . $toprow2['Total_points_Rewarded'] . "</div>";
} ?>
</mark>
</li>
See MDN for more information or CSS-tricks for a nice guide.

You could still use list you would want to add the style to your style sheet but you will get the idea
Add new classes to style sheet
/* CSS layout */
.rstlist {
}
.ovrank {
list-style:none;
display:inline-block;
width:33%;text-align:center
}
.emname {
list-style:none;
display:inline-block;
width:33%;text-align:center
}
.tpr {
list-style:none;
display:inline-block;
width:33%;text-align:center
}
Then here is the edited script
<?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo '<ul class="rstlist">' . PHP_EOL .
'<li class="ovrank">' . $toprow2['overallRank'] . '</li>' . PHP_EOL .
'<li class="emname">' . $toprow2['EmployeeName'] . '</li>' . PHP_EOL .
'<li class="tpr">' . $toprow2['Total_points_Rewarded'] .'</li>' . PHP_EOL .
'<ul>';
}
?>
Now you can view in different browsers and adjust the style of each element to get your desired look based on you actual output...

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.

Using PHP to change the information displayed inside a label

I have the following code that is supposed to be a list of "facilities" and I made a div acting as a popUp that contain information that should change depending on the Lab I click info, I already made the popUp appear and dissapear playing with adding a hide and show class to it using Js.
But I don´t really know how should I write that each li element has to retrive information from a database I made in wamp for practice purposes, should I use a label? Or perhaps create a table instead of a list?
In short I need that when I click Lab 1 the popUp says Name: Lab1, if the clicks Lab 2, then Lab2 and so on. The code I was going to use in PHP is below as well.
HTML
<div class="box">
<p>Lab #1</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #2</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #3</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="popUp1 hide" id="popUpCorrecto1">
<div class="estiloPopUp">
<span>Información de laboratorio</span>
<span value="Cerrar" id="btnCerrar">x</span>
</div>
<ul>
<li>Nombre: Lab #1</li>
<li>Carrera: Desarrollo</li>
<li>Capacidad: 20</li>
<li>Ubicación:Abajo</li>
<li><a href='horarios.html'>Ver horarios</a></li>
</ul>
<input type = "button" value = "Eliminar" id = "btnEliminar" onclick="window.location='labEliminado.html';" />
<input type = "button" value = "Modificar" id = "btnModificar" onclick="window.location='modificarLab.html';" />
</div>
PHP
function displayLab(){
$query = "SELECT bk.idLab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs";
$result = do_query($query);
return $result;
}
function displayBooks(){
$books = getBooks();
while($row = mysql_fetch_assoc($books)){
echo '<tr>' .
'<td>' . $row['idLab'] . '</td>' .
'<td>' . $row['carrera'] . '</td>' .
'<td>' . $row['capacidad'] . '</td>' .
'<td>' . $row['ubicación'] . '</td>' .
'</tr>';
}
}
Gonna add the box CSS just in case:
.box {
color: #ecf0f1;
background-color: #34495e;
display: inline-block;
padding: 2px;
width: 75px;
border: 2px solid black;
margin: 3px;
}
.box:hover{
border:2px solid white;
}
JS for PopUp
var elementoVerInfo = document.getElementById('lnkInfo'),
elementoBotonCerrar = document.getElementById('btnCerrar');
elementoVerInfo.addEventListener('click', function () {
displayPopUp('popUpCorrecto1');
});
elementoBotonCerrar.addEventListener('click', function () {
hidePopUp('popUpCorrecto1');
});
function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}
function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';
}
That is if I decide to use a table...and if the code runs >.>
Anyway thanks a lot in advance
Best Wishes
If anyone else wants to do something similar I came with a solution:
function displayLabs(){
$labs = getLabs();
while($row = mysql_fetch_assoc($labs)){
echo '<ul>' .
'<li>"Nombre: "'. $row['idlab'] . '</li>' .
'<li>"Capacidad: "'. $row['capacidad'] . '</li' .
'<li>"Carrera: "'. $row['carrera'] . '</li>' .
'<li>"Ubicación: "'. $row['ubicacion'] . '</li>' .
'</ul>';
}
}

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 formatting in 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; }

Categories