• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

CSS Footer Question

Participant ,
Jul 06, 2019 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;

}

Views

678

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
community guidelines

correct answers 1 Correct answer

Community Expert , Jul 07, 2019 Jul 07, 2019

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

...

Votes

Translate

Translate
Community Expert ,
Jul 06, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
Jul 06, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Participant ,
Jul 07, 2019 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.

Votes

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
community guidelines
Community Expert ,
Jul 07, 2019 Jul 07, 2019

Copy link to clipboard

Copied

LATEST

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines