Highlighted

CSS Footer Question

Participant ,
Jul 06, 2019

Copy link to clipboard

Copied

So, I have a question if anyone knows the answer. Im working on my portfolio and found a Codepen I would like to use for my photography page. The only problem is, the pen Im using goes PAST the footer and I would like the footer to move further down the page with each batch of images I add. Ive added an example of the error Im running into, along with the CSS that is being used for the footer. I will also add the full CSS. I've been trying to figure this out on my own, but any help would be very awesome. Thanks.
FooterCSS.JPG

CSS-code.JPG

@charset "utf-8";

/* CSS Document */

body {

  background-color: #fff;

  margin: 0 auto;

  width: 100%;

  height: auto;

}

header {

  background-color: #020557;

  height: 100px;

  width: 100%;

}

header h1 {

  color: #ffffff;

  font-size: 50px;

  font-family: "Oswald", Arial, Helvetica, sans-serif;

  margin: 0;

  padding: 0;

  padding-left: 20px;

  line-height: 100px;

}

/*------Navigation------*/

.nav {

  background-color: #efefef;

  text-align: left;

  width: 100%;

  height: auto;

}

.nav ul {

  background: #efefef;

  font-family: "Oswald", Arial, Helvetica, sans-serif;

  list-style: none;

  position: relative;

  display: inline-block;

  padding: 0 25px;

  margin: 0 auto;

  width: auto;

}

.nav ul:after {

  content: "";

  clear: both;

  display: block;

}

.nav ul li {

  display: inline-block;

}

.nav ul li:hover > ul {

  display: block;

}

.nav ul li:hover {

  background: #020557;

  transition: 0.2s ease-in-out;

}

.nav ul li:hover a {

  color: #fff;

}

.nav ul li a {

  display: block;

  padding: 5px 22.25px;

  color: #020557;

  text-decoration: none;

}

.nav ul ul {

  display: none;

  text-align: left;

}

.nav ul ul {

  background: #020557;

  padding: 0;

  position: absolute;

  top: 100%;

  z-index: 99;

}

.nav ul ul li {

  display: block;

  border-top: 1px solid #fff;

  position: relative;

  z-index: 99;

}

.nav ul ul li a {

  padding: 5px 22.25px;

  color: #fff;

}

.nav ul ul li a:hover {

  background: #000000;

  transition: 0.25s ease-in-out;

}

footer {

  width: 100%;

  height: 40px;

  position: absolute;

  bottom: 0;

  left: 0;

  background: #020557;

}

footer p {

  color: #ffffff;

  font-family: "Oswald", Arial, Helvetica, Sans-serif;

  font-size: 10px;

  text-align: center;

}

.carousel {

    margin-left: 25%;

    margin-right: 25%;

}

ul.slides {

    display: block;

    position: relative;

    height: 600px;

    margin: 0;

    padding: 0;

    overflow: hidden;

    list-style: none;

}

.slides * {

    user-select: none;

    -ms-user-select: none;

    -moz-user-select: none;

    -khtml-user-select: none;

    -webkit-user-select: none;

    -webkit-touch-callout: none;

}

ul.slides input {

    display: none;

}

.slide-container {

    display: block;

}

.slide-image {

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    opacity: 0;

    transition: all .7s ease-in-out;

}  

.slide-image img {

    width: auto;

    min-width: 100%;

    height: 100%;

}

.carousel-controls {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 999;

    font-size: 100px;

    line-height: 600px;

    color: #fff;

}

.carousel-controls label {

    display: none;

    position: absolute;

    padding: 0 20px;

    opacity: 0;

    transition: opacity .2s;

    cursor: pointer;

}

.slide-image:hover + .carousel-controls label{

    opacity: 0.5;

}

.carousel-controls label:hover {

    opacity: 1;

}

.carousel-controls .prev-slide {

    width: 49%;

    text-align: left;

    left: 0;

}

.carousel-controls .next-slide {

    width: 49%;

    text-align: right;

    right: 0;

}

.carousel-dots {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 20px;

    z-index: 999;

    text-align: center;

}

.carousel-dots .carousel-dot {

    display: inline-block;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background-color: #fff;

    opacity: 0.5;

    margin: 10px;

}

input:checked + .slide-container .slide-image {

    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;

}

input:checked + .slide-container .carousel-controls label {

     display: block;

}

input#img-1:checked ~ .carousel-dots label#img-dot-1,

input#img-2:checked ~ .carousel-dots label#img-dot-2,

input#img-3:checked ~ .carousel-dots label#img-dot-3,

input#img-4:checked ~ .carousel-dots label#img-dot-4,

input#img-5:checked ~ .carousel-dots label#img-dot-5,

