0

The php is loaded from another page using require_once();. What the php does is echo some text onto the page once a form is submitted. (not below) The CSS is on this same page. The margin, width background-color and padding declarations do work, but top, and text align do not. Why is this?

<?php
    $connection = @mysqli_connect("localhost","root","","R");
    if($connection->connect_error){//show error if not connection failed
        die("Connection failed: " . $connection->connect_error);
    }
    $sql="SELECT username FROM userinfo WHERE username LIKE '%" . $_POST['search'] . "%';";
    $res=$connection->query($sql);
    while($row=$res->fetch_assoc()){
        echo "<div class='results'><center> Username: " . $row['username'] . "</center></div>";
    }
    mysqli_close($connection);
?>

CSS

.results {
  position: relative;
  top: 55%;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #36393E;
  width: 20%;
  text-align: center;
  padding-bottom: 30px;
  padding-top: 10px;
}

If I've posted this in the wrong place or incorrectly formatted my title, please forgive me. I can delete or restate the question. I can also add all the code if needed. Thank you so much

Edit

The entire html code

<!DOCTYPE HTML>
<head>
<?php
require_once('phpsearchcode.php');
?>
<style>
.results {
  position: relative;
  top: 55% !important;
  margin-bottom: 0px;
  background-color: #36393E;
  width: 20%;
  text-align: center !important;
  padding-bottom: 30px;
  padding-top: 10px;
}
a {
  text-decoration: none;
  color: #C4C4C4;
}
#logo {
  top:40%;
  position: absolute;
  right: 33%;
}
html,body {
  background-color: #282C35;
  color: white;
  margin: 0px;
}
input {
  background-color: #282C35;
}
#rat {
  background-color: white !important;
  border: 0px;
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  right:30%;
  padding: 20px;
}
#bug {
  border: 0px;
  background-color: white;
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  padding: 20px;
  width:350px;
}

</style>
<title>
  RS search
</title>
</head>
<body>
<center>
  <img src="rs.png" id="logo"/><br />
  <form action="search.php" method="post">
    <input type="text" name="search" id="bug">
    <input type="submit" name="submit" value="search" id="rat">
  </form>
</center>
</body>
</html>
yebulosij
  • 1
  • 2

3 Answers3

1

1.) Your <div class='results'> is (by CSS definition) 20% wide. The text-centering happens inside these 20%, the DIV itself most likely will remain left-aligned, which all in all won't look like a centered text. You might want to erase that 20% width.

2.) The top: 55% needs a defined height for its parent container in order to become effective.

Johannes
  • 53,485
  • 15
  • 52
  • 104
1

