Elemente überlappen sich

kingethelred

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>&copy; 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

Sempervivum

Häufiges Problem, wenn man ein Element fixiert: Gib dem body ein geeignetes margin-bottom.

Jetzt mitmachen!