input#img-6:checked ~ .carousel-dots label#img-dot-6,

input#img-7:checked ~ .carousel-dots label#img-dot-7,

input#img-8:checked ~ .carousel-dots label#img-dot-8,

input#img-9:checked ~ .carousel-dots label#img-dot-9,

input#img-10:checked ~ .carousel-dots label#img-dot-10,

input#img-11:checked ~ .carousel-dots label#img-dot-11,

input#img-12:checked ~ .carousel-dots label#img-dot-12 {

opacity: 1;

}

input#img-1:checked ~ .carousel-dots label#img-dot-1,

input#img-2:checked ~ .carousel-dots label#img-dot-2,

input#img-3:checked ~ .carousel-dots label#img-dot-3,

input#img-4:checked ~ .carousel-dots label#img-dot-4,

input#img-5:checked ~ .carousel-dots label#img-dot-5,

input#img-6:checked ~ .carousel-dots label#img-dot-6,

input#img-7:checked ~ .carousel-dots label#img-dot-7,

input#img-8:checked ~ .carousel-dots label#img-dot-8 {

opacity: 1;

}

input#img-1:checked ~ .carousel-dots label#img-dot-1,

input#img-2:checked ~ .carousel-dots label#img-dot-2,

input#img-3:checked ~ .carousel-dots label#img-dot-3,

input#img-4:checked ~ .carousel-dots label#img-dot-4,

input#img-5:checked ~ .carousel-dots label#img-dot-5,

input#img-6:checked ~ .carousel-dots label#img-dot-6,

input#img-7:checked ~ .carousel-dots label#img-dot-7,

input#img-8:checked ~ .carousel-dots label#img-dot-8,

input#img-9:checked ~ .carousel-dots label#img-dot-9,

input#img-10:checked ~ .carousel-dots label#img-dot-10,

input#img-11:checked ~ .carousel-dots label#img-dot-11 {

opacity: 1;

}

input#img-1:checked ~ .carousel-dots label#img-dot-1,

input#img-2:checked ~ .carousel-dots label#img-dot-2,

input#img-3:checked ~ .carousel-dots label#img-dot-3,

input#img-4:checked ~ .carousel-dots label#img-dot-4,

input#img-5:checked ~ .carousel-dots label#img-dot-5,

input#img-6:checked ~ .carousel-dots label#img-dot-6,

input#img-7:checked ~ .carousel-dots label#img-dot-7,

input#img-8:checked ~ .carousel-dots label#img-dot-8,

input#img-9:checked ~ .carousel-dots label#img-dot-9,

input#img-10:checked ~ .carousel-dots label#img-dot-10,

input#img-11:checked ~ .carousel-dots label#img-dot-11 {

opacity: 1;

}

input:checked + .slide-container .nav label { display: block; }

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  font: 14px/1 'Open Sans', sans-serif;

  color: #555;

  background: #e5e5e5;

}

.gallery {

  width: 100%;

  margin: 5%;

  padding: 5%;

}

.gallery > div {

  position: relative;

  float: left;

  padding: 5px;

}

.gallery > div > img {

  transition: .1s transform;

  transform: translateZ(0); /* hack */

}

.gallery > div:hover {

  z-index: 1;

}

.gallery > div:hover > img {

  transform: scale(1.5,1.5);

}

.cf:before, .cf:after {

  display: table;

  content: "";

  line-height: 0;

}

.cf:after {

  clear: both;

}

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Have you looked at Adobe Portfolio?  It's free with qualifying Creative cloud plans.  Portfolio is hosted on Adobe's servers so there's nothing more to buy.  The layout themes are responsive to fit mobile, tablet and desktops.  The online site builder is simple to use, no coding skills required.  And it ties in with your Lightroom Collections/Albums.   So from start to finish, you can have your Portfolio site  up and running in 30 minutes or less. 

Adobe Portfolio | Build your own personalized website

Portfolio FAQ (Read Me)

Views

379

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

CSS Footer Question

Participant ,
Jul 06, 2019

Copy link to clipboard

Copied

So, I have a question if anyone knows the answer. Im working on my portfolio and found a Codepen I would like to use for my photography page. The only problem is, the pen Im using goes PAST the footer and I would like the footer to move further down the page with each batch of images I add. Ive added an example of the error Im running into, along with the CSS that is being used for the footer. I will also add the full CSS. I've been trying to figure this out on my own, but any help would be very awesome. Thanks.
FooterCSS.JPG

CSS-code.JPG

@charset "utf-8";

/* CSS Document */

body {

  background-color: #fff;

  margin: 0 auto;

  width: 100%;

  height: auto;

}

header {

  background-color: #020557;

  height: 100px;

  width: 100%;

}

