0

Estoy haciendo una página de un proyecto en la que necesito que haya un pie de página como el que adjuntaré en la imagen (la imagen es un mockup). He intentado poner abajo por mí mismo pero no me ha resultado, siempre queda a un costado y más arriba, no abajo. ¿Me podrían ayudar por favor?, ya he intentado de todo, bueno, casi todo. no son necesarios por ahora los íconos del pie de página, solo que quede abajo y que la información quede distribuida como en el mockup.

<!DOCTYPE html>
<html>


<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <title></title>

    <link rel="stylesheet" type="text/css" href="css/menu.css">

<header>

    <input type="checkbox" name="" id="boton-menu">
    <label for="boton-menu"><img id="ig" src="iconos/menu.png" class="img"><img id="im" src="iconos/menu2.png" class="img">

    </label>

    <img src="iconos/logo.png" id="logo">


    <nav class="menu">

        <ul>

            <li><a href="#" class="a">Inicio</a></li>
            <li><a href="#" class="a">Publicar</a></li>
            <li><a href="#" class="a">Mis avisos</a></li>
            <li><a href="#" class="a">Favoritos</a></li>
            <li id="b"><button id="boton">buscar</button><input type="text" placeholder="Buscar" class="buscar"></li>

        </ul>


    </nav>


</header>


<body>
    <div id="form">
    <form id="formulario">
        <h3>Filtrar por</h3>
        <input type="text" name="sector" placeholder="Ciudad,zona o sector">
        <select name="arriendo" class="select">
            <option value="Compra">Compra</option>
            <option value="Arriendo">Arriendo</option>
        </select><br><br>

        <select name="tipo" class="select">
            <option value="Tipo de inmueble">Tipo de inmueble</option>
        </select>

        <h3>Precio</h3>
        <div class="inputsv"><input type="text" name="minimo" placeholder="Mínimo" class="minmax">
        <input type="text" name="maximo" placeholder="Máximo" class="minmax">
        </div>
        <input type="text" name="estrato" placeholder="Estrato">

        <select name="ordernar" class="select">
            <option value="Ordenar por">Ordenar por</option>
        </select><br><br>
        <input type="text" name="habitaciones" placeholder="Habitaciones">
        <input type="text" name="baños" placeholder="Baños">
        <input type="submit" name="buscar" value="Buscar">
</form>
</div>

<div id="form2">
    <form id="formulario2">

</div>

<div class="general">

<div class="card">
  <div id="img"><img src="imagenes/casas.jpg" alt="Imagen" style="width:100%" class="img"></div>
  <div class="container">
    <h4><b>Apartamento</b></h4> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p> 
    <p><button class="button">Ver</button></p>
  </div>
</div>


<div class="card">
  <div id="img"><img src="imagenes/habitacion.jpg" alt="Imagen" style="width:100%" class="img"></div>
  <div class="container">
    <h4><b>Apartamento</b></h4> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
    <p><button class="button">Ver</button></p>
  </div>
</div>


<div class="card">
  <div id="img"><img src="imagenes/apartamento.jpg" alt="Imagen" style="width:100%" class="img"></div>
  <div class="container">
    <h4><b>Apartamento</b></h4> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
    <p><button class="button">Ver</button></p>
  </div>
</div>


<div class="card">
  <div id="img"><img src="imagenes/apartamento.jpg" alt="Imagen" style="width:100%" class="img"></div>
  <div class="container">
    <h4><b>Apartamento</b></h4> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
    <p><button class="button">Ver</button></p>
  </div>
</div>


<div class="card">
  <div id="img"><img src="imagenes/apartamento.jpg" alt="Imagen" style="width:100%" class="img"></div>
  <div class="container">
    <h4><b>Apartamento</b></h4> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
    <p><button class="button">Ver</button></p>
  </div>
</div>


<div class="card">
  <div id="img"><img src="imagenes/apartamento.jpg" alt="Imagen" style="width:100%" class="img"></div>
  <div class="container">
    <h4><b>Apartamento</b></h4> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p>
    <p><button class="button">Ver</button></p>
  </div>
</div>


<div class="card">
  <div id="img"><img src="imagenes/casas.jpg" alt="Imagen" style="width:100%" class="img"></div>
  <div class="container">
    <h4><b>Apartamento</b></h4> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p> 
    <p><button class="button">Ver</button></p>
  </div>
</div>


