I've run into the problem that when I echo information Into a table using PHP and HTML from the database the information moves depending on how it loads.
By this I mean if I constantly refresh everything will be different to how it previously was. I mean how it is displayed not what is displayed.
.tracklist {
}
.tracklist img {
max-width:15%;
max-height:15%;
}
.tracklist td{
width:36%;
display:block;
padding:1%;
text-align:center;
}
#content {
width:98%;
height:73%;
padding-left:1%;
padding-right:1%;
background-color:#d8d8d8;
text-align:center;
}
#contentbox {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
text-align:center;
background-color:#999999;
}
<div id="content">
<div id="contentbox">
<br />
<table class="tracklist">
<?php
$i = 0; $trEnd = 0;
while ($row = mysql_fetch_array($result)){
if($i == 0){
echo '<tr>';
}
echo '<td>';
echo $row["genre"]." | ".$row["artist"]." | ".$row["name"];
echo '<br />';
echo "<img src=".$row["image"].' />';
echo '</td>';
if($i == 2){
$i = 0; $trEnd = 1;
}else{
$trEnd = 0; $i++;
}
if($trEnd == 1) {
echo '</tr>';
}
}
if($trEnd == 0) echo '</tr>';
?>
</table>
</div>
</div>
The data from the database is called in the header just so people know that it is called.
Fixed this by putting width:100%; in the class which it inherited the height from.
Seems to of fixed it for now.
Related
I have designed a two column display using table.
I want to align image to the bottom inside td. I used vertical-align: top property in td to show the text from top but here is another problem, I want to show image with the text as well but sometimes when text get larger then some td boxes looks larger than another td boxes, I want to show equal td boxes.
There is free space in bottom of some td boxes, I think if I show the image from bottom then free space will shift from bottom to mid so these boxes will look attractive.
I do not want to show the image from top but bottom for that purpose i used another div for the image inside td but all in vain.
Note:- I have tried different positions properties like relative, absolute but none of them working (and sorry for my English).
$rows = $result->num_rows; // Find total rows returned by database
if($rows > 0) {
//if ($result->num_rows > 0) {
// output data of each row
$cols = 2; // Define number of columns
$counter = 1; //
$nbsp = $cols - ($rows % $cols); // Calculate t
echo '<table width="100%" align="center" cellpadding="4"
cellspacing="10" border= 1px solid white>';
while($row = $result->fetch_assoc()) {
$ads = $row['ads_id'];
$id = $row['user_id'];
if(($counter % $cols) == 1) { // Check if it's new row
echo '<tr>';
}
echo "<td>";
echo "<a href='welcome.php?user_id=$id&&ads_id=$ads'>";
echo "Book title - ". $row["title"] ."<br>";
echo "Book author - " . $row["author"] . "<br>";
echo "Price - " . $row["price"]. "<br>";
echo "Grade - " . $row["grade"]. "<br>";
echo "Description - " . $row["descrip"]. "<br>";
$img = $row['pic'];
echo "<div class=csc>";
echo '<img src="'.$img.'">';
echo"</div>";
echo "</a>";
echo "</td>";
if(($counter % $cols) == 0) {
echo "</tr>";
}
$counter++;
//echo "</table>";
}
if($nbsp > 0) { // Add unused column in last row
for ($i = 0; $i < $nbsp; $i++) {
echo '<td> </td>';
}
echo '</tr>';
}
echo '</table>';
} else {
echo "0 results";
}
$conn->close();
?>
This is the CSS part
table {
width: 100%;
text-align:center;
}
th, td {
vertical-align: top;
text-align: left;
padding: 8px;
background: #D9E4F5;
width: 50%;
font-family: georgia;
.csc{
bottom:1000px;
}
.csc img{
display: inline-block;
width: 100%;
height: 100px;
margin-top: 100px;
bottom:2000px;
}
First of all you've missed a } in your css.
This may solve your problem:
table {
width: 100%;
text-align: center;
}
th, td {
vertical-align: bottom; /* This is what you need */
text-align: left;
padding: 8px;
background: #D9E4F5;
width: 50%;
font-family: georgia;
}
.csc{
bottom: 1000px;
}
.csc img{
display: inline-block;
width: 100%;
height: 100px;
margin-top: 100px;
bottom: 2000px;
}
I have a problem that I cannot manage to wrap my section properly.
I have a div "container" that with a php part is populated by few divs and I don't know how to properly wrap it with the border:solid of my created div.
html/php part
<div class = "listaCarrello" id ="listaCarrello "style="display: <?php echo !isset($_GET['riepilogo'])&&isset($_SESSION['username'])? "block":"none"?>">
<?php
$isEmpty = true;
foreach ($_COOKIE as $key => $val) {
$query = $connection->query("SELECT * FROM prodotto WHERE IDProdotto = $key");
if ($query != null) {
$isEmpty = false;
$row = $query->fetch_assoc();
echo "<div class = \"elemCarrello\">";
echo "<p class=\"nomeCarrello\">" . $row['nomeProdotto'] . "</p>";
echo "<div class = \"imgCarrello\">";
echo "<img src = \"img/" . $row['immagine'] . "\" alt=\"" . $row['nomeProdotto'] . "\"height=\"150px\" width=\"150px\">";
echo "</div>";
echo "<div class=\"prezzoCarrello\">";
echo "<p>Prezzo unitario " . $row['prezzo'] . "</p>";
echo "<p> Quantità: " . $val;
echo " - Prezzo totale: ";
echo "€" . $row['prezzo'] * $val . "</p>";
$totale = $totale + ($row['prezzo'] * $val);
echo "<p> Modifica la Quantità: ";
echo "<input type='number' id = 'quantita' name='quantita' value='" . $val . "'>";
echo "<button onclick='refreshCookie($key, document.getElementById(\"quantita\").value)'>AGGIORNA</button>";
echo "</div>";
echo "<button class='eliminaCarrello' onclick='eliminaCookie($key)' style='background: white'> <img src='img/elimina.png' height='50' width='50'> </button>";
echo "</div>";
}
}
?>
</div>
<?php
if (!$isEmpty) {
echo "<div class='checkOut'>";
echo "<p>Totale: €" . $totale . "</p>";
echo '<button id="2ndphase" onclick="goToAddress()">AVANTI</button>';
echo "</div>";
}
?>
css part
.listaCarrello{
border:solid;
border-color: lightgray;
border-radius: 10px;
text-align: center;
margin-top: 5px;
width: 99%;
margin-bottom: 5px;
padding-bottom: 50px;
}
.elemCarrello{
margin-top: 5px;
width: 99%;
text-align: left;
float:left;
display: block;
margin-bottom: 5px;
border: solid;
margin-left: 5px;
border-radius: 10px;
}
.nomeCarrello{
padding-left: 10px;
font-weight: bold;
}
.imgCarrello{
float: left;
padding-left: 10px;
}
.eliminaCarrello{
margin-top: -13px;
margin-bottom: 10px;
}
Sorry for my English and I hope that you understood what I am saying.
I have attached a image as an example
Set the "container" divs overflow styling to auto.
container{
overflow:auto;
}
Below is some of the code for my website. The table works perfectly on Firefox but when I open it in either Chrome or Edge it squishes the picture up, I'm not too sure what it is that's making it do this.
This is how it looks on Firefox:
This is how it looks on Chrome/Edge:
<div class="row">
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "music";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM music_tbl";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
echo "<table class='table-hover mainTable' border='1'>";
while($row = mysqli_fetch_assoc($result)) {
echo "<tr><td><img width='80%' height='80%'src=/Music_Player/songimages/". $row['album_cover_url'].">" .
"</td><td>" . $row["track_name"] .
"</td><td>" . $row["singers"] .
"</td><td>" . $row["album_name"] .
"</td><td>" . $row["trackID"] .
"</td><td><img src=playButton.png class='playB'>
</td></tr>";
}
echo "</table>";
} else {
echo "0 results";
}
Below is my CSS:
.mainTable {
position: relative;
right: 20%;
margin:0 auto;
font-size: 99%;
text-align: center;
border: 1px solid #b3b3b3;
border-collapse: collapse;
max-width: 45%;
max-height: 100%;
font-family: verdana;
margin-bottom: -1px;
top: 200px;
}
tr, td {
border-collapse: collapse;
padding: 5px;
max-width: 650px;
}
.albums {
padding: 0px;
}
I embedded a PHP MySQL query inside a HTML div, but the result of the loop (the table) is aligned to the bottom. Is there any way to move the table to the top of the div? This is the code:
<div style="background-color:yellow; display:inline-table; float:left; max-width:90%; height:auto; text-align:top; left:0; right:0; margin:auto; position:absolute;">
<?php
$agent = $_COOKIE['user'];
$server = "*******";
$user = "*******";
$pass = "*******";
$baza = "balkandi_order";
$con = mysqli_connect($server, $user, $pass, $baza) or die("conexiune nereusita");
$sql= "SELECT * FROM tab_order WHERE agent='$agent'";
$rezultat = mysqli_query($con, $sql);
echo '<table cellpadding="5" cellspacing="0" margin-top="0" max-width="0%" margin="auto" border="1px">';
echo '<tr><th>Data</th><th>Agent</th><th>Product</th><th>Quantity</th></tr>';
while ($row = mysqli_fetch_assoc($rezultat)) {
echo '<tr>';
echo '<td>';
echo $row['data'];
echo '</td>';
echo '<td>';
echo $row['agent'];
echo '</td>';
echo '<td>';
echo $row['product'];
echo '</td>';
echo '<td>';
echo $row['qty'];
echo '</td>';
echo '</tr>';
echo "<br>";
}
echo "</table>";
mysqli_close($con);
?>
</div>
If you don't care about learning how to improve, jump ahead to Step 3 and ignore the rest. I do encourage you to read the whole thing, though!
Step 1: Clean up
This code is a mess and will be a pain to change if you ever need to touch it again. Split it into pieces. First we extract the CSS:
style.css:
.container {
background-color: yellow;
display: inline-table;
float: left;
max-width: 90%;
height: auto;
text-align: top;
left: 0;
right: 0;
margin: auto;
position: absolute;
}
.container table {
max-width: 0;
border: 1px #000 solid;
border-collapse: collapse;
}
.container table td {
padding: 5px;
}
template.php:
<div class="container">
<table>
<tr>
<th>Data</th>
<th>Agent</th>
<th>Product</th>
<th>Quantity</th>
</tr>
<?php foreach ($tableEntries as $row): ?>
<tr>
<td><?php echo $row['data'] ?></td>
<td><?php echo $row['agent'] ?></td>
<td><?php echo $row['product'] ?></td>
<td><?php echo $row['qty'] ?></td>
</tr>
<?php endforeach ?>
</table>
</div>
index.php:
<?php
$agent = $_COOKIE['user'];
$server = "*******";
$user = "*******";
$pass = "*******";
$baza = "balkandi_order";
$con = mysqli_connect($server, $user, $pass, $baza) or die("conexiune nereusita");
$sql= "SELECT * FROM tab_order WHERE agent='$agent'";
$rezultat = mysqli_query($con, $sql);
$tableEntries = array();
while ($row = mysqli_fetch_assoc($rezultat)) {
$tableEntries[] = $row;
}
include("template.php");
Looks much better, doesn't it? Everything has its place now and you can actually see what's happening.
Step 2: Fixing important issues
You are using MySQLi, which is good. But you are not using it correctly. You use a value from a cookie and hand it over directly to your database. That makes your application vulnerable to SQL injection attacks, because anybody can modify a cookie and put malicious code in there. So, let's fix this by using a prepared statement:
index.php:
<?php
// skipping the variable declarations (see above)
$con = mysqli_connect($server, $user, $pass, $baza) or die("conexiune nereusita");
// prepare a statement with a placeholder for the agent variable
$stmt = mysqli_prepare("
SELECT data, agent, product, qty
FROM tab_order
WHERE agent = ?");
// now we set the value for the placeholder
$stmt->bind_param('s', $agent);
$stmt->execute();
$rezultat = $stmt->get_result();
$tableEntries = array();
while ($row = $result->fetch_assoc()) {
$tableEntries[] = $row;
}
include("template.php");
Step 3: Fixing the styling
Now that we have an overview of what you are doing, let's check why your table is aligned differently to what you want. Are you really sure that you need all of these CSS properties? I doubt it. From what I can see, you need almost none of it. But you have not provided any more information an where this is used, what is surrounding it and so on. Therefore, I might be completely wrong here. Anyway, let's adapt the stylesheet:
style.css:
.container {
background-color: yellow;
display: block;
float: left;
max-width: 90%;
margin: auto;
}
.container table {
border: 1px #000 solid;
border-collapse: collapse;
}
.container table td {
padding: 5px;
}
Step 4: Enlightenment
I hope you noticed how much difference it can make to actually take a moment to properly structure an application, even a small one. It allows you to clearly focus on problems rather than dealing with finding the right place to fix something. Also, please take some time to learn more details about the technologies you are using. In your original code there were quite a few incorrect elements like the non-existing HTML attribute max-width. It will make your life a lot easier, if you sit down to learn the basics.
Ok,
try
div {
background-color:yellow;
display:inline-table;
float:left;
max-width:90%;
height:auto;
text-align:top;
left:0;
right:0;
margin:auto;
position:absolute;
}
table th,
table td {
height:200px;
vertical-align: middle;
}
<div>
<table cellpadding="5" cellspacing="0" margin-top="0" max-width="0%" margin="auto" border="1px">
<tr>
<th>Data</th>
<th>Agent</th>
<th>Product</th>
<th>Quantity</th>
</tr>
<tr>
<td>
echo $row['data'];
</td>
<td>
echo $row['agent'];
</td>
<td>
echo $row['product'];
</td>
<td>
echo $row['qty'];
</td>
</tr>
<br>
</table>
</div>
I keep on searching about this but i didn't find an answer..
I want to print my website page, so i used the margin-top and margin-bottom but it only affected the first sheet.. In the second page, there is no margin on top.. is there a way to do this..
Here is the sample image i am talking about.
Here is the code that I am using. Please help.
<style type="text/css">
.printOnly {
margin-top: 75px;
display: none;
page-break-inside: avoid;
}
.textSummaryTable { page-break-inside:avoid;}
.textSummaryTable tr { page-break-inside:avoid; page-break-after:auto }
#media print {
.summaryTable { page-break-inside: avoid; }
.summaryTable tr:nth-child(odd){ background-color:#E1E4E5; }
.summaryTable tr:nth-child(even) { background-color:#ffffff; }
.printOnly {
display: block;
}
.panel {
border: 1px solid transparent;
padding: 2px;
margin: 0;
}
.textSummaryTable{
border:1px solid gray;
page-break-inside: avoid;
}
.textSummaryTable td{
border:1px solid gray;
page-break-inside: avoid;
}
#main {
overflow: hidden;
position: absolute;
padding: 0px;
height: auto;
width: 100%;
}
#title {
display: none;
}
#line-break {
display: block;
}
.textSummaryTable {
width: 100%;
}
}
#media screen {
#line-break {
display: none;
}
}
</style>
<?php
$this->pageTitle = Yii::app()->name . ' - View Evaluation';
$user = LoginForm::getUser();
?>
<?php
$participants = $modelE->evaluationDetails;
?>
<style type="text/css">
#media print {
body {
overflow: hidden;
}
}
</style>
<div class=" non-printable">
<div class='pull-right non-printable'>
<button id="btnPrint" type="button" class="btn btn-default pull-right" onclick="window.print();">
<span class="glyphicon glyphicon-print"></span> Print
</button>
</div>
<?php
$startDate = date("M j, Y", strtotime($modelE->start_date));
$endDate = date("M j, Y", strtotime($modelE->end_date));
?>
</div>
<div id='line-break'>
<br>
<br>
<br>
</div>
<div class="container-fluid">
<div class="printable">
<h4><?php echo htmlentities($modelE->evaluationForm->name); ?></h4>
<h5><?php echo $startDate; ?> - <?php echo $endDate; ?></h5>
<h5>Candidate: <?php echo htmlentities($modelE->evaluatee); ?></h5>
<h5>Overall Evaluation: <?php echo htmlentities($modelE->getResult()); ?></h5>
<h5>Participants: <?php echo htmlentities(count($participants)); ?></h5>
<div class="panel panel-default">
<div class="panel-body">
<h5><strong>Instructions: </strong> <?php echo htmlentities($modelE->evaluationForm->description); ?></h5>
<!-- <h4>Results Summary</h4> -->
<?php
$radioFlag = false;
foreach ($modelE->evaluationForm->evaluationFormDetails as $question) {
$criteria = new CDbCriteria;
$criteria->with = 'evalResult';
$criteria->addInCondition('eval_form_question_id', array($question->id));
$criteria->addInCondition('evalResult.eval_id', array($modelE->id));
$resultSet = EvaluationResultsDetails::model()->findAll($criteria);
if ( strtolower($question->field_type) != "radioheader" && $question->field_type != "slider" ) {
if($radioFlag){
echo "</table>";
$radioFlag = false;
}
if( $question->field_type == "text" ) {
echo "<h4>" . $question->field_name . "</h4>";
}
else {
echo "<table class='textSummaryTable'><tr><td style='width: 100%'><label>" . $question->field_name . "</label></td></tr>";
foreach ($resultSet as $answer) {
echo "<tr><td>" . $answer->eval_answer . "</td></tr>";
}
echo "</table>";
}
} else {
if(!$radioFlag){
echo '<table border-size = 0px width=100% class="summaryTable">';
$radioFlag = true;
}
echo "<tr><td style='width: 90%'>" . $question->field_name . "";
echo "</td><td style='width: 10%'>";
$sum = 0;
$count = 0;
foreach ($resultSet as $answer) {
$count++;
$sum += $answer->eval_answer;
}
echo $count == 0 ? "-" : number_format($sum / $count, 2);
echo "</td></tr>";
/*** end here ***/
}
}
if($radioFlag){
echo "</table>";
}
?>
<table class="printOnly">
<tr>
<td colspan="2">
<p> I hereby certify that all information declared in this document are accurate and true. Each item have been discussed with my Immediate Superior and mutually agreed upon.</p>
</td>
</tr>
<tr>
<td>
<p>Prepared by
<?= $modelE->project->manager->family_name . ", " . $modelE->project->manager->first_name ?>
</p>
Date <?= date("Y-m-d"); ?>
</td>
<td>
<p>Conformed by <?= $modelE->evaluatee ?></p>
Date
</td>
</tr>
<tr>
<td colspan="2">
<p>Noted by HR Division</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>