header h1 {

  color: #ffffff;

  font-size: 50px;

  font-family: "Oswald", Arial, Helvetica, sans-serif;

  margin: 0;

  padding: 0;

  padding-left: 20px;

  line-height: 100px;

}

/*------Navigation------*/

.nav {

  background-color: #efefef;

  text-align: left;

  width: 100%;

  height: auto;

}

.nav ul {

  background: #efefef;

  font-family: "Oswald", Arial, Helvetica, sans-serif;

  list-style: none;

  position: relative;

  display: inline-block;

  padding: 0 25px;

  margin: 0 auto;

  width: auto;

}

.nav ul:after {

  content: "";

  clear: both;

  display: block;

}

.nav ul li {

  display: inline-block;

}

.nav ul li:hover > ul {

  display: block;

}

.nav ul li:hover {

  background: #020557;

  transition: 0.2s ease-in-out;

}

.nav ul li:hover a {

  color: #fff;

}

.nav ul li a {

  display: block;

  padding: 5px 22.25px;

  color: #020557;

  text-decoration: none;

}

.nav ul ul {

  display: none;

  text-align: left;

}

.nav ul ul {

  background: #020557;

  padding: 0;

  position: absolute;

  top: 100%;

  z-index: 99;

}

.nav ul ul li {

  display: block;

  border-top: 1px solid #fff;

  position: relative;

  z-index: 99;

}

.nav ul ul li a {

  padding: 5px 22.25px;

  color: #fff;

}

.nav ul ul li a:hover {

  background: #000000;

  transition: 0.25s ease-in-out;

}

footer {

  width: 100%;

  height: 40px;

  position: absolute;

  bottom: 0;

  left: 0;

  background: #020557;

}

footer p {

  color: #ffffff;

  font-family: "Oswald", Arial, Helvetica, Sans-serif;

  font-size: 10px;

  text-align: center;

}

.carousel {

    margin-left: 25%;

    margin-right: 25%;

}

ul.slides {

    display: block;

    position: relative;

    height: 600px;

    margin: 0;

    padding: 0;

    overflow: hidden;

    list-style: none;

}

.slides * {

    user-select: none;

    -ms-user-select: none;

    -moz-user-select: none;

    -khtml-user-select: none;

    -webkit-user-select: none;

    -webkit-touch-callout: none;

}

ul.slides input {

    display: none;

}

.slide-container {

    display: block;

}

.slide-image {

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    opacity: 0;

    transition: all .7s ease-in-out;

}  

.slide-image img {

    width: auto;

    min-width: 100%;

    height: 100%;

}

.carousel-controls {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 999;

    font-size: 100px;

    line-height: 600px;

    color: #fff;

}

.carousel-controls label {

    display: none;

    position: absolute;

    padding: 0 20px;

    opacity: 0;

    transition: opacity .2s;

    cursor: pointer;

}

.slide-image:hover + .carousel-controls label{

    opacity: 0.5;

}

.carousel-controls label:hover {

    opacity: 1;

}

.carousel-controls .prev-slide {

    width: 49%;

    text-align: left;

    left: 0;

}

.carousel-controls .next-slide {

    width: 49%;

    text-align: right;

    right: 0;

}

.carousel-dots {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 20px;

    z-index: 999;

    text-align: center;

}

.carousel-dots .carousel-dot {

    display: inline-block;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background-color: #fff;

    opacity: 0.5;

    margin: 10px;

}

input:checked + .slide-container .slide-image {

    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;

}

input:checked + .slide-container .carousel-controls label {

     display: block;

}

input#img-1:checked ~ .carousel-dots label#img-dot-1,

input#img-2:checked ~ .carousel-dots label#img-dot-2,

input#img-3:checked ~ .carousel-dots label#img-dot-3,

input#img-4:checked ~ .carousel-dots label#img-dot-4,

input#img-5:checked ~ .carousel-dots label#img-dot-5,

input#img-6:checked ~ .carousel-dots label#img-dot-6,

input#img-7:checked ~ .carousel-dots label#img-dot-7,

input#img-8:checked ~ .carousel-dots label#img-dot-8,

input#img-9:checked ~ .carousel-dots label#img-dot-9,

input#img-10:checked ~ .carousel-dots label#img-dot-10,

input#img-11:checked ~ .carousel-dots label#img-dot-11,

input#img-12:checked ~ .carousel-dots label#img-dot-12 {

opacity: 1;

}

input#img-1:checked ~ .carousel-dots label#img-dot-1,

input#img-2:checked ~ .carousel-dots label#img-dot-2,

input#img-3:checked ~ .carousel-dots label#img-dot-3,