The other users already told you what doesn't quite fit. I would contribute with some suggestions and code too.

  • Use the object oriented mysqli. I recommend to use PDO though.
  • Use prepared statements to avoid SQL injection. Read this too.
  • Add the proper "meta" tags, followed by the "title tag right after them.
  • No content output should be found inside the html "head" part. It belongs to the "body" part.
  • Forget the <center> tag and use only the "text-align: center" (+ "position: relative" if needed) css rule instead. Read Centering in CSS: A Complete Guide.
  • Require "phpsearchcode.php" on top of the "search.php" code.
  • In the "phpsearchcode.php" fetch all data into an array ($results) and close the result, the statement and, eventually, the connection right after. Then you will loop through the $results array in the search.php html code. By doing this you avoid mixing database fetching code with the html output code (as you did). Principle: Fetch data above, but display the results down under. So to say. This way you are also avoiding printing html tags from PHP (using "echo" or similar).
  • Add a container ("results-container") to hold the results rows. So that you can position the container as a whole where you wish (by maybe applying "top: 55%" and "width: 20%" rules to it - instead of it's content rows). The content rows themself should become only "padding", "margin" and "text-align: center" rules. The "text-align: center" will apply to the text inside the "results" div.

Good luck.

phpsearchcode.php

<?php

// Db configs.
define('HOST', 'localhost');
define('PORT', 3306);
define('DATABASE', 'R');
define('USERNAME', 'root');
define('PASSWORD', '');

/*
 * Error reporting.
 * 
 * @link http://php.net/manual/en/function.error-reporting.php
 * @link http://php.net/manual/en/function.set-error-handler.php
 * @link http://php.net/manual/en/function.set-exception-handler.php
 * @link http://php.net/manual/en/function.register-shutdown-function.php
 */
error_reporting(E_ALL);
ini_set('display_errors', 1); // SET IT TO 0 ON A LIVE SERVER!

if (isset($_POST['search'])) {
    /*
     * Enable internal report functions. This enables the exception handling, 
     * e.g. mysqli will not throw PHP warnings anymore, but mysqli exceptions 
     * (mysqli_sql_exception). They are catched in the try-catch block.
     * 
     * MYSQLI_REPORT_ERROR: Report errors from mysqli function calls.
     * MYSQLI_REPORT_STRICT: Throw a mysqli_sql_exception for errors instead of warnings. 
     */
    $mysqliDriver = new mysqli_driver();
    $mysqliDriver->report_mode = (MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);

    /*
     * Create a new db connection.
     * 
     * @see http://php.net/manual/en/mysqli.construct.php
     */
    $connection = new mysqli(HOST, USERNAME, PASSWORD, DATABASE, PORT);

    // Get submitted values.
    $search = '%' . $_POST['search'] . '%';

    /*
     * The SQL statement to be prepared. Notice the so-called markers, 
     * e.g. the "?" signs. They will be replaced later with the 
     * corresponding values when using mysqli_stmt::bind_param.
     * 
     * @link http://php.net/manual/en/mysqli.prepare.php
     */
    $sql = 'SELECT username 
            FROM userinfo 
            WHERE username LIKE ?';

    /*
     * Prepare the SQL statement for execution - ONLY ONCE.
     * 
     * @link http://php.net/manual/en/mysqli.prepare.php
     */
    $statement = $connection->prepare($sql);

    /*
     * Bind variables for the parameter markers (?) in the 
     * SQL statement that was passed to prepare(). The first 
     * argument of bind_param() is a string that contains one 
     * or more characters which specify the types for the 
     * corresponding bind variables.
     * 
     * @link http://php.net/manual/en/mysqli-stmt.bind-param.php
     */
    $statement->bind_param('s', $search);

    /*
     * Execute the prepared SQL statement.
     * When executed any parameter markers which exist will 
     * automatically be replaced with the appropriate data.
     * 
     * @link http://php.net/manual/en/mysqli-stmt.execute.php
     */
    $executed = $statement->execute();

    /*
     * Get the result set from the prepared statement.
     * 
     * NOTA BENE:
     * Available only with mysqlnd ("MySQL Native Driver")! If this 
     * is not installed, then uncomment "extension=php_mysqli_mysqlnd.dll" in 
     * PHP config file (php.ini) and restart web server (I assume Apache) and 
     * mysql service. Or use the following functions instead:
     * mysqli_stmt::store_result + mysqli_stmt::bind_result + mysqli_stmt::fetch.
     * 
     * @link http://php.net/manual/en/mysqli-stmt.get-result.php
     * @link https://stackoverflow.com/questions/8321096/call-to-undefined-method-mysqli-stmtget-result
     */
    $result = $statement->get_result();

    /*
     * Fetch data and save it into an array - to be looped through in the later html code.
     * 
     * 
     * @link http://php.net/manual/en/mysqli-result.fetch-all.php
     */
    $results = $result->fetch_all(MYSQLI_ASSOC);

    /*
     * Free the memory associated with the result. You should 
     * always free your result when it is not needed anymore.
     * 
     * @link http://php.net/manual/en/mysqli-result.free.php
     */
    $result->close();

    /*
     * Close the prepared statement. It also deallocates the statement handle.
     * If the statement has pending or unread results, it cancels them 
     * so that the next query can be executed.
     * 
     * @link http://php.net/manual/en/mysqli-stmt.close.php
     */
    $statement->close();

    /*
     * Close the previously opened database connection.
     * 
     * @link http://php.net/manual/en/mysqli.close.php
     */
    $connection->close();
}

search.php

<?php
require_once('phpsearchcode.php');
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>RS search</title>

        <style type="text/css">
            /**************/
            /* Base rules */
            /**************/

            html,body {
                background-color: #282C35;
                color: white;
                margin: 0px;
            }

            a {
                text-decoration: none;
                color: #C4C4C4;
            }

            input {
                background-color: #282C35;
            }

            /****************/
            /* Layout rules */
            /****************/

            .results-container {
                /* ... */
            }

            .results {
                background-color: #36393E;
                width: 20%;
                text-align: center;
                padding-bottom: 30px;
                padding-top: 10px;
            }

            #logo {
                top:40%;
                position: absolute;
                right: 33%;
            }

            #rat {
                background-color: white !important;
                border: 0px;
                transform: translate(-50%,-50%);
                position: absolute;
                top: 50%;
                right:30%;
                padding: 20px;
            }

            #bug {
                border: 0px;
                background-color: white;
                transform: translate(-50%,-50%);
                position: absolute;
                top: 50%;
                padding: 20px;
                width:350px;
            }
        </style>
    </head>
    <body>

        <img src="rs.png" id="logo"/><br />

        <form action="search.php" method="post">
            <input type="text" name="search" id="bug">
            <input type="submit" name="submit" value="search" id="rat">
        </form>

        <?php
        if (isset($_POST['search'])) {
            ?>
            <h3>
                Results list
            </h3>

            <div class="results-container">
                <?php
                if (isset($results) && $results) {
                    foreach ($results as $row) {
                        $username = $row['username'];
                        ?>
                        <div class="results">
                            <?php echo $username; ?>
                        </div>
                        <?php
                    }
                } else {
                    ?>
                    <div class="noresults">
                        No users found!
                    </div>
                    <?php
                }
                ?>
            </div>
            <?php
        }
        ?>

    </body>
</html>
0

since you print the output on top of all html elements so .results doesn't have a parent element to be relative to it . so change the position to absolute and define the top and left values

.results {
  position: absolute;
  top: 55%;
  left: 40%;
  margin-bottom: 0px;
  background-color: #36393E;
  width: 20%;
  text-align: center;
  padding-bottom: 30px;
  padding-top: 30px;
}

and avoid using <center> element as it is not supported in html 5 .

samehanwar
  • 1,739
  • 2
  • 9
  • 18