So my footer is overlapping with the bottom bits of my div. I have included an image. I don't understand what I am doing wrong. I tried to play around with the height values but it isn't working. What am I doing wrong? check here
here are my values for the background div, the form div and the footer
.hero{
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.4)), url('4.jpg');
min-height:800px;
background-position: center;
background-size: cover;
overflow:hidden;
position: relative;
}
.form{
margin: 10px 25%;
width:50%;
position: absolute;
border:2px solid black;
padding:20px;border-radius: 25px;
background:silver;
opacity: 0.8;
}
.footer{
left:0px;
width:100%;
height:100px;
background:pink;
position: fixed;
bottom: 0;
}
Btw my footer is inside the div hero.. Div hero acts as the container div
here is my html code:
<!DOCTYPE html>
<html>
<?php
$db = mysqli_connect("localhost", "root", "", "therapy");
SESSION_START();
if (isset($_POST['upload'])) {
$first= mysql_real_escape_string($_POST['name']);
$last= mysql_real_escape_string($_POST['name1']);
$country= mysql_real_escape_string($_POST['country']);
$city= mysql_real_escape_string($_POST['city']);
$age= mysql_real_escape_string($_POST['age']);
$username=$_SESSION['username'];
$sql= "UPDATE `userinfo` SET `FirstName`='$first',`LastName`='$last',`Country`='$country',`City`='$city',`Age`='$age' WHERE `Username`='$username'";
$result= mysqli_query($db,$sql);
$_SESSION['username']= $username;
if($result)
{
echo $_SESSION['message']= " You submitted ";
header("Location: profile2.php");
}
else
{
echo $_SESSION['message'] = "wrong information";
}
}
?>
<style>
.dp{
border-style: solid;
border-radius: 200px;
border-color: black; height: 200px; width:200px;
overflow-y: hidden; overflow-x:hidden; margin-left:35%;
}
@media (max-width:700px){
.dp{
float:left;
margin-left:10%;
height: 150px; width:150px;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="hero">
<div class="nav-bar">
<div class="nav-log">
<img src="handshake.png" style="width: 105px;
height:100px;">
</div>
<div class="nav-links">
<ul style="margin-left:50px; display: inline;">
<a href=""><li>HOME</li></a>
<a href=""><li>ABOUT</li></a>
</ul>
<button type="button" class="btn">SIGN UP</button>
</div>
</div>
<div class="form" style="margin: 10px 25%; width:50%; position: absolute; border:2px solid black; padding:20px;border-radius: 25px; background:silver; opacity: 0.8; ">
<div class="dp" style="">
<?php
error_reporting(E_ALL & ~E_NOTICE);
$pic=$_SESSION['image'];
echo "<img src='images/".$pic."' >";
?>
</div>
<br>
<div class="form-group">
<form class="forms" method="POST" action="profile.php" enctype="multipart/form-data">
<label for="exampleInputEmail1">Name:</label>
<input type="text" class="form-control" name="name" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="inlineFormInputGroup">Country:</label>
<input type="text" class="form-control" name="country" id="inlineFormInputGroup" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">City:</label>
<input type="text" class="form-control" name="city" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Age: </label>
<input type="number" class="form-control" name="age" id="exampleInputPassword1" placeholder="Confirm Password">
</div>
<br>
<button type="submit" class="btn btn-primary" name="register_btn">Submit</button>
</br>
</form>
</div>
<div class="footer">
<center>
<div class="contact">
<p style="padding-top:10px;"> <b>FOLLOW US ON</b> </p><br><div class="social" style=" display: inline;">
<img src="fb.png" style="width:30px; height:30px;">
<img src="instagram.png" style="width:30px; height:30px;"></div>
</div>
</center>
</div>
</div>
</body>
</html>