Footer gives different results on Code Snippet (CodePen) and Angular

Footer gives different results on Code Snippet (CodePen) and Angular - html

So I wanted my footer to cover the entire length of the page and stick to the bottom of the page, getting pushed down if some content gets added, what happened is, on codepen everything works perfectly, on Angular (14), it does not cover the length of the page, instead, it leaves some space on the left, right and bottom and I don't know why I will attach the code
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
body {
/* fonto e grandezza font*/
line-height: 1;
font-family: 'Poppins', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* tiene il footer esteso evitando gli spazi sui lati */
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
/* flex: 1 0 auto; */
flex-direction: column;
}
.footer {
flex-shrink: 0;
}
.container {
width: 100%;
margin: 0 auto;
}
.row {
/*si occupa delle righe, accomoda lo spostamento dell'elenco con il dimensionamento della pagina */
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
.footer {
/* solamente il colore di background del footer e lo spazio tra gli elementi */
background-color: #24262b;
padding: 20px 0;
}
.footer-col {
/* si occupa delle colonne e del loro ridimensionamento */
width: 25%;
padding: 0;
}
.footer-col h4 {
/*stabilisco la grandezza del font e del colore dei titoli */
font-size: 25px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
/* barra rossa sotto ai titoli */
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
/* spazio tra le scritte in verticale */
}
.footer-col ul li a {
/* stato degli elementi dell'elenco pre-hover, potete notare che dispongo qui "transition" cioè il tempo che ci metterà a passare allo stato dell'hover dal suo stato normale e viceversa */
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
/* colore e leggero spostamento quando avviene l'hover (cioè quando ci passa sopra il mouse) */
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
/* stesso meccaniscmo dei font, qui però inserisco il background-color per il cambiamento del color (color -> background-color)*/
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
.content {
display: block;
padding: 10px;
margin: 15px auto;
text-align: center;
font: 25px Georgia, "Times New Roman", Times, serif;
font-size: 14px;
width: 300px;
display: flex;
}
.foot {
display: inline;
line-height: 70px;
}
/* dove si trova il logo, lo inizializzo con un filtro grigio e una transizione di 0.6, uso webkit per la scala di grigio (e anche la transizione solo per webkit), la scala di grigio viene usata perché rende il contrasto con l'hover molto più bello */
.content img {
height: 150px;
width: 150px;
float: left;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease-in-out;
transition: 0.6s;
}
/* hover del logo */
.content img:hover {
filter: invert(400%);
filter: brightness(4);
-webkit-filter: grayscale(-100);
-webkit-transform: scale(1.10);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/src/app/footer/footer.component.css">
<!--import css footer-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<!--parte footer dell'html-->
<!--parte footer dell'html-->
<div class="content">
<div>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
</div>
<div>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
</div>
<div>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
</div>
<div>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
</div>
</div>
<footer class="footer">
<div class="flex-wrapper">
<div class="container">
<div class="row">
<div class="footer-col">
<div class="content">
<a href="#">
<!--i link da collegare vanno dove sono presenti gli #-->
<img src="https://i.imgur.com/1yvwx9I.png">
</a>
</div>
</div>
<div class="footer-col">
<h4>Azienda</h4>
<!--titolo-->
<ul>
<li>Chi Siamo</li>
<!--elenco degli elementi-->
<li>Contattaci</li>
<li>Placeholder</li>
<li>PlaceHolder</li>
</ul>
</div>
<div class="footer-col">
<h4>Aiuto</h4>
<ul>
<li>FAQ</li>
<li>Consegne</li>
<li>Reso</li>
<li>Informatica privacy</li>
</ul>
</div>
<div class="footer-col">
<h4>Seguici su</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i>
<!--icone dei social-->
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
and the image of the problem (please don't mind the random text, it was for testing)
OH! And also I tried setting right left and bottom at 0 but to no avail.

I didn't exactly get what problem you are facing based on the current version of your question. However, I assume that it is regarding space below your footer and content when you have less content.
Since, you are making the body of the html a flex, you can simply add a justification to accommodate a space in between content and footer by:
body {
...
justify-content: space-between;
}
If you are concerned about the space on left and right, may be there is some margin defined somewhere which I cannot see on this snippet.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* fonto e grandezza font*/
line-height: 1;
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* tiene il footer esteso evitando gli spazi sui lati */
html,
body {
height: 100%;
}
.content {
/* flex: 1 0 auto; */
flex-direction: column;
}
.footer {
flex-shrink: 0;
}
.container {
width: 100%;
margin: 0 auto;
}
.row {
/*si occupa delle righe, accomoda lo spostamento dell'elenco con il dimensionamento della pagina */
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
.footer {
/* solamente il colore di background del footer e lo spazio tra gli elementi */
background-color: #24262b;
padding: 20px 0;
}
.footer-col {
/* si occupa delle colonne e del loro ridimensionamento */
width: 25%;
padding: 0;
}
.footer-col h4 {
/*stabilisco la grandezza del font e del colore dei titoli */
font-size: 25px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
/* barra rossa sotto ai titoli */
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
/* spazio tra le scritte in verticale */
}
.footer-col ul li a {
/* stato degli elementi dell'elenco pre-hover, potete notare che dispongo qui "transition" cioè il tempo che ci metterà a passare allo stato dell'hover dal suo stato normale e viceversa */
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
/* colore e leggero spostamento quando avviene l'hover (cioè quando ci passa sopra il mouse) */
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
/* stesso meccaniscmo dei font, qui però inserisco il background-color per il cambiamento del color (color -> background-color)*/
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
.content {
padding: 10px;
margin: 15px auto;
text-align: center;
font: 25px Georgia, "Times New Roman", Times, serif;
font-size: 14px;
width: 300px;
display: flex;
}
/* dove si trova il logo, lo inizializzo con un filtro grigio e una transizione di 0.6, uso webkit per la scala di grigio (e anche la transizione solo per webkit), la scala di grigio viene usata perché rende il contrasto con l'hover molto più bello */
.content img {
height: 150px;
width: 150px;
float: left;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease-in-out;
transition: 0.6s;
}
/* hover del logo */
.content img:hover {
filter: invert(400%);
filter: brightness(4);
-webkit-filter: grayscale(-100);
-webkit-transform: scale(1.10);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/src/app/footer/footer.component.css">
<!--import css footer-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<!--parte footer dell'html-->
<!--parte footer dell'html-->
<div class="content">
<div>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
</div>
<div>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
</div>
<div>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
</div>
<div>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
<h1>Heelo</h1>
</div>
</div>
<footer class="footer">
<div class="flex-wrapper">
<div class="container">
<div class="row">
<div class="footer-col">
<div class="content">
<a href="#">
<!--i link da collegare vanno dove sono presenti gli #-->
<img src="https://i.imgur.com/1yvwx9I.png">
</a>
</div>
</div>
<div class="footer-col">
<h4>Azienda</h4>
<!--titolo-->
<ul>
<li>Chi Siamo</li>
<!--elenco degli elementi-->
<li>Contattaci</li>
<li>Placeholder</li>
<li>PlaceHolder</li>
</ul>
</div>
<div class="footer-col">
<h4>Aiuto</h4>
<ul>
<li>FAQ</li>
<li>Consegne</li>
<li>Reso</li>
<li>Informatica privacy</li>
</ul>
</div>
<div class="footer-col">
<h4>Seguici su</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i>
<!--icone dei social-->
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>

Related

How to place an icon next to text and centering a header

I am trying to get an icon to be placed to the left of the text as in the image. Right now for some reason it is on top of the text. The icon are inside tabs with text and I want the icons to change for each tab. Even if I change the margins, they do not move.
Senconly, I have an image and text in the header and it looks fine in google chrome but when I change browsers they pile to the left. They are currently placed in the center by adjusting the margins but maybe a flex display or grid will make them look centered in every browser and be cleaner? could I do this?
Thanks
<header>
<div class="container_header">
<img ID="foto_perfil" src="iconos/perfil.png" alt="Foto de perfil">
<h1 class="Nombre">Daniela Sucunza</h1>
<p class="titulo">Licenciada en Administración</p>
<p class="titulo">Programadora Front End</p>
</div>
</main>
</header>
<body>
<script src="function.js"></script>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Acerca')">Acerca de mi</button>
<button class="tablinks" onclick="openCity(event, 'Experiencia')">Experiencia</button>
<button class="tablinks" onclick="openCity(event, 'Educacion')">Educación</button>
<button class="tablinks" onclick="openCity(event, 'Habilidades')">Habilidades</button>
</div>
<div id="demo">
<div id="Acerca" class="tabcontent" style=display:block>
<i class="fa-regular fa-user"></i>
<p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Profesional ambicioso y con formación en recursos humanos, que busca un puesto de principiante en el que pueda utilizar mejor mis habilidades y mi pasión.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Ambicioso y capaz de trabajar independientemente o en equipo. Comprometido a establecer y mantener un ambiente de trabajo positivo para todos los empleados.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Como esta área complementa mis estudios, estoy ansioso por adquirir más experiencia en este campo. Por esta razón, estoy buscando una compañía dispuesta a ofrecerme una ubicación entre sus desarrolladores. A cambio, ofrecería mi todo compromiso y sería una adición agradable y amigable para su equipo.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Por lo tanto, actualmente estoy buscando un trabajo o una pasantía como un front-end desarrollador.</p></p>
</div>
<div id="Experiencia" class="tabcontent" style=display:none>
<p><h3>Asistente de Recursos Humanos</h3>
Noviembre, 2015- Octubre, 2020<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Creación de un registro de cumplimiento para uso de la gerencia cada mes.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Asistencia en el mantenimiento de todos los archivos en papel para el departamento de RRHH.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Apoyo en la creación de documentación para todos los nuevos empleados, y siguió creando archivos conforme al protocolo de RRHH.<br>
<h3>Asistente de Recepción<br></h3>
Julio 2013- Junio 2015<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Apoyo en la actualización de toda la información de beneficios, a la vez que ampliaba los conocimientos relacionados con los beneficios para los empleados.<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Conducta profesional, agradable y trabajadora en el día a día.</p>
</div>
<div id="Educacion" class="tabcontent" style=display:none>
<p> <h3>Licenciatura en Recusos Humanos</h3>
Febrero 2009 - Octubre, 2013<br>
Graduado magna cum laude. Escritor principal de la revista universitaria El León.<br>
<h3>Master en Ciencia Datos</h3>
Febrero 2015- Octubre, 2017<br>
Universidad Nacional
</p>
</div>
<div id="Habilidades" class="tabcontent" style=display:none>
<h3>Habilidades</h3>
<p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Ingles Avanzado<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Portugues Intermedio<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">SQL <br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Power BI <br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Photoshop<br>
<img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Python</p>
</div>
</div>
</body>
<footer>
</footer>
</html>
:root{
--primario: #E8F3D6;
--Oscuro: #A0E4CB;
--blanco: #fff;
--Negro: #000;
--FuentePrincipal: 'Jost', sans-serif;
--FuenteTitulo: 'DM Serif Display', serif;
}
/*GENERALES*/
html {
box-sizing: border-box;
}
body{
background-color: white;
color: black;
margin: auto;
}
/* HEADER*/
#foto_perfil{
border-radius: 100px;
float: left;
width:170px;
height:170px;
margin-left: 470px;
margin-right: 70px;
margin-top: 15px;
opacity: 1.0;
}
#foto_perfil:hover {
opacity: 0.7;
}
.container_header {
top: 0%;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: left;
width: 100%;
height: 200px;
background: var(--primario);
}
.Nombre{
font-family: var(--FuenteTitulo);
font-weight:200;
margin-right: 1rem;
color: black;
font-size: 35px;
padding-top: 25px;
}
.titulo{
font-family: var(--FuentePrincipal);
margin-right: 1rem;
font-size: 20px;
font-weight: bold;
font-style: italic;
}
#demo {
font-family: var(--FuentePrincipal);
line-height: 35px;
margin-top: 1rem;
font-size: large;
text-align: justify;
margin-left: 25rem;
margin-right: 10rem;
white-space: wrap;
}
/* button*/
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.tab button {
text-align: center;
background-color: inherit;
float: center;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
float: center;
text-decoration: none;
width: 22%;
margin-top: 1rem;
margin-left: 2rem;
filter: drop-shadow(0px 4px 4p
x rgba(0, 0, 0, 0.15));
border-radius: 8px;;
background-color: white;
color: black;
border: 2px solid var(--primario);
}
.tab button:hover {
background-color: var(--Oscuro);
color: black;
border: 2px solid var(--Oscuro)
}
.tab button.active {
background-color: #A0E4CB;
}
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
#-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
/* ICONOS*/
img {
width: 15px;
height:15px;
}
/*TABS*/
h3{
font-weight: bolder;
font-style: italic;
}
/* FOOTER*/
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: var(--primario);
/** margin-top: 2rem;**/
}
.fa-brands {
color: var(--Negro);
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: center;
text-decoration: none;
padding: 16px 32px;
margin: 15px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-regular{
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: right;
text-decoration: none;
padding: 16px 32px;
margin-right: 0% ;
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
current page
model- expected outcome
modifying margins, adding display.grid, display-flex

Yes flex will do. I've added flex to the header and all of the tabs.
function openCity(event, city) {
const tabs = document.querySelectorAll(".tabcontent")
tabs.forEach(tab => tab.style['display'] = 'none')
document.getElementById(city).style['display'] = 'flex';
}
:root {
--primario: #E8F3D6;
--Oscuro: #A0E4CB;
--blanco: #fff;
--Negro: #000;
--FuentePrincipal: 'Jost', sans-serif;
--FuenteTitulo: 'DM Serif Display', serif;
}
/*GENERALES*/
html {
box-sizing: border-box;
}
body {
background-color: white;
color: black;
margin: auto;
}
/* HEADER*/
#foto_perfil {
border-radius: 100px;
width: 170px;
height: 170px;
margin-left: 470px;
margin-right: 70px;
margin-top: 15px;
opacity: 1.0;
}
#foto_perfil:hover {
opacity: 0.7;
}
.container_header {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
width: 100%;
height: 200px;
background: var(--primario);
}
.Nombre {
font-family: var(--FuenteTitulo);
font-weight: 200;
margin-right: 1rem;
color: black;
font-size: 35px;
padding-top: 25px;
}
.titulo {
font-family: var(--FuentePrincipal);
margin-right: 1rem;
font-size: 20px;
font-weight: bold;
font-style: italic;
}
#demo {
font-family: var(--FuentePrincipal);
line-height: 35px;
margin-top: 1rem;
font-size: large;
text-align: justify;
margin-left: 25rem;
margin-right: 10rem;
white-space: wrap;
}
/* button*/
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.tab button {
text-align: center;
background-color: inherit;
float: center;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
text-decoration: none;
width: 22%;
margin-top: 1rem;
margin-left: 2rem;
filter: drop-shadow(0px 4px 4p x rgba(0, 0, 0, 0.15));
border-radius: 8px;
background-color: white;
color: black;
border: 2px solid var(--primario);
}
.tab button:hover {
background-color: var(--Oscuro);
color: black;
border: 2px solid var(--Oscuro)
}
.tab button.active {
background-color: #A0E4CB;
}
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ICONOS*/
img {
width: 15px;
height: 15px;
}
/*TABS*/
h3 {
font-weight: bolder;
font-style: italic;
}
#demo>* {
display: flex;
justify-content: center;
align-items: center;
}
/* FOOTER*/
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: var(--primario);
/** margin-top: 2rem;**/
}
.fa-brands {
color: var(--Negro);
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: center;
text-decoration: none;
padding: 16px 32px;
margin: 15px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-regular {
padding: 20px;
font-size: 30px;
width: 30px;
height: 30px;
text-align: right;
text-decoration: none;
padding: 16px 32px;
margin-right: 0%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<header>
<div class="container_header">
<img ID="foto_perfil" src="iconos/perfil.png" alt="Foto de perfil">
<div class="info">
<h1 class="Nombre">Daniela Sucunza</h1>
<p class="titulo">Licenciada en Administración</p>
<p class="titulo">Programadora Front End</p>
</div>
</div>
</header>
<script src="function.js"></script>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Acerca')">Acerca de mi</button>
<button class="tablinks" onclick="openCity(event, 'Experiencia')">Experiencia</button>
<button class="tablinks" onclick="openCity(event, 'Educacion')">Educación</button>
<button class="tablinks" onclick="openCity(event, 'Habilidades')">Habilidades</button>
</div>
<div id="demo">
<div id="Acerca" class="tabcontent" style=display:flex>
<i class="fa-regular fa-user"></i>
<p>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Profesional ambicioso y con formación en recursos humanos, que busca un puesto de principiante en el que
pueda utilizar mejor mis habilidades y mi pasión.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Ambicioso y capaz de trabajar independientemente o en equipo. Comprometido a establecer y mantener un ambiente
de trabajo positivo para todos los empleados.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Como esta área complementa mis estudios, estoy ansioso por adquirir más experiencia en este campo. Por
esta razón, estoy buscando una compañía dispuesta a ofrecerme una ubicación entre sus desarrolladores. A cambio, ofrecería mi todo compromiso y sería una adición agradable y amigable para su equipo.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Por lo tanto, actualmente estoy buscando un trabajo o una pasantía como un front-end desarrollador.
</p>
</div>
<div id="Experiencia" class="tabcontent" style=display:none>
<h3>Asistente de Recursos Humanos</h3>
Noviembre, 2015- Octubre, 2020<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Creación de un registro de cumplimiento para uso de la gerencia cada mes.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Asistencia en el mantenimiento de todos los archivos en papel para el departamento de RRHH.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Apoyo en la creación de documentación para todos los nuevos empleados, y siguió creando archivos conforme
al protocolo de RRHH.<br>
<h3>Asistente de Recepción<br></h3>
Julio 2013- Junio 2015<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Apoyo en la actualización de toda la información de beneficios, a la vez que ampliaba los conocimientos relacionados
con los beneficios para los empleados.<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Conducta profesional, agradable y trabajadora en el día a día.
</div>
<div id="Educacion" class="tabcontent" style=display:none>
<h3>Licenciatura en Recusos Humanos</h3>
Febrero 2009 - Octubre, 2013<br> Graduado magna cum laude. Escritor principal de la revista universitaria El León.<br>
<h3>Master en Ciencia Datos</h3>
Febrero 2015- Octubre, 2017<br> Universidad Nacional
</div>
<div id="Habilidades" class="tabcontent" style=display:none>
<h3>Habilidades</h3>
<p>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Ingles Avanzado<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Portugues Intermedio<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">SQL <br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Power BI <br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Photoshop<br>
<img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Python
</p>
</div>
</div>
<footer>
</footer>

Footer does not stick to bottom

My footer doesn't stick to the bottom when the content of the page is very little, I tried using:
position:absolute;
and
bottom:0;
but it seems to stick, but when I add too much content it goes "under" the footer that remains in the middle of the page.
By under I mean that the text passes under the footer that remains in almost the middle of the page and surpasses it, if needed I can send some pictures of the problem, thanks a lot for your time!
this is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/src/app/footer/footer.component.css"> <!--import css footer-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<!--parte footer dell'html-->
<footer class="footer">
<div class="flex-wrapper">
<div class="container">
<div class="row">
<div class="footer-col">
<div class="content">
<a href="#"> <!--i link da collegare vanno dove sono presenti gli #-->
<img src="https://i.imgur.com/1yvwx9I.png" >
</a>
</div>
</div>
<div class="footer-col">
<h4>Azienda</h4> <!--titolo-->
<ul>
<li>Chi Siamo</li> <!--elenco degli elementi-->
<li>Contattaci</li>
<li>Placeholder</li>
<li>PlaceHolder</li>
</ul>
</div>
<div class="footer-col">
<h4>Aiuto</h4>
<ul>
<li>FAQ</li>
<li>Consegne</li>
<li>Reso</li>
<li>Informatica privacy</li>
</ul>
</div>
<div class="footer-col">
<h4>Seguici su</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i> <!--icone dei social-->
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
this is the CSS
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
body {
/* fonto e grandezza font*/
line-height: 1;
font-family: 'Poppins', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
margin: 0 auto;
}
.row {
/*si occupa delle righe, accomoda lo spostamento dell'elenco con il dimensionamento della pagina */
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
.footer {
/* solamente il colore di background del footer e lo spazio tra gli elementi */
background-color: #24262b;
padding: 20px 0;
}
.footer-col {
/* si occupa delle colonne e del loro ridimensionamento */
width: 25%;
padding: 0;
}
.footer-col h4 {
/*stabilisco la grandezza del font e del colore dei titoli */
font-size: 25px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
/* barra rossa sotto ai titoli */
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px; /* spazio tra le scritte in verticale */
}
.footer-col ul li a {
/* stato degli elementi dell'elenco pre-hover, potete notare che dispongo qui "transition" cioè il tempo che ci metterà a passare allo stato dell'hover dal suo stato normale e viceversa */
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
/* colore e leggero spostamento quando avviene l'hover (cioè quando ci passa sopra il mouse) */
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
/* stesso meccaniscmo dei font, qui però inserisco il background-color per il cambiamento del color (color -> background-color)*/
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
.content {
display: block;
padding: 10px;
margin: 15px auto;
text-align: center;
font: 25px Georgia, "Times New Roman", Times, serif;
font-size: 14px;
width: 300px;
display: flex;
}
.foot {
display: inline;
line-height: 70px;
}
/* dove si trova il logo, lo inizializzo con un filtro grigio e una transizione di 0.6, uso webkit per la scala di grigio (e anche la transizione solo per webkit), la scala di grigio viene usata perché rende il contrasto con l'hover molto più bello */
.content img {
height: 150px;
width: 150px;
float: left;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease-in-out;
transition: 0.6s;
}
/* hover del logo */
.content img:hover {
filter: invert(400%);
filter: brightness(4);
-webkit-filter: grayscale(-100);
-webkit-transform: scale(1.10);
}
/* tiene il footer esteso evitando gli spazi sui lati */
footer {
position: absolute;
/* temporaneo, di solito 0px o togli */
right: 0px;
left: 0px;
}
This is what happens when i add bottom:0px;

The best way to make sure your footer always sticks to the bottom is to use a flexbox for your body tag.
HTML & CSS Code Snippet
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
body {
/* fonto e grandezza font*/
line-height: 1;
font-family: 'Poppins', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* tiene il footer esteso evitando gli spazi sui lati */
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
/* flex: 1 0 auto; */
flex-direction: column;
}
.footer {
flex-shrink: 0;
}
.container {
width: 100%;
margin: 0 auto;
}
.row {
/*si occupa delle righe, accomoda lo spostamento dell'elenco con il dimensionamento della pagina */
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
.footer {
/* solamente il colore di background del footer e lo spazio tra gli elementi */
background-color: #24262b;
padding: 20px 0;
}
.footer-col {
/* si occupa delle colonne e del loro ridimensionamento */
width: 25%;
padding: 0;
}
.footer-col h4 {
/*stabilisco la grandezza del font e del colore dei titoli */
font-size: 25px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
/* barra rossa sotto ai titoli */
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px; /* spazio tra le scritte in verticale */
}
.footer-col ul li a {
/* stato degli elementi dell'elenco pre-hover, potete notare che dispongo qui "transition" cioè il tempo che ci metterà a passare allo stato dell'hover dal suo stato normale e viceversa */
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
/* colore e leggero spostamento quando avviene l'hover (cioè quando ci passa sopra il mouse) */
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
/* stesso meccaniscmo dei font, qui però inserisco il background-color per il cambiamento del color (color -> background-color)*/
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
.content {
display: block;
padding: 10px;
margin: 15px auto;
text-align: center;
font: 25px Georgia, "Times New Roman", Times, serif;
font-size: 14px;
width: 300px;
display: flex;
}
.foot {
display: inline;
line-height: 70px;
}
/* dove si trova il logo, lo inizializzo con un filtro grigio e una transizione di 0.6, uso webkit per la scala di grigio (e anche la transizione solo per webkit), la scala di grigio viene usata perché rende il contrasto con l'hover molto più bello */
.content img {
height: 150px;
width: 150px;
float: left;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-webkit-transition: all .6s ease-in-out;
transition: 0.6s;
}
/* hover del logo */
.content img:hover {
filter: invert(400%);
filter: brightness(4);
-webkit-filter: grayscale(-100);
-webkit-transform: scale(1.10);
}
<body>
<!--parte footer dell'html-->
<div class="content">
<p>Demo Content</p>
<p>Demo Content</p>
<p>Demo Content</p>
<p>Demo Content</p>
<p>Demo Content</p>
<p>Demo Content</p>
<p>Demo Content</p>
<p>Demo Content</p>
<p>Demo Content</p>
<p>Demo Content</p>
<p>Demo Content</p>
<p>Demo Content</p>
</div>
<footer class="footer">
<div class="flex-wrapper">
<div class="container">
<div class="row">
<div class="footer-col">
<div class="content">
<a href="#"> <!--i link da collegare vanno dove sono presenti gli #-->
<img src="https://i.imgur.com/1yvwx9I.png" >
</a>
</div>
</div>
<div class="footer-col">
<h4>Azienda</h4> <!--titolo-->
<ul>
<li>Chi Siamo</li> <!--elenco degli elementi-->
<li>Contattaci</li>
<li>Placeholder</li>
<li>PlaceHolder</li>
</ul>
</div>
<div class="footer-col">
<h4>Aiuto</h4>
<ul>
<li>FAQ</li>
<li>Consegne</li>
<li>Reso</li>
<li>Informatica privacy</li>
</ul>
</div>
<div class="footer-col">
<h4>Seguici su</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i> <!--icone dei social-->
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
You could even add a header above that or more stuff below. The trick with flexbox is either:
flex: 1 on the child you want to grow to fill the space (the
content, in our case).
or, margin-top: auto to push the child away as far as it will go
from the neighbor (or whichever direction margin is needed).
To check more ways for this purpose you can check this article "https://css-tricks.com/couple-takes-sticky-footer/"
Here is the link for Codepen as well

Horizontal images scroll, text inside goes overboard

The text inside my divs goes over to the next image, from my image horizontal scroll. I want each text inside each image but I am trying everything and nothing works!

The overlapping text is caused by the white-space: nowrap; on the .list-inline selector. So lets add white-space: normal; to the .DocumentList p selector to fix this.
Here is the full updated CSS:
.factorSection{
display:none;
}
#section2-05{
padding-right:0;
padding-left: 10px;
padding-bottom:0;
}
#section2-05 h2{
color: #424242;
font-weight:900;
font-size: 1.7em;
line-height: 1.2em;
margin-bottom: 0;
}
#section2-05 .col-lg-12 p{
font-size: 1.2em;
line-height: 1.4em;
margin-bottom:1em;
}
.section2-05_phone{
display:block;
overflow-x: scroll;
width: auto;
white-space: nowrap;
}
.documentList{
overflow-x:scroll;
overflow-y:hidden;
height:200px;
width:100%;
padding: 0 15px;
}
.factorImgText{
position:absolute;
z-index: 1;
padding: 0 5px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: 0;
text-align: center;
width:90%;
}
.factorImg1, .factorImg2, .factorImg3, .factorImg4{
position: relative;
display: inline-block;
margin: 8px 8px;
box-shadow: 2px 2px 4px #bbb;
border-top-right-radius: 4px;
width: 320px;
height: 100%;
vertical-align: bottom;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
height:370px;
}
.factorImg1{
background-image: url('https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6');
margin-right:3px;
}
.factorImg2{
background-image: url('https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6');
margin-right:3px;
}
.factorImg3{
background-image: url("https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6");
margin-right:3px;
}
.factorImg4{
background-image: url("https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6");
margin-right:3px;
}
.list-inline {
white-space:nowrap;
}
.DocumentList h6, .DocumentList p{
color:#fff;
font-weight:900;
}
.DocumentList h6{
font-size: 1em;
text-align: center;
width: 100%; /* Changed from 90% --> 100% to help center. */
margin: 0; /* Added to help center. */
}
.DocumentList p{
font-size: .75em;
line-height: 1.4em;
margin-bottom: 0;
white-space: normal; /* Add to fix the overlapping text. */
}
<div class="row row-fluid section2-05_phone">
<div class="DocumentList col-lg-12">
<ul class="list-inline">
<li class="factorImg1">
<div class="factorImgText">
<h6>2 DÍAS ANTES… ¡ZURPRAIS!</h6>
<p>Con tu pack de experiencias, tu edad y tu perfil (familias, parejas, amig#s…), organizaremos tu plan… Y como es Zurprais, 2 días antes sabrás lo que es.</p>
</div>
<div class="overlay1"></div>
</li>
<li class="factorImg2">
<div class="factorImgText">
<h6>PLANES CON UN PLUS</h6>
<p>Un atardecer en velero… ¿con cava y ostras? Un brunch… ¿entre viñedos? Todas tus experiencias tendrán un toque extra que las hará aún más especiales.</p>
</div>
<div class="overlay2"></div>
</li>
<li class="factorImg3">
<div class="factorImgText">
<h6>EMOCIÓN DESDE LA RESERVA</h6>
<p>Al reservar, empieza el juego. Recibirás algunas pistas sobre las actividades que te podrían tocar. Para que vayas calentando motores.</p>
</div>
<div class="overlay3"></div>
</li>
<li class="factorImg4">
<div class="factorImgText">
<h6>CAMBIO GRATUITO</h6>
<p>¡Segurísimo que tu plan te va a encantar! Pero para que estés tranquil#: si no te gusta lo que te hemos organizado, te preparamos uno diferente para otro día.</p>
</div>
<div class="overlay4"></div>
</li>
</ul>
</div>
</div>

Weird spacing at bottom of boxes in Pure CSS Masonry layout?

I have a problem with Pure CSS Mansonry layout. I use position: relative for the boxes and position: absolute for the content inside each box. However, I noticed that when I use position: absolute, there's an gap under each box. I couldn't figure out how to fix it. You can also check it out at this codepen: http://codepen.io/kikibres/pen/KWjXeG
HTML
#import "compass/css3";
*, *:before, *:after {box-sizing: border-box !important;}
.servicogallery {
-moz-column-gap: 0;
-webkit-column-gap: 0;
-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;
position: relative;
display: block;
width: 100%;
}
#services {
display: inline-block;
margin: 0;
padding: 1rem;
width: 100%;
height: 250px;
position: relative;
}
#services span {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
vertical-align: bottom;
}
.a1 {
background-color: #0026e7;
color: #FFF;
}
.a2 {
background-color:/*#189ed8*/#ffffff;
color: /*#FFF*/#998b75;
}
.a3 {
background-color:/*#fff*/#bac0b8;
color: /*#998b75*/#ffffff;
}
.a4 { background-color: #646664;
color: #FFF;
}
.a5 {background-color: #0026e7;
color: #FFF;
}
.a6 {background-color: #29a1e6;
color: #FFF;
}
.a7 {background-color: #fff;
color: #998b75;
}
.a8 {background-color: #bac0b8;
color: #FFF;
}
.a9 { background-color: #fff;
color: #998b75;
}
.a10 { background-color: #0029e5;
color: #FFF;
}
.a11 { background-color: #5e605e;
color: #FFF;
}
/* styles for background color, etc; not necessary for this thing to work */
body {
padding: 1em;
font-family: "Garamond", serif;
}
h1 {
font-size: 3rem;
font-weight: 800;
}
body {
line-height: 1.25;
}
p {
text-align: left;
}
<h1>Pure CSS Masonry</h1>
<p>By using CSS3 columns, we can easily create a Masonry.js-like layout where random-height blocks fit together.</p>
<div class="servicogallery">
<div id="services" class="a1">
<span>
<p>Formulación y Evaluación de Proyectos de Construcción.</p></span>
</div>
<div id="services" class="a2">
<span>
<p>Mantenimiento Varios (Edificaciones, Calles, entre otros).</p></span>
</div>
<div id="services" class="a3">
<span>
<p>Diseño: Arquitectónico, Habitacional, Industrial, Urbano y Comercial.</p></span>
</div>
<div id="services" class="a4">
<span>
<p>Taludes, Muros.</p></span>
</div>
<div id="services" class="a5">
<span>
<p>Supervisión de Proyectos</p></span>
</div>
<div id="services" class="a6">
<span>
<p>Estudios de Factibilidad Técnica – Económica de proyectos de construcción.</p></span>
</div>
<div id="services" class="a7">
<span>
<p>Diseño Integral de Obras de Ingeniería y Arquitectura.</p></span>
</div>
<div id="services" class="a8">
<span>
<p>Tramitología.</p></span>
</div>
<div id="services" class="a9">
<span>
<p>Obras de Mitigación</p></span>
</div>
<div id="services" class="a10">
<span>
<p><strong>Construcción de Obras Civiles y Remodelaciones:</strong></p>
<p>Centros comerciales, urbanizaciones, infraestructura: Hidráulica y Víal, complejos industriales, turísticos, deportivo, centros decapacitación, vivienda, centros educativo, hospitales, taludes, muros, obras de mitigación</p>
<p>Aplicación de pintura con maquinaria industrial avanzada, entre otros.</p></span>
</div>
<div id="services" class="a11">
<span>
<p>Uso de equipo para la realización de pruebas no destructivas en concreto.</p></span>
</div>
</div>
What I'm trying to achieve is no gaps around the boxes as well the content to be at bottom of each box. All I could tell is that the position: absolute is affecting the gaps.

Add vertical-align: top; to #services
#import "compass/css3";
*, *:before, *:after {box-sizing: border-box !important;}
.servicogallery {
-moz-column-gap: 0;
-webkit-column-gap: 0;
-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;
position: relative;
display: block;
width: 100%;
}
#services {
margin: 0;
padding: 1rem;
width: 100%;
height: 250px;
position: relative;
vertical-align: top;
display: inline-block;
}
#services span {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
vertical-align: bottom;
}
.a1 {
background-color: #0026e7;
color: #FFF;
}
.a2 {
background-color:/*#189ed8*/#ffffff;
color: /*#FFF*/#998b75;
}
.a3 {
background-color:/*#fff*/#bac0b8;
color: /*#998b75*/#ffffff;
}
.a4 { background-color: #646664;
color: #FFF;
}
.a5 {background-color: #0026e7;
color: #FFF;
}
.a6 {background-color: #29a1e6;
color: #FFF;
}
.a7 {background-color: #fff;
color: #998b75;
}
.a8 {background-color: #bac0b8;
color: #FFF;
}
.a9 { background-color: #fff;
color: #998b75;
}
.a10 { background-color: #0029e5;
color: #FFF;
}
.a11 { background-color: #5e605e;
color: #FFF;
}
/* styles for background color, etc; not necessary for this thing to work */
body {
padding: 1em;
font-family: "Garamond", serif;
}
h1 {
font-size: 3rem;
font-weight: 800;
}
body {
line-height: 1.25;
}
p {
text-align: left;
}
<h1>Pure CSS Masonry</h1>
<p>By using CSS3 columns, we can easily create a Masonry.js-like layout where random-height blocks fit together.</p>
<div class="servicogallery">
<div id="services" class="a1">
<span>
<p>Formulación y Evaluación de Proyectos de Construcción.</p></span>
</div>
<div id="services" class="a2">
<span>
<p>Mantenimiento Varios (Edificaciones, Calles, entre otros).</p></span>
</div>
<div id="services" class="a3">
<span>
<p>Diseño: Arquitectónico, Habitacional, Industrial, Urbano y Comercial.</p></span>
</div>
<div id="services" class="a4">
<span>
<p>Taludes, Muros.</p></span>
</div>
<div id="services" class="a5">
<span>
<p>Supervisión de Proyectos</p></span>
</div>
<div id="services" class="a6">
<span>
<p>Estudios de Factibilidad Técnica – Económica de proyectos de construcción.</p></span>
</div>
<div id="services" class="a7">
<span>
<p>Diseño Integral de Obras de Ingeniería y Arquitectura.</p></span>
</div>
<div id="services" class="a8">
<span>
<p>Tramitología.</p></span>
</div>
<div id="services" class="a9">
<span>
<p>Obras de Mitigación</p></span>
</div>
<div id="services" class="a10">
<span>
<p><strong>Construcción de Obras Civiles y Remodelaciones:</strong></p>
<p>Centros comerciales, urbanizaciones, infraestructura: Hidráulica y Víal, complejos industriales, turísticos, deportivo, centros decapacitación, vivienda, centros educativo, hospitales, taludes, muros, obras de mitigación</p>
<p>Aplicación de pintura con maquinaria industrial avanzada, entre otros.</p></span>
</div>
<div id="services" class="a11">
<span>
<p>Uso de equipo para la realización de pruebas no destructivas en concreto.</p></span>
</div>
</div>

