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.
Related
I'm trying to create a square, created of smaller red and blue squares. The problem is, when i want to use something wierd happens, every new line is off by 20 px.
<style>
.box{
background-color: red;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.box1{
background-color: blue;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
</style>
<?php
for($a=0;$a<4;$a++){
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
}
?>
How it looks like
Using relative position is the problem. Use display:inline-block instead.
Also you can accomplish this only using 2 for loops.
<style>
.box{
background-color: red;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
display: inline-block;
}
.box1{
background-color: blue;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
display: inline-block;
}
</style>
<?php
for($a=0;$a<8;$a++){
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
}
?>
The proper way to break float is to use clear style attribute. For example add this to your styles:
br{
clear:both;
}
<br /> will now reset the float of the divs after it, so the next ones will be in new line.
Example in here.
Please note that class attribute should be in quotes, your code is not a valid HTML. To make it valid use one of these:
echo "<div class='box'> </div>";
or
echo '<div class="box"> </div>';
From my point of view you have to add one main div as like below code and have to add float left and width to 100%;
<style>
.box{
background-color: red;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.box1{
background-color: blue;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.main {
float:left;
width:100%;
}
</style>
<?php
for($a=0;$a<4;$a++){
echo "<div class='main'>";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "</div>";
echo "<br />";
echo "<div class='main'>";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "</div>";
echo "<br />";
}
?>
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
I got some strange problems with my php-code
when I try to output this echo "<div class='button menu' onclick=\"javascript:location.href='$baseURI'\">Menu</div>";
sometimes it don´t load the css, even not the div -tags, just the plain "Menu" string
and it´s always printed before my table -tags
how is this possible?
PHP-Code:
<?php
$root_dir = $_SERVER['PHP_SELF'];
echo "<link rel='stylesheet' href='style.css' type='text/css'>";
if (!isset($_GET['command'])) {
echo "<div class='button' onclick=\"javascript:location.href='$baseURI?command=show'\">Personaldaten anzeigen</div>";
//echo "<div class='button' onclick=\"javascript:location.href='$baseURI?command=new'\">neue Person anlegen</div>";
//echo "<div class='button' onclick=\"javascript:location.href='$baseURI?command=work'\">Personaldaten bearbeiten</div>";
} else {
if ($_GET['command'] == "show") {
openSQL();
$sqlbefehl = 'select * from kontakt';
#mysql_query("SET NAMES 'utf8'");
$ergebnis = #mysql_query($sqlbefehl); // SQL-Befehl an die Datenbank schicken
$spalten = #mysql_num_fields($ergebnis);
echo "<table class='style'>";
echo "<tr>";
for ($i = 0; $i < $spalten; $i++) {
echo "<th class='th'>" . mysql_field_name($ergebnis, $i) . "</th>";
}
echo "</tr>";
while (false != ($row = mysql_fetch_row($ergebnis))) {
echo "<tr>";
for ($i = 0; $i < sizeof($row); $i++) {
echo "<td>$row[$i]</td>";
}
echo "</tr>";
}
echo "</table";
}
echo "<div class='button menu' onclick=\"javascript:location.href='$baseURI'\">Menu</div>";
}
function openSQL()
{
$server = "127.0.0.1";
$user = "root";
$passwort = "";
$db = "schule";
$dblink = #mysql_connect($server, $user, $passwort);
if (!#mysql_select_db($db)) {
echo "<br>Keine Verbindung zur Datenbank $db möglich!";
echo "<br>" . mysql_error();
die();
}
}
?>
CSS-Code:
body{
font-family: Verdana;
color: #fff;
background-color: #000;
}
.style{
border-collapse: collapse;
text-align: center;
}
.style table,.style th,.style td {
border: 1px solid white;
}
.style td {
overflow: hidden;
font-size: 12px;
}
.button{
height: 68px;
width: 200px;
border: 3px orange solid;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 5px;
vertical-align: center;
font-size: 24px;
margin-top: 15px;
background-color: #000;
}
.menu{
height: 36px;
width: 75px;
}
.delBtn{
height: 36px;
width: 95px;
}
.del{
background-image: url(del.png);
background-repeat: no-repeat;
width:24px;
height: 24px;
background-size: 25px 25px;
}
.edit{
background-image: url(edit.png);
background-repeat: no-repeat;
background-position: center;
width:24px;
height: 24px;
background-size: 40px 40px;
}
So Im answering my own Question. It was the missing ">" at the closing table-tag. Since I fixed the missing character, the code now work properly.
Thanks for all of your effort <3
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;
}
Hello i am following this tutorial to make a php calendar
http://www.youtube.com/watch?v=l76uglZBjpk
I have three files
show_calendar.php
<!DOCTYPE html>
<html>
<head>
<link href="calCss.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<?php include ("calendar_start.php"); ?>
</body>
</html>
calendar start.php
<?php
//$showmonth = $_POST['showmonth'];
//$showyear = $_POST['showyear'];
$showmonth = 11;
$showyear = 2012;
$day_count = cal_days_in_month(CAL_GREGORIAN, $showmonth, $showyear);
$pre_days = date('w', mktime(0,0,0, $showmonth, 1, $showyear));
$post_days = (6 - (date('w', mktime(0,0,0, $showmonth, $day_count,$showyear))));
echo '<div id="calendar_wrap">';
echo '<div class="title_bar">';
echo '<div class="previous_month"></div>';
echo 'div class="show_month">' . $showmonth . '/' . $showyear . '</div>';
echo '<div class="next_month"></div>';
echo '</div>';
echo '<div class="week_days">';
echo '<div class="days_of_the_week">Sun</div>';
echo '<div class="days_of_the_week">Mon</div>';
echo '<div class="days_of_the_week">Tue</div>';
echo '<div class="days_of_the_week">Wed</div>';
echo '<div class="days_of_the_week">Thur</div>';
echo '<div class="days_of_the_week">Fri</div>';
echo '<div class="days_of_the_week">Sat</div>';
echo '<div class="clear"></div>';
echo '</div>';
/* Previous Month Filler Days */
if ($pre_days != 0) {
for($i = 1 ; $i<=$pre_days;$i++) {
echo '<div class="non_cal_day"></div>';
}
}
/* Current Month */
for($i=1; $i<= $day_count; $i++) {
echo '<div class="cal_day">';
echo '<div class="day_heading">' . $i . '</div>';
echo '</div>';
}
/* Next Month Filler Days */
if ($post_days != 0) {
for ($i=1; $i<=$post_days; $i++) {
echo '<div class="non_cal_day"></div>';
}
}
echo '</div>';
?>
and the css file calCss.css
#calendar_wrap {
width: 924px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.title_bar {
width: 100%;
height: 30px;
}
.previous_month {
float: left;
width: 308px;
height: 30px;
text-align: left;
}
.show_month {
float: left;
width: 308px;
height: 30px;
text-align: center;
}
.next_month {
float: left;
width: 308px;
height: 30px;
text-align: right;
}
.week_days {
width: 100%;
}
.days_of_week {
float: left;
width: 14%;
text-align: center;
}
.cal_day {
position: relative;
float: left;
margin-right: 4px;
margin-bottom: 4px;
width: 128px;
height: 95px;
background-color: #9C9;
}
.day_heading {
position: relative;
float: left;
width: 40px;
height: 16px;
padding: 6px;
color: #000;
font-family: Arial;
font-size: 14px;
}
.openings {
width: 100%;
clear:left;
text-align: center;
}
.non_cal_day {
position: relative;
float: left;
margin-right: 4px;
margin-bottom: 4px;
width: 128px;
height: 95px;
background-color: #CCC;
}
.clear {
clear: both;
}
my problem is show_calendar.php is not showing any css only text of the days of teh week and numbers in the month. Im not sure what i could be doing wrong, does anyone have any ideas? Im using xampp local server to view the php file. Thanks
I see just one small mistake:
you forgot one < here:
echo 'div class="show_month">' . $showmonth . '/' . $showyear . '</div>';
I tested it like that and works fine for me..
If you are using an IDE like ( dreamweaver ) for example , make sure that you set the Web URL for your localhost to (localhost/myProject) not (localhost/myProject/index.php) .. because it sometimes makes error , reaching the css directory .. I had that error , and that fixed it , hope it works for you :)
I've checked everything and found no reason why this shouldn't work. Probably your css file could not be loaded. You should check what you browser console says.
This is how you can debug this problem:
start the script in your browser
press shift + strg + j to start the developer tools (this shortcut works vor Forefox and Chrome f12 if you got IE)
select 'console'
check if there is an a loading error for your css
If you're on windows then the second problem source could be hidden file extensions. Maybe your filename isn't calCss.css but calCss.css.txt or simmilar. This is only a guess but I had this type of problem before. If it applies to your problem this is how you can display hidden file extensions