Intento poner este footer siempre abajo con estilos aplicandole a la clase footer.
El footer baja pero mientras mas grande se hace el footer mas arriba se posiciona, y eso es lo que no quiero
Intento poner este footer siempre abajo con estilos aplicandole a la clase footer.
El footer baja pero mientras mas grande se hace el footer mas arriba se posiciona, y eso es lo que no quiero
Intento poner este footer siempre abajo con estilos aplicandole a la clase footer
Intento poner este footer siempre abajo con estilos aplicandole a la clase footer.
El footer baja pero mientras mas grande se hace el footer mas arriba se posiciona, y eso es lo que no quiero
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
footer {
background-color: #0c1a1e;
min-height: 350px;
font-family: 'Open Sans', sans-serif;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
height: 500px
}
.footerleft {
margin-top: 50px;5px;
padding: 0 36px;
}
.logofooter {
margin-bottom: 10px;
font-size: 25px;
color: #fff;
font-weight: 700;
}
.footerleft p {
color: #fff;
font-size: 12px !important;
font-family: 'Open Sans', sans-serif;
margin-bottom: 15px;
}
.footerleft p i {
width: 20px;
color: #999;
}
.paddingtop-bottom {
margin-top: 50px;
}
.footer-ul {
list-style-type: none;
padding-left: 0px;
margin-left: 2px;
}
.footer-ul li {
line-height: 29px;
font-size: 12px;
}
.footer-ul li a {
color: #a0a3a4;
transition: color 0.2s linear 0s, background 0.2s linear 0s;
}
.footer-ul i {
margin-right: 10px;
}
.footer-ul li a:hover {
transition: color 0.2s linear 0s, background 0.2s linear 0s;
color: #ff670f;
}
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.icon-ul {
list-style-type: none !important;
margin: 0px;
padding: 0px;
}
.icon-ul li {
line-height: 75px;
width: 100%;
float: left;
}
.icon {
float: left;
margin-right: 5px;
}
.copyright {
min-height: 40px;
background-color: #000000;
}
.copyright p {
text-align: left;
color: #FFF;
padding: 10px 0;
margin-bottom: 0px;
}
.heading7 {
font-size: 21px;
font-weight: 700;
color: #d9d6d6;
margin-bottom: 22px;
}
.post p {
font-size: 12px;
color: #FFF;
line-height: 20px;
}
.post p span {
display: block;
color: #8f8f8f;
}
.bottom_ul {
list-style-type: none;
float: right;
margin-bottom: 0px;
}
.bottom_ul li {
float: left;
line-height: 40px;
}
.bottom_ul li:after {
content: "/";
color: #FFF;
margin-right: 8px;
margin-left: 8px;
}
.bottom_ul li a {
color: #FFF;
font-size: 12px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 footerleft ">
<div class="logofooter"> Logo</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p><i class="fa fa-map-pin"></i> 210, Aggarwal Tower, Rohini sec 9, New Delhi - 110085, INDIA</p>
<p><i class="fa fa-phone"></i> Phone (India) : +91 9999 878 398</p>
<p><i class="fa fa-envelope"></i> E-mail : [email protected]</p>
</div>
<div class="col-md-2 col-sm-6 paddingtop-bottom">
<h6 class="heading7">GENERAL LINKS</h6>
<ul class="footer-ul">
<li><a href="#"> Career</a></li>
<li><a href="#"> Privacy Policy</a></li>
<li><a href="#"> Terms & Conditions</a></li>
<li><a href="#"> Client Gateway</a></li>
<li><a href="#"> Ranking</a></li>
<li><a href="#"> Case Studies</a></li>
<li><a href="#"> Frequently Ask Questions</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
<h6 class="heading7">LATEST POST</h6>
<div class="post">
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
</div>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-height="300" data-small-header="false" style="margin-bottom:15px;" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--footer start from here-->
<div class="copyright">
<div class="container">
<div class="col-md-6">
<p>© 2016 - All Rights with Webenlance</p>
</div>
<div class="col-md-6">
<ul class="bottom_ul">
<li><a href="#">webenlance.com</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Faq's</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
footer {
background-color: #0c1a1e;
min-height: 350px;
font-family: 'Open Sans', sans-serif;
}
.footerleft {
margin-top: 50px;
padding: 0 36px;
}
.logofooter {
margin-bottom: 10px;
font-size: 25px;
color: #fff;
font-weight: 700;
}
.footerleft p {
color: #fff;
font-size: 12px !important;
font-family: 'Open Sans', sans-serif;
margin-bottom: 15px;
}
.footerleft p i {
width: 20px;
color: #999;
}
.paddingtop-bottom {
margin-top: 50px;
}
.footer-ul {
list-style-type: none;
padding-left: 0px;
margin-left: 2px;
}
.footer-ul li {
line-height: 29px;
font-size: 12px;
}
.footer-ul li a {
color: #a0a3a4;
transition: color 0.2s linear 0s, background 0.2s linear 0s;
}
.footer-ul i {
margin-right: 10px;
}
.footer-ul li a:hover {
transition: color 0.2s linear 0s, background 0.2s linear 0s;
color: #ff670f;
}
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.icon-ul {
list-style-type: none !important;
margin: 0px;
padding: 0px;
}
.icon-ul li {
line-height: 75px;
width: 100%;
float: left;
}
.icon {
float: left;
margin-right: 5px;
}
.copyright {
min-height: 40px;
background-color: #000000;
}
.copyright p {
text-align: left;
color: #FFF;
padding: 10px 0;
margin-bottom: 0px;
}
.heading7 {
font-size: 21px;
font-weight: 700;
color: #d9d6d6;
margin-bottom: 22px;
}
.post p {
font-size: 12px;
color: #FFF;
line-height: 20px;
}
.post p span {
display: block;
color: #8f8f8f;
}
.bottom_ul {
list-style-type: none;
float: right;
margin-bottom: 0px;
}
.bottom_ul li {
float: left;
line-height: 40px;
}
.bottom_ul li:after {
content: "/";
color: #FFF;
margin-right: 8px;
margin-left: 8px;
}
.bottom_ul li a {
color: #FFF;
font-size: 12px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 footerleft ">
<div class="logofooter"> Logo</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p><i class="fa fa-map-pin"></i> 210, Aggarwal Tower, Rohini sec 9, New Delhi - 110085, INDIA</p>
<p><i class="fa fa-phone"></i> Phone (India) : +91 9999 878 398</p>
<p><i class="fa fa-envelope"></i> E-mail : [email protected]</p>
</div>
<div class="col-md-2 col-sm-6 paddingtop-bottom">
<h6 class="heading7">GENERAL LINKS</h6>
<ul class="footer-ul">
<li><a href="#"> Career</a></li>
<li><a href="#"> Privacy Policy</a></li>
<li><a href="#"> Terms & Conditions</a></li>
<li><a href="#"> Client Gateway</a></li>
<li><a href="#"> Ranking</a></li>
<li><a href="#"> Case Studies</a></li>
<li><a href="#"> Frequently Ask Questions</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
<h6 class="heading7">LATEST POST</h6>
<div class="post">
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
</div>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-height="300" data-small-header="false" style="margin-bottom:15px;" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--footer start from here-->
<div class="copyright">
<div class="container">
<div class="col-md-6">
<p>© 2016 - All Rights with Webenlance</p>
</div>
<div class="col-md-6">
<ul class="bottom_ul">
<li><a href="#">webenlance.com</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Faq's</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
footer {
background-color: #0c1a1e;
font-family: 'Open Sans', sans-serif;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
height: 500px
}
.footerleft {
margin-top: 5px;
padding: 0 36px;
}
.logofooter {
margin-bottom: 10px;
font-size: 25px;
color: #fff;
font-weight: 700;
}
.footerleft p {
color: #fff;
font-size: 12px !important;
font-family: 'Open Sans', sans-serif;
margin-bottom: 15px;
}
.footerleft p i {
width: 20px;
color: #999;
}
.paddingtop-bottom {
margin-top: 50px;
}
.footer-ul {
list-style-type: none;
padding-left: 0px;
margin-left: 2px;
}
.footer-ul li {
line-height: 29px;
font-size: 12px;
}
.footer-ul li a {
color: #a0a3a4;
transition: color 0.2s linear 0s, background 0.2s linear 0s;
}
.footer-ul i {
margin-right: 10px;
}
.footer-ul li a:hover {
transition: color 0.2s linear 0s, background 0.2s linear 0s;
color: #ff670f;
}
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.icon-ul {
list-style-type: none !important;
margin: 0px;
padding: 0px;
}
.icon-ul li {
line-height: 75px;
width: 100%;
float: left;
}
.icon {
float: left;
margin-right: 5px;
}
.copyright {
min-height: 40px;
background-color: #000000;
}
.copyright p {
text-align: left;
color: #FFF;
padding: 10px 0;
margin-bottom: 0px;
}
.heading7 {
font-size: 21px;
font-weight: 700;
color: #d9d6d6;
margin-bottom: 22px;
}
.post p {
font-size: 12px;
color: #FFF;
line-height: 20px;
}
.post p span {
display: block;
color: #8f8f8f;
}
.bottom_ul {
list-style-type: none;
float: right;
margin-bottom: 0px;
}
.bottom_ul li {
float: left;
line-height: 40px;
}
.bottom_ul li:after {
content: "/";
color: #FFF;
margin-right: 8px;
margin-left: 8px;
}
.bottom_ul li a {
color: #FFF;
font-size: 12px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 footerleft ">
<div class="logofooter"> Logo</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p><i class="fa fa-map-pin"></i> 210, Aggarwal Tower, Rohini sec 9, New Delhi - 110085, INDIA</p>
<p><i class="fa fa-phone"></i> Phone (India) : +91 9999 878 398</p>
<p><i class="fa fa-envelope"></i> E-mail : [email protected]</p>
</div>
<div class="col-md-2 col-sm-6 paddingtop-bottom">
<h6 class="heading7">GENERAL LINKS</h6>
<ul class="footer-ul">
<li><a href="#"> Career</a></li>
<li><a href="#"> Privacy Policy</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
<h6 class="heading7">LATEST POST</h6>
<div class="post">
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-height="300" data-small-header="false" style="margin-bottom:15px;" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--footer start from here-->
<div class="copyright">
<div class="container">
<div class="col-md-6">
<p>© 2016 - All Rights with Webenlance</p>
</div>
<div class="col-md-6">
<ul class="bottom_ul">
<li><a href="#">webenlance.com</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</div>
</div>
Intento poner este footer siempre abajo con estilos aplicandole a la clase footer
footer(style='position: fixed;\n' +
' left: 0;\n' +
' bottom: 0;\n' +
' width: 100%;\n' +
' background-color: red;\n' +
' color: white;\n' +
' text-align: center; height:300px ')
pero no funciona
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
footer {
background-color: #0c1a1e;
min-height: 350px;
font-family: 'Open Sans', sans-serif;
}
.footerleft {
margin-top: 50px;
padding: 0 36px;
}
.logofooter {
margin-bottom: 10px;
font-size: 25px;
color: #fff;
font-weight: 700;
}
.footerleft p {
color: #fff;
font-size: 12px !important;
font-family: 'Open Sans', sans-serif;
margin-bottom: 15px;
}
.footerleft p i {
width: 20px;
color: #999;
}
.paddingtop-bottom {
margin-top: 50px;
}
.footer-ul {
list-style-type: none;
padding-left: 0px;
margin-left: 2px;
}
.footer-ul li {
line-height: 29px;
font-size: 12px;
}
.footer-ul li a {
color: #a0a3a4;
transition: color 0.2s linear 0s, background 0.2s linear 0s;
}
.footer-ul i {
margin-right: 10px;
}
.footer-ul li a:hover {
transition: color 0.2s linear 0s, background 0.2s linear 0s;
color: #ff670f;
}
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.icon-ul {
list-style-type: none !important;
margin: 0px;
padding: 0px;
}
.icon-ul li {
line-height: 75px;
width: 100%;
float: left;
}
.icon {
float: left;
margin-right: 5px;
}
.copyright {
min-height: 40px;
background-color: #000000;
}
.copyright p {
text-align: left;
color: #FFF;
padding: 10px 0;
margin-bottom: 0px;
}
.heading7 {
font-size: 21px;
font-weight: 700;
color: #d9d6d6;
margin-bottom: 22px;
}
.post p {
font-size: 12px;
color: #FFF;
line-height: 20px;
}
.post p span {
display: block;
color: #8f8f8f;
}
.bottom_ul {
list-style-type: none;
float: right;
margin-bottom: 0px;
}
.bottom_ul li {
float: left;
line-height: 40px;
}
.bottom_ul li:after {
content: "/";
color: #FFF;
margin-right: 8px;
margin-left: 8px;
}
.bottom_ul li a {
color: #FFF;
font-size: 12px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 footerleft ">
<div class="logofooter"> Logo</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<p><i class="fa fa-map-pin"></i> 210, Aggarwal Tower, Rohini sec 9, New Delhi - 110085, INDIA</p>
<p><i class="fa fa-phone"></i> Phone (India) : +91 9999 878 398</p>
<p><i class="fa fa-envelope"></i> E-mail : [email protected]</p>
</div>
<div class="col-md-2 col-sm-6 paddingtop-bottom">
<h6 class="heading7">GENERAL LINKS</h6>
<ul class="footer-ul">
<li><a href="#"> Career</a></li>
<li><a href="#"> Privacy Policy</a></li>
<li><a href="#"> Terms & Conditions</a></li>
<li><a href="#"> Client Gateway</a></li>
<li><a href="#"> Ranking</a></li>
<li><a href="#"> Case Studies</a></li>
<li><a href="#"> Frequently Ask Questions</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
<h6 class="heading7">LATEST POST</h6>
<div class="post">
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
<p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
</div>
</div>
<div class="col-md-3 col-sm-6 paddingtop-bottom">
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-height="300" data-small-header="false" style="margin-bottom:15px;" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--footer start from here-->
<div class="copyright">
<div class="container">
<div class="col-md-6">
<p>© 2016 - All Rights with Webenlance</p>
</div>
<div class="col-md-6">
<ul class="bottom_ul">
<li><a href="#">webenlance.com</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Faq's</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
</div>
</div>