Под моим нижним колонтитулом на веб-странице, над которой я работаю, кажется, что есть дополнительный раздел (почти другой div, который является синей областью), который появляется под ним.Любое руководство о том, как избавиться от него и какой код даже включил его?
1-й раздел кода взят со страницы signup.php:
<body>
<main>
<div class="wrapper-main">
<section class="section-default">
<h1 class="h1-signup-title">Signup</h1>
<?php
// Here we create an error message if the user made an error trying to sign up.
if (isset($_GET["error"])) {
if ($_GET["error"] == "emptyfields") {
echo '<p class="signuperror">Fill in all fields!</p>';
}
else if ($_GET["error"] == "invaliduidmail") {
echo '<p class="signuperror">Invalid username and email!</p>';
}
else if ($_GET["error"] == "invaliduid") {
echo '<p class="signuperror">Invalid username!</p>';
}
else if ($_GET["error"] == "invalidmail") {
echo '<p class="signuperror">Invalid email!</p>';
}
else if ($_GET["error"] == "passwordcheck") {
echo '<p class="signuperror">Your passwords do not match!</p>';
}
else if ($_GET["error"] == "usertaken") {
echo '<p class="signuperror">Username is already taken!</p>';
}
}
// Here we create a success message if the new user was created.
else if (isset($_GET["signup"])) {
if ($_GET["signup"] == "success") {
echo '<p class="signupsuccess">Signup successful!</p>';
}
}
?>
<form class="form-signup" action="includes/signup.inc.php" method="post">
<?php
// Here we check if the user already tried submitting data.
// We check username.
if (!empty($_GET["uid"])) {
echo '<input type="text" name="uid" placeholder="Username" value="'.$_GET["uid"].'">';
}
else {
echo '<input type="text" name="uid" placeholder="Username">';
}
// We check e-mail.
if (!empty($_GET["mail"])) {
echo '<input type="text" name="mail" placeholder="Email" value="'.$_GET["mail"].'">';
}
else {
echo '<input type="text" name="mail" placeholder="Email">';
}
?>
<input type="password" name="pwd" placeholder="Password">
<input type="password" name="pwd-repeat" placeholder="Repeat password">
<button type="submit" name="signup-submit">Signup</button>
</form>
<!--Here we create the form which starts the password recovery process!-->
<?php
if (isset($_GET["newpwd"])) {
if ($_GET["newpwd"] == "passwordupdated") {
echo '<p class="signupsuccess">Your password has been reset!</p>';
}
}
?>
<a class="p-forgetpwd" href="reset-password.php">Forgot your password?</a>
</section>
</div>
</main>
</body>
</html>
<?php
require "footer.php";
?>
2-й раздел кода взят из кода footer.php:
<hr class="my-0 border-white">
<footer class="site-footer d-flex justify-content-center">
<section class="social-links py-3 text-center">
<ul class="list-inline">
<li class="list-inline-item"><a href="https://www.facebook.com" class="fa fa-facebook" target="_blank"></a></li>
<li class="list-inline-item"><a href="https://twitter.com" class="fa fa-twitter" target="_blank"></a></li>
<li class="list-inline-item"><a href="https://www.pinterest.co.uk" class="fa fa-pinterest" target="_blank"></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com" class="fa fa-instagram" target="_blank"></a></li>
</ul>
<span> © iStudy 2018</span>
</section>
</footer>
ОБНОВЛЕНИЕ: CSS, который связывается с кодом страницы signup.php:
.wrapper-main {
width: 900px;
margin: 0 auto;
}
.section-default {
width: 100%;
padding: 20px;
border-radius: 6px;
background-color: #FFF;
}
.h1-signup-title { /* For the signup form page */
text-align: center;
font-size: 26px;
font-family: arial;
color: black;
}
.form-signup {
margin: 0 auto;
padding-top: 20px;
width: 200px;
}
.form-signup input {
width: calc(100% - 30px);
height: 30px;
padding: 0 15px;
margin-bottom: 6px;
border: 1px solid #CCC;
border-radius: 4px;
background-color: #F6F6F6;
float: left;
font-family: arial;
}
.form-signup button {
display: block;
height: 40px;
padding: 0 10px;
margin: 0 auto;
border: none;
border-radius: 4px;
background-color: #333;
font-family: arial;
font-size: 13px;
color: #FFF;
text-transform: uppercase;
text-align: center;
}
main {
padding-top: 20px;
}
.wrapper-main {
width: 900px;
margin: 0 auto;
}