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>
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;
- }