Guten Tag ich hab das Problem, dass ich eine Mysql Tabelle in PHP dynamisch anzeigen lasse und der Footer überlappt den untersten Eintrag, wie kann man dieses Problem beheben?
PHP
<!DOCTYPE html>
<html>
<head>
<title>Titel</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="style_katalog.css"/>
<link href="http://allfont.de/allfont.css?fonts=grand-hotel" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function titel_radio_button_clicked(){
document.getElementById('titel_radio_button').checked = true;
document.getElementById('autor_radio_button').checked = false;
}
function autor_radio_button_clicked(){
document.getElementById('titel_radio_button').checked = false;
document.getElementById('autor_radio_button').checked = true;
}
</script>
</head>
<body>
<header>
<div id="menu_alignment">
<nav>
<ul>
<li><a href="index.php">Startseite</a></li>
<li><a href="katalog.php">Bücher-Katalog</a></li>
<li><a href="galerie.php">Galerie</a></li>
</ul>
</nav>
</div>
</header>
<form action="katalog.php" method="POST">
<div id="cont">
<input type="text" id="textbox_top" name="textbox_top_php" placeholder=" Ihre Eingabe">
<button id="button_area" type="submit" >Anfrage absenden!</button><br>
</div>
<input type="radio" id="titel_radio_button" class="radio_button_top" checked onclick="titel_radio_button_clicked()" name="titel_radio_button_php" value="Titel">
<label for="titel_radio_button">Titel-Suche</label>
<input type="radio" id="autor_radio_button" class="radio_button_top" onclick="autor_radio_button_clicked()" name="autor_radio_button_php" value="Autor">
<label for="autor_radio_button">Autor-Suche</label>
</form>
<?php
$db_link = mysqli_connect(); //Connection String
mysqli_set_charset($db_link, "utf8");
$textbox_result= mysqli_real_escape_string($db_link, $_POST["textbox_top_php"]);//Übergebener Wert der Textbox
$if_titel_radio_button_selected= "`TITEL`";//Falls der Titel_Radiobutton ausgewählt ist, dann wird dieser String in die DB-Abfrage implementiert
$if_autor_radio_button_selected="`AUTOR`";//Falls der Autor_Radiobutton ausgewählt ist, dann wird dieser String in die DB-Abfrage implementiert
$radio_result="";//Hier wird entweder der String von $if_titel_radio_button_selected oder der String von $if_autor_radio_button_selected eingetragen
$titel_r_button=$_POST["titel_radio_button_php"];//Erhaltener Wert vom Titel_Radiobutton
$autor_r_button=$_POST["autor_radio_button_php"];//Erhaltener Wert vom Autor_Radiobutton
if ($titel_r_button=="Titel" and $autor_r_button=="") {
$radio_result=$if_titel_radio_button_selected;
}
else {
$radio_result=$if_autor_radio_button_selected;
}
if ($textbox_result!="") {
$sql = "SELECT * FROM mytable WHERE ".$radio_result." LIKE '%{$textbox_result}%'";
$db_erg = mysqli_query( $db_link, $sql );
if ( ! $db_erg )
{
die('Ungültige Abfrage: ' . mysqli_error());
}
echo '<table border="1" width="100%" id="records">';
echo '<tr>';
echo '<th id="cell-record" align="center">Titel</th>';
echo '<th id="cell-record" align="center">Autor</th>';
echo '</tr>';
while ($zeile = mysqli_fetch_array( $db_erg, MYSQL_ASSOC))
{
echo "<tr>";
echo '<td id="cell-record" align="center">'. $zeile['TITEL'] . "</td>";
echo '<td id="cell-record" align="center">'. $zeile['AUTOR'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_free_result( $db_erg );
}
?>
<footer>
<p>© René Pusch 2019</p>
<a href="impressum.php">Impressum</a>
</footer>
</body>
</html>
Alles anzeigen
CSS
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600');
#records{
margin-top:0;
background-color: aquamarine;
font-size: 30px;
border:1px solid black;
border-collapse: collapse;
padding-bottom: 40px;
height: 50px;
}
#cell-record{
border:1px solid black;
}
#textbox_top{
border-style: solid;
border-color: olive;
border-width: 2px;
border-radius: 10px;
font-size:30px;
padding-left: 20px;
padding-right: 20px;
width:80%;
margin-top: 25;
margin-left: 10px;
}
#whole_area_top{
}
#button_area{
border-radius: 10px;
background-color: red;
border-width: 2px;
border-color: blue;
color: white;
height:45px;
width: 20%;
font-weight: bold;
font-size: 20px;
margin-left: 10px;
margin-top:25;
margin-right: 10px;
}
#button_area:hover{
background-color: green;
}
#textbox_top::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #CCCCCC;
font-family: 'Grand Hotel';
font-size: 30px;
font-weight: bold;
}
#textbox_top:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #CCCCCC;
opacity: 1;
font-family:'Grand Hotel';
font-size: 30px;
font-weight: bold;
}
#textbox_top::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #CCCCCC;
opacity: 1;
font-family: 'Grand Hotel';
font-size: 30px;
font-weight: bold;
}
#textbox_top:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #CCCCCC;
font-family: 'Grand Hotel';
font-size: 30px;
font-weight: bold;
}
#textbox_top::-ms-input-placeholder { /* Microsoft Edge */
color: #CCCCCC;
font-family: 'Grand Hotel';
font-size: 30px;
font-weight: bold;
}
#textbox_top::placeholder { /* Most modern browsers support this now. */
color: #CCCCCC;
font-family: 'Grand Hotel';
font-size: 30px;
font-weight: bold;
}
label {
font-size: 20px;
margin-left:35px;
text-align: center;
}
#cont{
display:flex;
}
body {
margin: 0;
background: #FFF;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
#menu_alignment {
width: 80%;
margin: 0 auto;
}
header {
background: #FFF;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
footer{
position: fixed;
clear: both;
text-align: center;
padding:5px;
background-color: coral;
color: black;
bottom: 0;
width: 100%;
}
footer p{
font-size: 12pt;
font-weight: bold;
font-family: monospace;
text-shadow: gray 1px 1px 2px;
}
footer a{
text-decoration: none;
color:black;
cursor: pointer;
}
footer a:hover{
color:red;
}
input[type="radio"]:checked + label{
color: red;
border-style: solid;
border-width:2px;
border-color:black;
}
input[type="radio"]{
display: none;
}
input[type="radio"]:hover + label{
}
}
input[type="radio"] + label{
padding-top: 20px;
}
tr:nth-child(odd) {
background: red;
}
tr:nth-child(even) {
background: blue;
}
Alles anzeigen