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
Related
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>
I have made a header and below that a sticky navigation bar with a drop down menu.
When I activate the drop down menu it fits perfectly with the navigation bar. But if I scroll down on the website it no longer fits, I get a distance between the navigation bar and the drop down menu equal to the height of my header.
Is the header pushing down my drop down menu when scrolling down? Or is it the distance from the top of the website down to the drop down menu that keeps existing when scrolling down on the website?
I have tried to fix it for days but I can't get it to work.
/* THIS IS FROM MY topnavigation.css*/
.topnav {
position: sticky;
top: 0px;
overflow: hidden;
background-color: rgb(2, 31, 70);
}
.topnav a {
float: left;
display: block;
border-right:1px solid #bbb;
width: 125px;
font-size: 1.0em !important;
font-family: 'verdana';
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
border-right:1px solid #bbb;
}
.dropdown .dropbtn {
width: 125px;
font-size: 17px;
border: 0;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
background-color: rgb(79, 111, 150);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
float: none;
color: #f2f2f2;
border-right:0px;
border-bottom:1px solid #bbb;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(53, 76, 105);
color: white;
}
.dropdown-content a:hover {
background-color: rgb(79, 111, 150);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
width: auto;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
text-align: left;
}
}
/* THIS IS FROM MY style.css */
* {
box-sizing: border-box;
}
body {
margin: 0px;
background-color: rgb(3, 19, 34);
}
.header {
top: 0px;
padding: 40px;
margin: auto;
background-color: rgb(17, 54, 102);
text-align: center;
color: #ffffff;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
min-height: calc(100vh - 157.88px - 70px);
}
/* Left and right column */
.column.side {
width: 20%;
margin-top: 1%;
}
.front.leftside.columns.content {
width: 100%;
}
.front.rightside.columns.content {
width: 95%;
margin-left: auto;
margin-right: auto;
}
/* Middle column */
.column.middle {
width: 60%;
}
.front.column.middle {
width: 100%;
}
/* Artikel på forsiden */
.front.article {
background-color: #ffffff;
border-radius: 10px;
padding-top: 10px;
padding-left: 10%;
padding-right: 10%;
font-family: Georgia, 'Times New Roman', Times, serif;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 781px) {
.column.side, .column.middle {
width: 100%;
}
}
.sixteen.px {
font-size: 16px;
}
.eighteen.px {
font-size: 18px;
}
/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
/* Style the footer */
.footer {
left: 0;
bottom: 0;
position: relative;
width: 100%;
padding: 10px;
background-color: rgb(2, 31, 70);
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/topnavigation.css">
</head>
<body>
<header class="header">Mads Ottobrøker</header>
<div class="topnav" id="myTopnav">
<i class="fa fa-fw fa-home"></i> Forsiden
<i class="fa fa-fw fa-user"></i> Om mig
<i class="fa fa-fw fa-file-alt"></i> CV
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
</button>
<div class="dropdown-content">
Webdesign
3D Grafik
</div>
</div>
<i class="fa fa-fw fa-envelope"></i> Kontakt
<a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>
<div class="row">
<div class="column side">
<div class="front leftside columns content">
<img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
</div>
</div>
<div class="column middle">
<div class="front column middle">
<div class="front article">
<h1>Voksenelevplads søges!</h1>
<p>
<h2>Kontorelev med speciale i administration søger elevplads.</h2>
</p>
<p><i><h5>Dec 15, 2020</h5></i></p>
<hr>
<h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
<p class="sixteen px">
Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
er et godt og spændende arbejde.
</p>
<p class="sixteen px">
Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
</p>
<h3 class="eighteen px">Hvad jeg tilbyder:</h3>
<p class="sixteen px">
Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
skiftende arbejdsfunktioner.
</p>
<p class="sixteen px">
Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
bl.a. har håndteret varelager, indkøb, salg og bestillinger.
</p>
<p class="sixteen px">
Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
</p>
<p class="sixteen px">
Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
</p>
<br>
<br>
<br>
</div>
</div>
</div>
<div class="column side">
<div class="front rightside columns content">
<a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
href="https://twitter.com/MadsOttobroker?ref_src=twsrc%5Etfw">Tweets by MadsOttobroker</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="footer">
<p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>
</body>
</html>
Drop down menu looks good
Drop down menu is no longer connected to navigation bar after scrolling
The position: fixed; on .dropdown-content causes that element to be relative to the browser window and disregards any parent or grandparent it is in, which is why it's staying in the same place the entire time. If your page had a lot of content making the page taller, you would scroll and that element would stay in the same place.
Switching it to position: absolute; will position it relative to it's parent.
Then, remove overflow: hidden; from .topnav and .dropdown as this cut's it off.
Then on .topnav, add width: 100%; and float: left;.
/* THIS IS FROM MY topnavigation.css*/
.topnav {
position: sticky;
top: 0px;
/* overflow: hidden; */
background-color: rgb(2, 31, 70);
float: left;
width: 100%;
}
.topnav a {
float: left;
display: block;
border-right:1px solid #bbb;
width: 125px;
font-size: 1.0em !important;
font-family: 'verdana';
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
/* overflow: hidden; */
border-right:1px solid #bbb;
}
.dropdown .dropbtn {
width: 125px;
font-size: 17px;
border: 0;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(79, 111, 150);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
float: none;
color: #f2f2f2;
border-right:0px;
border-bottom:1px solid #bbb;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(53, 76, 105);
color: white;
}
.dropdown-content a:hover {
background-color: rgb(79, 111, 150);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
width: auto;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
text-align: left;
}
}
/* THIS IS FROM MY style.css */
* {
box-sizing: border-box;
}
body {
margin: 0px;
background-color: rgb(3, 19, 34);
}
.header {
top: 0px;
padding: 40px;
margin: auto;
background-color: rgb(17, 54, 102);
text-align: center;
color: #ffffff;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
min-height: calc(100vh - 157.88px - 70px);
}
/* Left and right column */
.column.side {
width: 20%;
margin-top: 1%;
}
.front.leftside.columns.content {
width: 100%;
}
.front.rightside.columns.content {
width: 95%;
margin-left: auto;
margin-right: auto;
}
/* Middle column */
.column.middle {
width: 60%;
}
.front.column.middle {
width: 100%;
}
/* Artikel på forsiden */
.front.article {
background-color: #ffffff;
border-radius: 10px;
padding-top: 10px;
padding-left: 10%;
padding-right: 10%;
font-family: Georgia, 'Times New Roman', Times, serif;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 781px) {
.column.side, .column.middle {
width: 100%;
}
}
.sixteen.px {
font-size: 16px;
}
.eighteen.px {
font-size: 18px;
}
/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
/* Style the footer */
.footer {
left: 0;
bottom: 0;
position: relative;
width: 100%;
padding: 10px;
background-color: rgb(2, 31, 70);
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/topnavigation.css">
</head>
<body>
<header class="header">Mads Ottobrøker</header>
<div class="topnav" id="myTopnav">
<i class="fa fa-fw fa-home"></i> Forsiden
<i class="fa fa-fw fa-user"></i> Om mig
<i class="fa fa-fw fa-file-alt"></i> CV
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
</button>
<div class="dropdown-content">
Webdesign
3D Grafik
</div>
</div>
<i class="fa fa-fw fa-envelope"></i> Kontakt
<a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>
<div class="row">
<div class="column side">
<div class="front leftside columns content">
<img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
</div>
</div>
<div class="column middle">
<div class="front column middle">
<div class="front article">
<h1>Voksenelevplads søges!</h1>
<p>
<h2>Kontorelev med speciale i administration søger elevplads.</h2>
</p>
<p><i><h5>Dec 15, 2020</h5></i></p>
<hr>
<h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
<p class="sixteen px">
Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
er et godt og spændende arbejde.
</p>
<p class="sixteen px">
Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
</p>
<h3 class="eighteen px">Hvad jeg tilbyder:</h3>
<p class="sixteen px">
Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
skiftende arbejdsfunktioner.
</p>
<p class="sixteen px">
Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
bl.a. har håndteret varelager, indkøb, salg og bestillinger.
</p>
<p class="sixteen px">
Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
</p>
<p class="sixteen px">
Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
</p>
<br>
<br>
<br>
</div>
</div>
</div>
<div class="column side">
<div class="front rightside columns content">
<a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
href="https://twitter.com/MadsOttobroker?ref_src=twsrc%5Etfw">Tweets by MadsOttobroker</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="footer">
<p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>
</body>
</html>
There are two problem's in your code. Fix those two CSS and your will get your expected behavior.
First, position: fixed in .dropdown-content. Since position: fixed element is positioned relative to the browser window.
Change it to position: absolute.
.dropdown-content {
display: none;
//position: fixed;
position: absolute;
background-color: rgb(79, 111, 150);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
Second, overflow: hidden in .topnav. I guess you are using this for creating Block-level formatting context. So instead of using overflow: hidden for Block-level formatting add display: flow-root in .topnav css.
.topnav {
position: sticky;
top: 0px;
//overflow: hidden;
background-color: rgb(2, 31, 70);
display: floot-root;
}
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>
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>
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ñal, 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.
¿Quien cambiaria un momento de jubilo por una semana de llanto vacio?
¿O quien venderia la eternidad para tener un juguete y solaz?
¿O 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 %)
}