Button und Textbox auf selber Höhe

kingethelred

Hallo ich hab das Problem, dass bei mir der Button versetzt zur Textbox angezeigt wird. Wie kann ich dies beheben?

Hier der Quellcode:

CSS: test

#records{
    margin-top: 123px;
    background-color: aquamarine;
    font-size: 30px;
   
}
#textbox_top{
    
    border-style: solid;
    border-color: olive;
    border-width: 2px;
    
   
    border-radius: 20px;
  font-size:30px;
    
    padding-left: 20px;
    padding-right: 20px;
    
    width:70%;
   
    
    
    }

.radio_button_top{
    
 
}
#whole_area_top{

    
}
#button_area{
   
    border-radius: 20px;
    
    
    background-color: red;
    
    border-width: 2px;
    border-color: blue;
    color: white;
    height:45px;
   
    width: 20%;
}
#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;
}

Alles anzeigen

basti1012

als erstes brauchen wir auch deinen html Code weil ohne den wird es schwer was zu beurteilen können. Wir wissen ja so nicht in welcher reinfolge und wie viele Container du da nutzen tust

kingethelred

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="tablestyle.css"/> 
    <link href="http://allfont.de/allfont.css?fonts=grand-hotel" rel="stylesheet" type="text/css" />
       <script type="text/javascript">
    // var selected = "titel_radio";
       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>
    

<form action="teststart.php"  method="POST">
    
    <input type="text" id="textbox_top" name="textbox_top_php" placeholder="   Ihre Eingabe">
      
        <button id="button_area" type="submit" >Das ist ein Button</button><br>
       
    <label for="radio_button_top">
    <input type="radio" id="titel_radio_button" class="radio_button_top" checked onclick="titel_radio_button_clicked()" name="titel_radio_button_php" value="Titel">Titel
        </label>
        
     
    <input type="radio" id="autor_radio_button" class="radio_button_top" onclick="autor_radio_button_clicked()" name="autor_radio_button_php" value="Autor">Autor
    

</form>
<?php
$db_link = mysqli_connect(); //Connection String
mysqli_set_charset($db_link, "utf8");
$textbox_result=$_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>Titel</th>';
              echo '<th>Autor</th>';
              echo '</tr>';
                  
while ($zeile = mysqli_fetch_array( $db_erg, MYSQL_ASSOC))
{
  echo "<tr>";
  echo "<td>". $zeile['TITEL'] . "</td>";
  echo "<td>". $zeile['AUTOR'] . "</td>";
  echo "</tr>";
}
echo "</table>";
       
   

 
mysqli_free_result( $db_erg );
     }
?>
</body>
</html>

Alles anzeigen

m.scatello

OFFTOPIC

Du hast da einige Mängel in deinem PHP-Code!

Warum schreibst du die $_POST-Variablen auf andere Variablen um?

Schreibe nie "Select *", siehe http://www.php-faq.de/q-sql-select.html

Dein Script ist für XSS-Attacken anfällig, weil du die Variablen ungeprüft an die Datenbank schickst, siehe https://www.php.net/manual/de/mysqli.real-escape-string.php

Deine vier echo's in der Schleife kann man auch zu einem echo zusammenfassen.

basti1012

Ich würde das zwar noch etwas anders machen ,aber jetzt ohne groß in deiner CSS rumspielen zu müssen legst du einfach noch einen Container um die beiden Inputs

https://basti1012.bplaced.net/index.php?ordn…-seminar&id=375

Habe an der CSS nichts geändert , nur den Container ( id="helfer" ) drum herumgelegt

Am besten würde man gleich das alles mit Flex Box machen

djheke

Du könntest auch die Systemschriften nutzen. Wobei font:caption nur für Labels relevant ist.

Code

form input ,
form button {
padding:3px;
border:1px solid #aaa;
border-radius:4px;
font:caption;
}

Jetzt mitmachen!