yebulosij
Reputation: 1
Why does CSS not move content & html from php echos output?
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>
Upvotes: 0
Views: 184
Answers (3)
user7941334
Reputation:
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>
Upvotes: 1
samo0ha
Reputation: 3788
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 .
Upvotes: 0
Johannes
Reputation: 67768
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.
Upvotes: 1