Quiero hacer un footer como el siguiente
HTML:
CSS:
Lo único que he logrado es que se muestre de la siguiente manera:
Qué propiedades puedo darle para conseguir ese resultado?
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadQuiero hacer un footer como el siguiente
HTML:
CSS:
Lo único que he logrado es que se muestre de la siguiente manera:
Qué propiedades puedo darle para conseguir ese resultado?
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;
}
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>