<div class="card">
  <div id="img"><img src="imagenes/casas.jpg" alt="Imagen" style="width:100%" class="img"></div>
  <div class="container">
    <h4><b>Apartamento</b></h4> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae varius purus, in ornare lacus. Vivamus eu molestie urna, ut imperdiet justo.</p> 
    <p><button class="button">Ver</button></p>
  </div>
</div>

<div id="footer">
    <footer>
        <p>¿Quiénes somos?</p>
        <p>Contáctanos</p>
        <p>Términos y condiciones</p>
    </footer>
</div>



    </body>
    </html>

        body {
        background-color: #F0F0F1;
    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        width: 280px;

        left: 400px;
        bottom: 380px;
        float: left;
        margin: 15px;


    }

    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    .container {
        padding: 2px 16px;
    }

    #img {
        width: 100%;
    height: 200px;
    }
    .img {
        width: 100%;
    height: 200px;
    }
    .card p {
        word-break: break-all;
    }
    .button{

        margin: 8px;
        display: block;
        width: 25%;
        position: relative;
        background-color: #FF5349;
        color: white;
        font-family: arial;
        padding: 3px;
        border-radius: 15px 15px 15px 15px;
    }

    .general {
        width: 80%;


        float:right;
    bottom: 806px;
        position: relative;

    }

    #form {
        width: 19%;
        height: 800px; 
    }

    @media(max-width:1440px){
        .general {
        width: 70%;

        }

    }

    @media(max-width:549px){



    #form {

        margin-left: -100%;
    }

    .general {
        width: 90%;
        float:left;


    }

    .card {


        width: 100%;

    }

    }

    #formulario {
        float: left;
      width: 300px;
      padding: 30px 30px;
      background-color: #f0f0f1;
      text-align: center;
      border-radius: 5px 0 0 5px;
    }
    #formulario h3 {
        color: #00A49B;
    }

    [type=text] {
      display: block;
      margin: 0 auto;
      width: 80%;
      border: 0;
      border-bottom: 1px solid rgba(0,0,0,.2);
      height: 45px;
      line-height: 45px;  
      margin-bottom: 10px;
      font-size: 1em;
      color: rgba(0,0,0,.4);
    }
    [type='text']:focus {
      outline: none;
      border-color: #00A49B;
    }
    [type=submit] {
      margin-top: 15px;
      width: 30%;
      border: 0;
      background-color: #00A49B;
      border-radius: 5px;
      height: 30px;
      color: white;
      font-weight: 400;
      font-size: 1em;
    }

    .select {
        background: white;
       border: none;
       border-radius: 5px 5px 5px 5px;
       width: 80%;
       height: 45px;
       font-size: 1em;
       padding: 5px;

    }

    .minmax {

        width: 40%;
        float: left;
        margin: 5px;

    }

    .inputsv {
        width: 80%;
        margin: 0 auto;
        display: block;
        padding-left: 27px;
    }

    #footer {
      background-color: #292C44;
      position: absolute;
      display: inline-block;
      bottom: 0;
      width: 100%;
      height: 40px;
      color: white;
    }
2
  • Selecciona el div que se encuentra en el body y prueba a usar en css lo siguiente: position:relative; bottom: 0; left:0; width: 100%
    – alex55132
    Commented el 23 jun. 2018 a las 8:00
  • Desde aqui podemos ver como posicionar el pie de pagina en el pie para Wordpress
    – user163727
    Commented el 26 mar. 2020 a las 19:39

2 respuestas 2

2

Copias pegas el código.

<footer  style="width:100%; margin-left: 0px;"  >


<div class="copyright" style="background-color: #0d47a1;">
    <div class="container-fluid" style="background-color: #0d47a1; color: #bbdefb;">
        ©  Copyright: 

    </div>
</div>

css

html {
  min-height: 100%;
  position: relative;
}
body {
  margin: 0;
  margin-bottom: 10px;
}
footer {
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: white;
}

espero te sirva Bendiciones.

1
  • si te funciono ponla como correcta Bendiciones.
    – Carlos
    Commented el 25 jun. 2018 a las 4:14
0

Para conseguir lo que quieres tienes que quitar position:absolute, que no es recomendable para diseños responsive, y poner clear:both. No se te pone abajo porque el elemento anterior tiene float:left para que se floten los siguientes elementos, y con clear:both lo que haces es limpiar el float en ambos lados del footer, de esa forma lo tendrás abajo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.