1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Footer

Tema en 'Frameworks' comenzado por Prismática, 26 de Noviembre de 2017.

  1. Prismática

    Prismática Nuevo Miembro

    Se incorporó:
    22 de Febrero de 2016
    Mensajes:
    25
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Mujer
    Localización:
    Colombia
    Hola, tengo un problema con el footer y es que cuando la página no tiene el suficiente contenido, el footer no queda abajo si no que sube, La idea es que siempre este abajo del todo, independientemente de la cantidad de contenido que tenga la página como tal.

    También tengo una duda, no es mucho código para un simple footer? Sobre todo en CSS, bien es cierto que es para una página responsive

    Imagenes:
    [​IMG]

    [​IMG]

    HTML:
    <footer class="footer-basic-centered">

                <p class="footer-company-motto">© 2017 PAGINA.COM</p>

                <p class="footer-links">
                    <a href="#">INICIO</a>
                    ·
                    <a href="#">FACEBOOK</a>
                    ·
                    <a href="#">TWITTER</a>
                    ·
                    <a href="#">PRIVACIDAD</a>  
                </p>

            </footer>
    Código (CSS):
    .footer-basic-centered{
    background: rgba(41,44,47,0.92);
    background: -moz-linear-gradient(45deg, rgba(41,44,47,0.92) 51%, rgba(41,44,47,0.92) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(51%, rgba(41,44,47,0.92)), color-stop(100%, rgba(41,44,47,0.92)));
    background: -webkit-linear-gradient(45deg, rgba(41,44,47,0.92) 51%, rgba(41,44,47,0.92) 100%);
    background: -o-linear-gradient(45deg, rgba(41,44,47,0.92) 51%, rgba(41,44,47,0.92) 100%);
    background: -ms-linear-gradient(45deg, rgba(41,44,47,0.92) 51%, rgba(41,44,47,0.92) 100%);
    background: linear-gradient(45deg, rgba(41,44,47,0.92) 51%, rgba(41,44,47,0.92) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292c2f', endColorstr='#292c2f', GradientType=1 );
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
      box-sizing: border-box;
      width: 100%;
      text-align: center;
      font: normal 18px sans-serif;
      padding: 5px;
      margin-top: 100px;
    }

    .footer-basic-centered .footer-company-motto{

      font-size: 12px;
      font-weight: 100;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #e4ff00;
    }

    .footer-basic-centered .footer-links{
      color:  #ffffff;
      padding: 5px 0 19px;
      margin: 0;
    }

    .footer-basic-centered .footer-links a{
      display:inline-block;
      text-decoration: none;
      color: inherit;
    }

    /* If you don't want the footer to be responsive, remove these media queries */

    @media (max-width: 600px) {

      .footer-basic-centered{
        padding: 35px;
      }

      .footer-basic-centered .footer-company-motto{
        font-size: 18px;
      }

      .footer-basic-centered .footer-company-name{
        font-size: 12px;
      }

      .footer-basic-centered .footer-links{
        font-size: 10px;
        padding: 25px 0 20px;
      }

      .footer-basic-centered .footer-links a{
        line-height: 1.8;
      }
    }
     

Comparte esta página