0

Quiero hacer un footer como el siguiente

introducir la descripción de la imagen aquí

HTML:

introducir la descripción de la imagen aquí

CSS:

introducir la descripción de la imagen aquí

Lo único que he logrado es que se muestre de la siguiente manera: introducir la descripción de la imagen aquí

Qué propiedades puedo darle para conseguir ese resultado?

2
  • Para publicar consultas lo mas correcto es que publiques codigo y no imagenes, para que lo tengas en cuenta
    – AugustoM
    el 11 may. 2022 a las 22:40
  • Al footer aplicale un width: 100%, display: flex y justify-content: space between, y para alinear verticalmente align-items: center;
    – LexxCh
    el 12 may. 2022 a las 1:23

2 respuestas 2

0

Puedes usar la propiedad float entonces

<p class="copyright">
Primer parrafo
</p>

<p class="companyname">
Nombre de la compania
</p>

Y aplicas un float a la izquierda y el otro de la derecha, tambien puedes usar flex y usar space between, pero float te quedaria asi

.copyright {
  float: left;
}

.companyname {
  float: right;
}
0

Yo también tengo una manera de diseñar el footer. Lo de @AugustoM está muy bien, pero hay que llevar en cuenta que en el footer puede estar varias etiquetas para varios contenidos.

Preparé esté ejemplo para varios contenidos, o solamente para dos p.

Éste ejemplo es simplemente para los dos p centrado en el footer:

* {
 box-sizing: border-box;
}

body {
 margin: 0;
 padding-top: 1000px; /* solo demo*/
 font-size: 16px;
 font-family: sans-serif;
 background-color: whitesmoke
}

footer {
 display: flex;
 justify-content: center;
 background-color: #333132;
 /*height: 18px;*/
 padding: .50rem 1rem;
}

footer p {
 color: #BBBBBB;
 align-self: center;
 font-family: "Palanquin Dark";
 font-size: 1rem;
 margin: 0 .50rem;
 background-color: grey
}
<html>

 <body>
  
  <footer>
  
<p>©2022 Elemento 1</p>
<p>Elemento 2</p>
   
  </footer>
  
 </body>

</html>

Este otro ejemplo sería en caso de que haya varios elementos en el footer, y lo cual yo recomiendo que se use esta forma de diseño o estructura de los contenidos.

En el footer hay dos contenidos: .copiright y img. Estos dos elementos se puede poner en el lado que quieras: y no necesariamente con la imagen.

Si se elimina la imagen, el elemento .copiright se puede acomodar en el lado que guste:

margin: auto; /* centrado */
margin-left: 0; /* a la izquierda */
margin-right: 0; /* a la derecha */

Ahora lo importante de la pregunta: alinear paralelamente los dos p. Para esto, los p deben estar en un contenedor padre, lo cual es .copiright. Éste contenedor padre debe ser display: flex para poder acomodar los hijos (p) a gusto, en este caso sin esfuerzo, con el padre con flex.

Sin encerrar los párrafos en un contenedor, sería difícil acomodar otros contenidos en el footer.

Los colores son para diferenciar, y los padding para estilizar. El resto del código es necesario para estea demo, y para lograr el resultado.

* {
 box-sizing: border-box;
}

body {
 margin: 0;
 padding-top: 1000px; /* solo demo*/
 font-size: 16px;
 font-family: sans-serif;
 background-color: whitesmoke
}

footer {
 display: flex;
 justify-content: center;
 background-color: #333132;
 height: ;
 padding: .50rem 1rem;
}

footer .copiright {
 display: inline-flex;
 align-items: center;
 padding: .50rem;
 max-width: 50%;
 margin: auto;
 margin-left: 0;
 background-color: lightgreen;
}

footer .copiright p {
 color: #BBBBBB;
 align-self: center;
 font-family: "Palanquin Dark";
 font-size: 1rem;
 margin: 0 .50rem;
 background-color: grey
}

footer img {
 display: inline-block;
 margin: auto;
 margin-right: 0;
 width: 100px;
 height: auto;
}
<html>

 <footer>
   
   <div class="copiright">
<p>©2022 Elemento 1</p>
<p>Elemento 2</p>
   </div>
   
   <img src="https://placeimg.com/640/480/any">
   
  </footer>

</html>

1
  • Recuerda aceptar a la pregunta que te resultó útil con el ✓ para cerrar tu pregunta y no quede pendiente, y para que esto sirva a otros que busquen lo mismo. el 12 may. 2022 a las 1:20

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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