How can i center a dropdown menu bar?

I want the bar to remain such as this, but the three menu options (along with the drop-down ) pass be at the center of the page.
The page have some img's (including de menu bar) that is not included.
header, footer, aside, nav, article {
display: block;
}
header h1{
color: #670C15;
text-align: center;
}
body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f5f5f1;
}
h1 {
font-size: 28px;
line-height: 30px;
padding: 10px 0;
}
h2 {
font-size: 23px;
line-height: 25px;
padding: 10px 0;
}
h3 {
font-size: 18px;
line-height: 20px;
padding: 11px 0;
}
p {
padding-bottom: 22px;
}
nav {
display: block;
position: absolute;
left: 0;
width: 100%;
background: url("nav_background.png");
}
nav ul {
padding: 0;
margin: 0;
}
nav ul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/********************************/
nav li {
position: relative;
float: left;
list-style-type: none;
margin: 0 auto;
}
nav li a {
display: block;
padding: 10px 20px;
border-left: 1px solid #999;
border-right: 1px solid #222;
color: #777;
text-decoration: none;
}
nav li a:focus {
outline: none;
text-decoration: underline;
}
nav li:first-child a {
border-left: none;
}
nav li:hover ul {
display:block;
}
nav a span {
display: block;
float: right;
margin-left: 5px;
}
nav ul ul {
display: none;
width: 100%;
position: absolute;
left: 0;
background: #670C15;
}
/******************************/
nav ul ul li {
float: none;
}
nav ul ul a {
padding: 5px 10px;
border-left: none;
border-right: none;
font-size: 14px;
}
nav ul ul a:hover {
color: #fff;
}
nav ul li a:hover {
color: #fff;
}
nav ul a span {
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
transform: rotate(-180deg);
}
#intro {
position: relative;
margin-top: 66px;
padding: 44px;
background: #467612 url("intro_background.png") repeat-x;
border-radius: 170px 50px;
}
#intro img {
position: absolute;
top: 0;
right: 0;
width: 470px;
height: 100%;
border-radius: 170px 50px;
}
#intro h2 {
position: relative;
z-index: 9999;
width: 600px;
padding: 0 0 0 0;
font-weight: bold;
}
#intro p {
position: absolute;
top: 0;
right: 0;
padding: 3% 0 0 0;
width: 400px;
z-index: 9999;
font-weight: bold;
}
#contenido {
display: table;
}
#contenidoPrincipal {
display: table-cell;
width: 620px;
padding-right: 22px;
}
aside {
display: table-cell;
width: 300px;
}
.blogPost div {
column-count: 2;
column-gap: 22px;
-moz-column-count: 2;
-moz-column-gap: 22px;
-webkit-column-count: 2;
-webkit-column-gap: 22px;
}
.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
width: 100%;
}
#comentarios {
margin-top: 21px;
padding-top: 22px;
border-top: 1px solid #d7d7d7;
}
#comentarios article {
display: table;
padding: 22px;
}
section#comentarios article:nth-child(2n+1) {
padding: 21px;
background: #E3E3E3;
border: 1px solid #d7d7d7;
border-radius: 11px;
}
#comentarios article header {
display: table-cell;
width: 220px;
padding-right: 22px;
}
#comentarios article header a {
display: block;
font-weight: bold;
color: #000;
}
#comentarios article header a:hover {
text-decoration: none;
}
#comentarios article p {
padding: 0;
}
form {
margin-top: 21px;
padding-top: 22px;
border-top: 1px solid #d7d7d7;
}
form p {
display: table;
margin-bottom: 22px;
padding: 0 22px;
}
form label {
display: table-cell;
width: 140px;
padding-right: 20px;
text-align: right;
font-weight: bold;
vertical-align: top;
}
form input[type="text"], form input[type="email"], form input[type="url"] {
display: table-cell;
width: 300px;
height: 20px;
border: 1px solid #d7d7d7;
}
form textarea {
width: 300px;
height: 100px;
border: 1px solid #d7d7d7;
}
form input[type="submit"] {
margin-left: 162px;
}
aside section {
margin: 22px 0 0 22px;
padding: 11px 22px;
background: url("sidebar_section_background.png") repeat-x;
}
aside section ul {
margin: 0 0 0 22px;
list-style: none;
}
aside section ul li a {
display: block;
text-decoration: none;
color: #000;
}
aside section ul li a: hover {
text-decoration: underline;
}
footer {
position: absolute;
left: 0;
width: 100%;
background: #681E1E;
}
footer div {
display: table;
margin: 0 auto;
padding: 44px 0;
width: 940px;
color: #777;
}
footer div section {
display: table-cell;
width: 300px;
}
footer div #acerca, footer div #otrosBlogs {
padding-right: 20px;
}
footer h3 {
color: #FFF;
}
footer a {
color: #999;
}
footer a:hover {
color: #FFF;
text-decoration: none;
}
footer ul {
margin: 0 0 0 40px;
list-style: square;
color: #565656;
}
footer ul li a {
display: block;
}
form p label{
color: #914F56;
}
<!doctype html>
<html>
<head id="titulo">
<title>Título de Página</title>
<link rel="stylesheet" href="estiloexpe.css" type="text/css" media="screen" />
</head>
<body>
<header>
<h1>Título de Página</h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>
Archivo<span>^</span>
<ul>
<li> Submenú 1 </li>
<li> Submenú 2 </li>
<li> Submenú 3 </li>
</ul>
</li>
<li>Contacto</li>
</ul>
</nav>
<br><br><br><br>
<section id="intro">
<h2>Esta es una introducción de prueba.</h2>
<img src="intro_pebbles.png" alt="Image: Felixco, Inc. / FreeDigitalPhotos.net" />
<p>Cuando todo va mal te imagino sonriendo y se me pasa. <br> Ese es mi truco y esa es tu magia.</p>
</section>
<div id="contenido">
<div id="contenidoPrincipal">
<section>
<article class="blogPost">
<header>
<h2>Título del post.</h2>
<p> Escrito el <time datetime= "2016-02-08T09:20:45-06:00">23 de febrero de 2016
</time> por Genessis - Sin comentarios
</p>
</header>
<div>
<p>Para comprender el valor de un año, habla con el alumno que reprobó.
Para comprender el valor de un mes, habla con la madre de un bebé prematuro.
Para comprender el valor de una semana, habla con el redector de un semanario.
Para comprender el valor de un día, habla con el obrero que debe alimentar seis hijos.
</p>
<img src="DianaDardos.jpg" alt="Image: renjith krishnan / FreeDigitalPhotos.net" />
<p>Para comprender el valor de una hora, habla con los amantes que ansían verse.
Para comprender el valor de un minuto, habla con la persona que no alcanzo el tren.
Para comprender el valor de un segundo, habla con quien sobrevivió a un accidente.
Para comprender el valor de una milesima de segundo, habla con quien gano medalla de plata en las olimpiadas.
</p>
</div>
</article>
</section>
<section id="comentarios">
<header>
<h3>Comentarios</H3>
</header>
<article>
<header>
Juan Peacute el <time datetime= "2016-02-09T03:35:20-06:00">
23 de febrero del 2016 a las 12:50 am </time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut.
</p>
</article>
<article>
<header>
Mafer Castillo el <time datetime="2012-02-09T11:40:09-06:00">
23 de febrero de 2016 a las 3:00 pm</time>
</header>
<p>Digamos que hoy me levante oto&ntildeal, pero hable contigo y ya tengo los bolsillos
llenos de veranos.
<p>Cuando quieras/puedas, ven a buscarlos.</b>
</p>
</article>
</section>
<form action="#" method="post">
<h3>Agregar comentario</h3>
<p>
<label for="Nombre">Nombre</label>
<input name="nombre" id="nombre" type="text" required />
</p>
<p>
<label for="email">Correo</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Sitio Web</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comentario">Comentario</label>
<textarea name="comentario" id="comentario" required></textarea>
</p>
<p>
<input type="submit" value="Agregar Comentario" />
</p>
</form>
</div>
<aside>
<section>
<header>
<h3>Categorias</h3>
</header>
<ul>
<li> Lorem ipsum dolor. </li>
<li> Sit amet consectetur. </li>
<li> Adipisicing elit sed. </li>
<li> Do eiusmod tempor. </li>
<li> Incididunt ut labore. </li>
</ul>
</section>
<section>
<header>
<h3>Archivos</h3>
</header>
<ul>
<li> Enero 2012 </li>
<li> Diciembre 2011 </li>
<li> Noviembre 2011 </li>
<li> Octubre 2011 </li>
</ul>
</section>
</aside>
</div>
<footer>
<div>
<section id="Acerca">
<header>
<h3>Acerca de...</h3>
</header>
<p>
¿Que gano yo, si obtengo lo que ansío?
Un sueño, un aliento, una chispa de goce fugaz.
&iquestQuien cambiaria un momento de jubilo por una semana de llanto vacio?
&iquestO quien venderia la eternidad para tener un juguete y solaz?
&iquestO por una dulce uva, destruiria la vid y su haz?
</p>
</section>
<section id="otrosBlogs">
<header>
<h3>Otros Blogs</h3>
</header>
<ul>
<li> HTML5Tutoriales </li>
<li> HTML5tuto </li>
<li> HTML </li>
</ul>
</section>
<section id="popular">
<header>
<h3>Lo más popular</h3>
</header>
<ul>
<li> Ten confianza en ti mismo, y en todos los que te rodean </li>
<li> Fija metas que puedas alcanzar. </li>
<li> Habla con tus actos y no con tus palabras. </li>
</ul>
</section>
</div>
</footer>
</body>
</html>

Just a few minor CSS changes:
nav {
// remove position:absolute;
// remove left:0;
display: block;
width:auto;
background: url("nav_background.png");
}
nav ul{
padding:0;
margin: 0 auto;
width:24em; // ( or however many li elements you have at 8em width)
}
nav li {
width:8em; // (for example. Could be larger or smaller or px or %)
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Footer gives different results on Code Snippet (CodePen) and Angular - html

Related

How to place an icon next to text and centering a header

Footer does not stick to bottom

Horizontal images scroll, text inside goes overboard

Weird spacing at bottom of boxes in Pure CSS Masonry layout?

How can i center a dropdown menu bar?

Categories

Resources