Hello im really confuzed in the HTML and CSS language i have maked a footer and some div elements in the body so when i scroll up the footer doesnt is alwaus visible when i scroll down the button is hovering the footer and also the other div element i have this code and please some one explain me why this happens, and how do i make when the page is zoomed by the browser to be zoomed correctly and that two buttons in the top right corrner to not coming in the left while you zooming..
Copy and Paste the code to test it to see what i mean thanks :)
<html>
<head>
<div class="headerr">
<header>
<a class="upstrey_logo" href="index.php">Upstrey.com</a>
<input class="rBtn" type="submit" value="Register" />
<input class="sBtn" type="submit" value="Sign In" />
<input class="search-box" type="search" name="search-box"/>
</header>
</div>
</head>
<body>
<style>
body {
opacity: 0.93;
margin-left: 10%;
margin-right: 10%;
color: black;
font-family: sans-serif;
visibility: inherit;
overflow: auto;
background-color: white;
min-height:100%;
border-radius: 20px;
text-shadow: 50%;
font-size:100%;
line-height:1.125em;
-webkit-text-size-adjust: auto;
}
input.status-box {
opacity:1;
border-radius:9px;
width: 450px;
height: 100px;
background-color: #E6FFFF;
border: 1px solid gray;
}
div.updated-box {
opacity:1;
position: relative;
border-radius:4px;
background-color: #E6FFFF;
border: 1px solid gray;
}
div.headerr {
opacity: 1;
position: fixed;
width:100%;
height:53px;
vertical-align: middle;
background-color: #E6FF8F;
border: 0px solid gray;
right: 0px;
left: 0px;
top: 0%;
-webkit-text-size-adjust: none;
-webkit-box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.47);
-moz-box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.47);
box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.47);
}
input.pBtn {
opacity:1;
position: relative;
border-radius: 9px;
width:100px;
height:35px;
right: 35%;
background-color: #E6FF8F;
border: 1px solid gray;
cursor: pointer;
}
input.sBtn {
opacity: 0.5;
position: fixed;
border-radius:2px;
margin-left: 6px;
margin-right: 6px;
width:100px;
height:35px;
right: 110px;
top: 0px;
background-color: #E6FF8F;
border: 1px solid green;
text-size-adjust: none;
cursor: pointer;
}
input.rBtn {
opacity: 0.5;
position: fixed;
border-radius:2px;
width:100px;
margin-left: 6px;
margin-right: 6px;
height:35px;
float: left;
right: 0px;
top: 0px;
background-color: gray;
border: 1px solid gray;
text-size-adjust: none;
cursor: pointer;
}
a.upstrey_logo {
opacity: 1;
position: fixed;
font-size: 20px;
font-family: sans-serif;
text-decoration:none;
color: #00af90;
left: 2%;
top: 15px;
cursor: pointer;
text-size-adjust: none;
}
input.search-box {
opacity: 0.5;
position: fixed;
width:450px;
height:35px;
border-radius:4px;
top: 9px;
left: 150px;
background-color: #E6FFFF;
border: 1px solid gray;
}
</style>
<form style="top: 60px; position: fixed; cursor: pointer; font-family: sans-serif;">
<a style="text-decoration:none; color: black;" href="#">Top News</a><br>
<a style="text-decoration:none; color: black;" target="_blank" href="http://google.com">Write Post</a><br>
<a style="text-decoration:none; color: black;" target="_blank" href="http://google.com">Profile</a><br>
<a style="text-decoration:none; color: black;" target="_blank" href="http://google.com">Your Posts</a>
</form>
<center>
<br><br><br>
<div style="border-radius:8px; margin-left: 20%; margin-right: 25%; width:500px; height:180px; background-color:white; border:3px solid gray;"><br>
<form action="index.php" method="POST" name="update_status_form">
<input class="status-box" type="text" name="status-box" placeholder="What you thinking of ?"></input><br><br>
<input class="pBtn" type="submit" value="Post" />
</form>
<?php
$date = date('H:m:s');
if(isset($_POST['status-box'])) {
$update = htmlentities($_POST['status-box']);
echo "
<br><br>
<div class='updated-box' />
<br><br><a>$update</a><hr>
Posted on: $date
</div>";
}
?>
</div>
</center>
</body>
</html>
