I am inserting and retrieving data from MySQL, posting it to the screen but all entries but the first one are outside the area of my document! Here's the php/html:
<?php
require_once "functions.php";
echo "<!DOCTYPE html><html><head>" .
"<title>Add Glossary Terms: Yadah and the Hunter</title>" .
"<link rel='stylesheet' type='text/css' href='ex_col.css'>" .
"<link rel='stylesheet' type='text/css' href='styles.css'>";
if (isset($_POST['delete']) && isset($_POST['id']))
{
$id = get_post($conn, 'id');
$query = "DELETE FROM glossary WHERE def='$id'";
$result = $conn->query($query);
if (!$result) echo "DELETE failed: $query<br>" .
$conn->error . "<br><br>";
}
if (isset($_POST['term']) &&
isset($_POST['pronoun']) &&
isset($_POST['def']))
{
$term = get_post($conn, 'term');
$pronoun = get_post($conn, 'pronoun');
$def = get_post($conn, 'def');
$query = "INSERT INTO glossary VALUES" .
"('', '$term', '$pronoun', '$def')";
$result = $conn->query($query);
if (!$result) echo "INSERT failed: $query<br>" .
$conn->error . "<br><br>";
}
echo "</head><main><h1>Add Entries</h1>";
echo <<<_END
<form action="add_entries.php" method="post">
<pre>
<b>Term:</b> <input type="text" name="term">
<b>Pronounciation:</b> <input type="text" name="pronoun"><br>
<b>Definition:</b> <textarea name="def"></textarea><br>
<input type="submit" value="ADD GLOSSARY TERM">
</pre></form>
_END;
$query = "SELECT * FROM glossary";
$result = $conn->query($query);
if (!$result) die ("Database access failed: " . $conn->error);
$rows = $result->num_rows;
for ($j = 0 ; $j < $rows ; $j++)
{
$result->data_seek($j);
$row = $result->fetch_array(MYSQLI_NUM);
echo <<<_END
<p>
<b>Term $row[0]</b><br><br>
<b>$row[1]</b><br></div>
<b>$row[2]</b><br>
<div class="indent">$row[3]</div>
<form action="add_entries.php" method="post">
<input type="hidden" name="delete" value="yes">
<input type="hidden" name="id" value="$row[0]">
<input type="submit" value="DELETE RECORD"></form> <br>
</p>
<section>
<h3>Yadah and the Hunter: Add Entries</h3>
</section>
</main>
_END;
}
$result->close();
$conn->close();
function get_post($conn, $var)
{
return $conn->real_escape_string($_POST[$var]);
}
?>
<a href="ex_col.php">View Glossary</a>
</body>
</html>
and the css:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: "Open Sans", Arial;
background: #CCC;
}
main {
background: #EEE;
width: 600px;
margin: 20px auto;
padding: 10px;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
h1 {
text-align: center;
}
h3 {
text-align: center;
/*border-top: 1px solid #CCC;*/
}
form {
position:left;
}
p {
font-size: 13px;
}
.indent {
text-indent: 10px;
}
.input {
display: none;
visibility: hidden;
}
.term {
text-align: left;
padding:10px 10px 0px 10px;
}
#form {
padding: 0px 10px;
}
a {
text-align:center;
}
label {
display: block;
padding: 0.5em;
text-align: center;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
color: #666;
}
label:hover {
color: #000;
}
/*#def {
width: 500px;
padding:10px;
clear:both;
}*/
pre {
display:block;
}
label::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
/* background: url(http://placekitten.com/g/600/300); */
color: #000;
}
section {
padding: 0 20px;
}
#toggle:checked ~ #expand {
height: 250px;
}
#toggle:checked ~ label::before {
content: "-";
}
How can i get terms 2 and on to appear directly underneath term one in the section??? i cant figure out where the problem is! Thanks