input#img-4:checked ~ .carousel-dots label#img-dot-4,

input#img-5:checked ~ .carousel-dots label#img-dot-5,

input#img-6:checked ~ .carousel-dots label#img-dot-6,

input#img-7:checked ~ .carousel-dots label#img-dot-7,

input#img-8:checked ~ .carousel-dots label#img-dot-8 {

opacity: 1;

}

input#img-1:checked ~ .carousel-dots label#img-dot-1,

input#img-2:checked ~ .carousel-dots label#img-dot-2,

input#img-3:checked ~ .carousel-dots label#img-dot-3,

input#img-4:checked ~ .carousel-dots label#img-dot-4,

input#img-5:checked ~ .carousel-dots label#img-dot-5,

input#img-6:checked ~ .carousel-dots label#img-dot-6,

input#img-7:checked ~ .carousel-dots label#img-dot-7,

input#img-8:checked ~ .carousel-dots label#img-dot-8,

input#img-9:checked ~ .carousel-dots label#img-dot-9,

input#img-10:checked ~ .carousel-dots label#img-dot-10,

input#img-11:checked ~ .carousel-dots label#img-dot-11 {

opacity: 1;

}

input#img-1:checked ~ .carousel-dots label#img-dot-1,

input#img-2:checked ~ .carousel-dots label#img-dot-2,

input#img-3:checked ~ .carousel-dots label#img-dot-3,

input#img-4:checked ~ .carousel-dots label#img-dot-4,

input#img-5:checked ~ .carousel-dots label#img-dot-5,

input#img-6:checked ~ .carousel-dots label#img-dot-6,

input#img-7:checked ~ .carousel-dots label#img-dot-7,

input#img-8:checked ~ .carousel-dots label#img-dot-8,

input#img-9:checked ~ .carousel-dots label#img-dot-9,

input#img-10:checked ~ .carousel-dots label#img-dot-10,

input#img-11:checked ~ .carousel-dots label#img-dot-11 {

opacity: 1;

}

input:checked + .slide-container .nav label { display: block; }

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  font: 14px/1 'Open Sans', sans-serif;

  color: #555;

  background: #e5e5e5;

}

.gallery {

  width: 100%;

  margin: 5%;

  padding: 5%;

}

.gallery > div {

  position: relative;

  float: left;

  padding: 5px;

}

.gallery > div > img {

  transition: .1s transform;

  transform: translateZ(0); /* hack */

}

.gallery > div:hover {

  z-index: 1;

}

.gallery > div:hover > img {

  transform: scale(1.5,1.5);

}

.cf:before, .cf:after {

  display: table;

  content: "";

  line-height: 0;

}

.cf:after {

  clear: both;

}

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Have you looked at Adobe Portfolio?  It's free with qualifying Creative cloud plans.  Portfolio is hosted on Adobe's servers so there's nothing more to buy.  The layout themes are responsive to fit mobile, tablet and desktops.  The online site builder is simple to use, no coding skills required.  And it ties in with your Lightroom Collections/Albums.   So from start to finish, you can have your Portfolio site  up and running in 30 minutes or less. 

Adobe Portfolio | Build your own personalized website

Portfolio FAQ (Read Me)

Views

380

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 06, 2019 0
Adobe Community Professional ,
Jul 06, 2019

Copy link to clipboard

Copied

Can you please upload your problem page and assets to a TEST folder on your remote server and post the URL here so we can see the page  in a real browser.   When your question is answered, you can delete the page from your server.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 06, 2019 1
Adobe Community Professional ,
Jul 06, 2019

Copy link to clipboard

Copied

Never use positioning for primary layouts.   Page height is an unknown variable that changes depending on viewport, devices and user settings.   Height is always determined by what's inside the container, not explicit pixel values.   This is all the CSS you need for a footer.

footer {

     width:100%;

     background: #020557;

}

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 06, 2019 2
Participant ,
Jul 07, 2019

Copy link to clipboard

Copied

Nancy, to answer your 1st response, I have yet to buy a domain for my online portfolio, hence why there is no working URL and why I added the images to this forum.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2019 0
Adobe Community Professional ,
Jul 07, 2019

Copy link to clipboard

Copied

Have you looked at Adobe Portfolio?  It's free with qualifying Creative cloud plans.  Portfolio is hosted on Adobe's servers so there's nothing more to buy.  The layout themes are responsive to fit mobile, tablet and desktops.  The online site builder is simple to use, no coding skills required.  And it ties in with your Lightroom Collections/Albums.   So from start to finish, you can have your Portfolio site  up and running in 30 minutes or less. 

Adobe Portfolio | Build your own personalized website

Portfolio FAQ (Read Me)

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2019 1