1

Estoy tratando que mi pie de página quede de este modo: pie de pagina

Como podría posicionar correctamente mis elementos? de forma que se adapten a la página si la estiro o la acorto??

adjunto tambien el main de mi página pero este ya lo tengo correctamente configurado, es solo para dar un referencia y cuerpo a la pregunta.

main {
    position: relative;
    margin-top: 6px;
    height: 120%;
    top: 10rem;
    bottom: 5rem;
    height: 100%;
    overflow-y: auto;
}


footer {
    background-color: #ff6600;
    color: #ffffff;
    padding: 12px;
    height: 4rem;
    text-align: center;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 0;
    display: flex;
    justify-content: center;
}

footer a img#logotipo {
    width: auto;
    height: 3rem;
    border: 2px solid black;
    flex: 1;
    align-self: flex-start;
    
}

footer a#up {
    padding-left: 0.6rem;
    padding-right: 1rem;
    background-color: #9e9e9e;
    border-color: #00bcd4 1px solid;
    border-radius: 4px;
    height: 3rem;
    width: 3rem;
    font-size: 3em;
    text-align: center;
    color: #ffffff;
    border: 2px solid black;
}

footer small#date {
    border: 2px solid black;
    flex: 1;
    align-self: flex-end;
}

footer small#empresa {
    font-size: 10px;
    border: 2px solid black;
    flex: 1;
    align-self: flex-end;
}
<html>
<head>
<head>
<body>
<main>
<p>contenido de la web</p>
</main>
<footer>
        <a href="#" alt="up" id="up">^</a>
        <a href="index.html" alt="main"><img src="https://logos.flamingtext.com/Word-Logos/prueba-design-sketch-name.png" alt="logotipo" id="logotipo"></a>
        <small id="date">2021</small>
        <small id="empresa">Empresa</small>
</footer>
<body>
<html>

1 respuesta 1

1

Podrías usar flex

De manera que tenemos tres elementos .flexSection

Al ser tres secciones en el footer, cada uno tiene 33% de width (queda 99%, aproximado a 100%)

Para que se aplique el width y a la vez se vea como inline, le aplicamos inline-block

Podemos obtener cada elemento con .nth-child, es decir, el elemento "n"

selector:nth-child(1)

De esta manera puedes obtener algún elemento específico con un selector específico

Referencia

Al segundo .flexSection, vamos a usar el selector de hijo para obtener un nodo (el elemento <a> dentro de este) y darle display:block para que se tome en cuenta como un párrafo y el <small> se salte a la otra línea

Finalmente, al tercero usamos el mismo selector de hijos, le damos una posición relativa al <small> para que podamos acomodarlo con bottom, con la propiedad bottom la ubicamos hacia abajo

main {
    position: relative;
    margin-top: 6px;
    height: 120%;
    top: 10rem;
    bottom: 5rem;
    height: 100%;
    overflow-y: auto;
}


footer {
    background-color: #ff6600;
    color: #ffffff;
    padding: 12px;
    height: 4rem;
    text-align: center;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 0;
    display: flex;
}

footer a img#logotipo {
    width: auto;
    height: 3rem;
    flex: 1;
    align-self: flex-start;
    
}

footer a#up {
    padding-left: 0.6rem;
    padding-right: 1rem;
    background-color: #9e9e9e;
    height: 3rem;
    width: 3rem;
    font-size: 3em;
    text-align: center;
    color: #ffffff;
}

footer small#date {
    flex: 1;
    align-self: flex-end;
}

footer small#empresa {
    font-size: 10px;
    flex: 1;
    align-self: flex-end;
}

.flexSection {
  width:33%;
}

.flexSection:nth-child(1) {
  display:inline-block;
  text-align:left;
}

.flexSection:nth-child(2) > a {
  display:block;
}

.flexSection:nth-child(3) {
  display:inline-block;
  text-align:right;
}

.flexSection:nth-child(3) > small {
  display:inline-block;
  position:relative;
  bottom:-75%;
}
<html>
<head>
<head>
<body>
<main>
<p>contenido de la web</p>
</main>
<footer>
  <div class="flexSection">
        <a href="#" alt="up" id="up">^</a>
  </div>
  <div class="flexSection">
        <a href="index.html" alt="main"><img src="https://logos.flamingtext.com/Word-Logos/prueba-design-sketch-name.png" alt="logotipo" id="logotipo"></a>
        <small id="date">2021</small>
  </div>
  <div class="flexSection">
        <small id="empresa">Empresa</small>
  </div>
</footer>
<body>
<html>

4
  • si quisiera subir el año un poco más arriba como sería? he probado lo que me has dicho y va perfecto!!! pero por alguna razón el año me sale escondido debajo de la web. He probado usando top para subirlo pero no hace nada creo que choca con el logotipo Commented el 20 feb. 2021 a las 15:18
  • @WinterIsBack La propiedad top no funcionará si no hay una posición relativa, prueba poniéndole position:relative al año y luego con top
    – Rodrigo
    Commented el 20 feb. 2021 a las 15:21
  • mm he probado pero no funciona correctamente, es como que sigue chocando con la caja del logotipo Commented el 20 feb. 2021 a las 15:29
  • @WinterIsBack por favor, entra a esta sala de chat para debatir el problema
    – Rodrigo
    Commented el 20 feb. 2021 a las 15:37

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.