I'm working on a php powered site for a musician, part of which involves the ability for him to add upcoming shows to his site through a form. I want a table layout where he can see his upcoming shows, and can choose to add a new one. I tried using a table, but quickly found they don't really work with PHP forms. So I tried to format my form as a table with CSS display properties. That had it not rendering at all, in fact, if you go into the inspector in Chrome,it shows all of the information clearly there, laid out in the HTML, but with no height. I tried manually adding height and width, but to no avail. I tried changing from a form to a div, just to see, and that didn't help either.
.form-table {
width: 100%;
display: table;
font-size: 20px;
}
.admin-table-row {
display: table-row;
width: 100%;
}
.admin-table-cell {
display: table-column;
}
.admin-venue {
width: auto;
text-align: left;
}
.admin-age {
text-align: right;
width: 75px;
}
.admin-date {
text-align: right;
width: 200px;
}
.admin-time {
text-align: right;
width: 100px;
}
.admin-time {
text-align: right;
width: 100px;
}
.admin-edit {
text-align: right;
width: 100px;
}
.admin-delete {
text-align: right;
width: 100px;
}
//echo "<form class='form-table' action='' method='post'>";
echo "<div class='form-table'>";
foreach($stmt as $upcomingShow)
{
$date = date("j F, Y", (strtotime($upcomingShow['date'])));
$time = date("g:i a", (strtotime($upcomingShow['time'])));
echo "<div class='admin-table-row'>";
if(!empty($upcomingShow['link']))
{
echo "<div class='admin-venue admin-table-cell'><a href='" . $upcomingShow['link'] . "' style='text-decoration: none;'>" . $upcomingShow['venue'] . "</a></div>";
}
else
{
echo "<div class='admin-venue admin-table-cell'>" . $upcomingShow['venue'] . "</div>";
}
echo "<div class='admin-age admin-table-cell'>" . $upcomingShow['age'] . "</div>";
echo "<div class='admin-date admin-table-cell'>" . $date . "</div>";
echo "<div class='admin-time admin-table-cell'>" . $time . "</div>";
echo "<div class='admin-edit admin-table-cell'><input name='edit' id='edit' type='submit' value=' Edit ' style='background: none; border: none; padding: 0; font: inherit; cursor: pointer;'></div>";
echo "<div class='admin-delete admin-table-cell'><input name='delete' id='delete' type='submit' value=' Delete ' style='background: none; border: none; padding: 0; font: inherit; cursor: pointer;'></div>";
echo "<input name='show-id' id='show-id' type='hidden' value='" . $upcomingShow['id'] . "'>";
echo "</div>";
}
echo "</div>";
//echo "</form>";
Thanks for all the help. Best, Chris.
Checking your CSS, the issue is in here:
.admin-table-cell {
display: table-column;
}
The display: table-column is not used to specify that the element is a cell, but to specify that the element contains a column of cells; and by definition it is not rendered:
Elements with 'display' set to 'table-column' or 'table-column-group' are not rendered (exactly as if they had 'display: none')
That's why you don't see the contents even after setting a height. What you need to use to specify that the div is a cell, is display: table-cell. Then it will display the content of each cell correctly. This change should fix the issue:
.admin-table-cell {
display: table-cell;
}
Related
As you can see in the picture, there is a box to the right with some text and a lot of white space.
My goal is to have the text under the pictures while I have 3 pictures in a row that are nicely aligned.
When I try this either the pictures aren't aligned anymore or the pictures aren't cropped anymore.
I wanted every picture with the same size and still sharp but, then this issue came up.
#content {
width: 100%;
max-width: 100%;
margin: 20px auto;
}
form {
width: 50%;
margin: 20px auto;
}
form div {
margin-top: 5px;
}
#img_div {
width: 30%;
margin-left: 2%;
margin-right: 1%;
margin-bottom: 3%;
border: 2px solid #d8680c;
float: left;
}
#img_div:after {
content: "";
display: block;
clear: both;
}
img {
float: left;
object-fit: cover;
width: 250px;
height: 250px;
}
#pictext {
word-wrap: break-word;
}
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p id='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
</div>
use class instead of using ID
ID must be unique and when you do the loop there will be some other divs with same ID
add it like this
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div class='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p class='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
make sure to reflect them via JS or JQuery depends on what your are using
idk what's wrong in my script . the button should be styled with the css but all i get is this https://ibb.co/cuwixy
the css
.button {
background-color: #008CBA; /* Blue */
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button5 {border-radius: 50%;}
the button scripted in html table in a php echo
while($row = $result->fetch_assoc()) {
echo "<td><form class='button button5'><input type='button' name='buy' value='buy'/></form></td>";
echo "</tr>";
}
you're putting the class on the form, not the button
try:
while($row = $result->fetch_assoc()) {
echo "<td><form><input type='button' name='buy' value='buy' class='button button5'/></form></td>";
echo "</tr>";
}
I'm still learning, please go gentle with me.
When I run my script everything works except the full formatting with my css. In the snipped of code, I would like the . However, when I have the div in the middle of the , as seen below, when I run the page I have two lines of information. Line one contains the flag image, line two contains my outputted "luchthavencode", underlined as desired.
How would I format the css / php/html code so that they all are contained within one line.
If I move the to before the img, everything is in a line as desired -- it's OK that when you hover over the flag the name comes up, also), it also generates two lines.
echo "<td width='100px' bgcolor='#C6DEFF'><img src='http://globe-trekking.com/vg/img/flags/".$row['countryflag']."'> <div class='top10_luchthaven' data-tooltip=\"".htmlspecialchars($row['luchthavennaam'])."\" >".$row['luchthavencode']."</div></td>";
Using the following css styles
.top10_luchthaven {
position: relative;
border-bottom: .1em dotted;
width:30px;
}
.top10_luchthaven:hover:after {
background: url(http://globe-trekking.com/vg/img/hovercard-bg.png) repeat-x;
border-radius: 5px;
bottom: 5px;
color: #fff;
content: attr(data-tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 400px;
}
.top10_luchthaven:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
with the full table php/html code:
echo "<table width='200px' border='0' cellpadding='2' cellspacing='2'>";
echo "<tbody>";
echo "<tr>";
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>#</strong>";
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>Luchthaven</strong>";
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>No.</strong>";
echo "</tr>";
$line = 1;
while($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td bgcolor='#C6DEFF'>$line</td>";
echo "<td width='100px' bgcolor='#C6DEFF'><img src='http://globe-trekking.com/vg/img/flags/".$row['countryflag']."'> <div class='top10_luchthaven' data-tooltip=\"".htmlspecialchars($row['luchthavennaam'])."\" >".$row['luchthavencode']."</div></td>";
echo "<td width='60px' bgcolor='#C6DEFF'>".$row['sum']."</td>";
echo "</tr>";
$line++;
}
echo "</tbody>";
echo "</table>";
The problem is that divs are block level elements by default, which means they line break, so you need to have CSS that instructs those divs to be inline with the image next to it. Try doing this...
.top10_luchthaven {
display: inline;
}
If that doesn't work, then do display: inline-block instead.
I am making a small chat and I am having issues making the div's appear below each other. This is what I have:
$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>";
echo "<div class='pro_pic'>";
//my image
echo "</div>";
echo "<div class='ChatInfo'>";
//my information
echo "</div>";
echo "</div>";
echo "<br />";
$i++;
}
MY CSS:
div.MyChatholders
{
left: 5px;
color: black;
width: 290px;
height: 100px;
border-radius: 10px;
}
div.pro_pic
{
left: 5px;
width: 30px;
height: 30px;
border: solid black 1px;
}
div.ChatInfo
{
color: black;
font-size: 14px;
left: 40px;
width: 245px;
}
Please note that the (while function) is just to simulate the information drawn from the DBase.
Now my issues is that all the div's are in one position. I would like them to fall below each other. I do not understand why this is happening. Can someone help me with my code and explain why?
I have looked at this solution but it is not working for me Check here
Add position:relative; to your divs.
Working fiddle based on your code: http://jsfiddle.net/MmGyU/1/
Note: Borders in the fiddle are for demonstration purposes.
div.MyChatholders {
position: relative;
left: 5px;
color: black;
width: 290px;
height: 100px;
border-radius: 10px;
}
div.pro_pic {
position:relative;
left: 5px;
width: 30px;
height: 30px;
}
div.ChatInfo {
position:relative;
color: black;
font-size: 14px;
left: 40px;
width: 245px;
}
Make it print your <div> tags to a new line in your loop using \n
$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>\n";
echo "<div class='pro_pic'>\n";
//my image
echo "</div>\n";
echo "<div class='ChatInfo'>\n";
//my information
echo "</div>\n";
echo "</div>\n";
echo "<br />\n";
$i++;
}
EDIT Syntax was wrong, the \n needs to be within quotes
2nd EDIT My mistake, \n is not HTML and it won't work. You could use <br /> instead according to this post
Add clear:both; to your chat divs.
I have a comment system, it works by adding a row to a SQL database. Anyway That works, but then when I echo out the comment div gets all messed up.. Anyway here is the page it is on: http://learntc.net/index.php.
PHP:
while($row = mysql_fetch_array($result))
{
if ($count==1)
{
$bg == "33383C" ;
$count = 0;
}
echo "<div style='background-color: $bg; border: 1px soild silver;' class='comment'>";
echo "<div class='imageAndName'>";
echo "<img src='". $row["image"] ."' class='cPic'/>";
echo "<div class='UserLink'><a href='" . $row["page"] . "'>" . $row["username"] . "</a></div>";
echo "</div>";
echo "<div class='textStuff'>";
echo "<div class='post'>" . $row["comment"] . "</div>";
echo "<div style='color: gray; font-size: 8px'>" . $row["date"] . "</div>";
echo "</div>";
echo "</div>";
$bg = "#282C2F";
$count = $count + 1;
}
CSS:
.comments{
float: right;
padding: 10px;
width: 50%;
border: 1px solid #454D53;
}
.cPic{
width: 60px;
height: 60px;
}
.imageAndName{
width: 30%;
overflow: hidden;
float: left
}
.imageAndName a{
display: block;
}
.textStuff{
width: 70%;
float: right;
}
.post{
overflow: hidden;
width: 100%;
}
.comment{
padding-bottom: 5px;
}
Add clear: both to your .comment style.
Problem one:
$bg == "33383C" ;
should be
$bg = "#33383C";
I don't see anything else. The div is probably screwed up for this reason.