i made a simple page to review a video with some icons, and footer at the bottom. I added footer class bootstrap to it, but i still don't see the footer on the same place in different screens
this is my HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/full.css" type="text/css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
</head>
<body class="full">
<div class="container">
<br>
<p class="text-center" id="paragraph">Please Make Sure Your Sound Is Turned Up! Please wait up to 10 seconds for this video to load. Thank You!</p>
<center>
<div class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item">
<source src="video.mp4" type="video/mp4">
</video>
</div>
<i class="fa fa-facebook-official" aria-hidden="true" id="face"></i>
<i class="fa fa-twitter" aria-hidden="true" id="twitter"></i>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" id="mybutton">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="">
<input type="image" src="images/order.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</center>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
</div>
<div class="footer">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse" id="footer">
<ul class="nav navbar-nav">
<li><a href="disclaimer.htm">Disclaimer</a></li>
<li><a href="earnings.htm">Earnings</a></li>
<li><a href="privacy.htm">Privacy</a></li>
<li><a href="tos.htm">Tos</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</body>
</html>
and this is the CSS :
.full {
background: url('../images/bg2.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#border{
max-height: 400px;
align:center;
border-style: solid;
border-color: #ff0000
}
#paragraph{
font-weight: bold;
font-size: 30px;
color:red;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
#face {
color:#3b5998;
text-shadow: 1px 1px 1px #ccc;
font-size: 2.5em;
}
#twitter {
color:#0084b4;
text-shadow: 1px 1px 1px #ccc;
font-size: 2.5em;
}
The problem that the footer keep change it's place by changing sizes of screens.
Aucun commentaire:
Enregistrer un commentaire