Photoshop Question posted in
The official user guide can be found here.

'Footer' style bar at top of web page isn't working. CSS & HTML – Photoshop

http://biggerbyte.net/testwebsite/test.html

There is a hosted version of the website

@charset "utf-8";
 .footer {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  padding: 0;
  background-color: black;
  text-align: center;
  color: white;
  font-size: 14px;
}
.footer a {
  color: white;
}
.footer a:hover {
  color: #E8DE4D;
}
.background-image {
  background-image: url("http://garanthomas.me/images/dsc00813-2.jpg?crc=4106647053");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;
}
.content-box {
  position: absolute;
  top: 50px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-color: #4A4A4A;
  width: 450px;
  opacity: 0.65;
  text-align: center;
  align-content: center;
  font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, " sans-serif";
  font-size: 90;
  color: white;
}
.content-box p {
  text-align: center;
  align-content: center;
  font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, " sans-serif";
  font-size: 90;
  color: white;
}
.content-box h1 {
  text-align: center;
  align-content: center;
  font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, " sans-serif";
  font-size: 90;
  color: white;
}
.cb-slideshow,
.cb-slideshow:after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
  text-decoration: none;
  list-style-type: none;
}
.cb-slideshow:after {
  content: '';
  background: transparent url(../images/patterrn.png) repeat top left;
  text-decoration: none;
  list-style-type: none;
}
.cb-slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  animation: imageAnimation 36s linear infinite 0s;
  text-decoration: none;
  list-style-type: none;
}
.cb-slideshow li div {
  z-index: 1000;
  position: absolute;
  bottom: 30px;
  left: 0px;
  width: 100%;
  text-align: center;
  opacity: 0;
  color: #fff;
  animation: titleAnimation 36s linear infinite 0s;
  text-decoration: none;
  list-style-type: none;
}
.cb-slideshow li div h3 {
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  font-size: 200px;
  padding: 0;
  line-height: 200px;
  text-decoration: none;
  list-style-type: none;
}
.cb-slideshow li:nth-child(1) span {
  background-image: url(images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
  background-image: url(images/3.jpg);
  animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
  background-image: url(images/2.jpg);
  animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
  background-image: url(images/4.jpg);
  animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
  background-image: url(images/5.jpg);
  animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
  background-image: url(images/6.jpg);
  animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
  animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
  animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
  animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
  animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
  animation-delay: 30s;
}
@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@keyframes titleAnimation {
  0% {
    opacity: 0
  }
  8% {
    opacity: 0.5
  }
  17% {
    opacity: 0.5
  }
  19% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
.no-cssanimations .cb-slideshow li span {
  opacity: 1;
}
@media screen and (max-width: 1140px) {
  .cb-slideshow li div h3 {
    font-size: 140px
  }
}
@media screen and (max-width: 600px) {
  .cb-slideshow li div h3 {
    font-size: 80px
  }
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">

  <title>index</title>
  <link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

  <div class="footer">©2016 Garan Thomas - <a href="contact.html">Contact Me</a>.</div>

  <ul class="cb-slideshow">
    <li>
      <span>Image 01</span>
      <div>
        <h3>Brecon</h3>
      </div>
    </li>

    <li>
      <span>Image 03</span>
      <div>
        <h3>Swansea</h3>
      </div>
    </li>

    <li><span>Image 02</span>
      <div>
        <h3>Brecon</h3>
      </div>
    </li>

    <li>
      <span>Image 04</span>
      <div>
        <h3>Neath</h3>
      </div>
    </li>

    <li>
      <span>Image 05</span>
      <div>
        <h3>Brecon Beacons</h3>
      </div>
    </li>

    <li>
      <span>Image 06</span>
      <div>
        <h3>Rhigos</h3>
      </div>
    </li>
  </ul>

  <center>

    <div class="content-box">
      <h1>Welcome to my website</h1>
      <p>Welcome to my photography website. Here you can find my photography work, website work and other things I decide to put up.</p>
    </div>

  </center>
</body>

</html>

Above is the code I used. The code is messy and alot of it is copied from a small guide I followed. I’m still learning this type of code so please excuse any mistakes. What I found was without the .footer bar at the top of my web page I found a white gap which is essentially a bare website where you can see anything written there and so on. I couldn’t find a way to solve this so I thought I’d add a little footer style bar along the top of the website where I’d put navigation there down the line but for now I stole the footer from another website and quickly edited it to be at the top of the web page. I think it looks quite nice but I noticed that the hyperlink I had and the text inside the bar cannot be highlighted, as if something is above it blocking it on the web page like a layer in photoshop for example. Can anyone help me fix this? tell me what’s wrong or anything I’ve done in my code that I should avoid in future? or any suggestions for the website? I’m more than welcome to any response.

Thank you for the time and answers.

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you everyone for the answers. I fixed it by adding a Z-Index of a higher number than my slideshow and I also got rid of the silly gap that was there by using the 

    ul.cb-slideshow {
    margin-top:0;
}

  2. 0

    If you want to resolve this without placing the bar there, the issue causing the white space at the top is that your entire page content is within an unordered list. By default, browsers will apply a top margin to unordered lists, so all you would have to do is override that like so:

    ul.cb-slideshow {
    margin-top:0;
}

    If you want to keep the bar at the top, the issue there is that the z-index of the “footer” bar is lower than that of the unordered list. You can resolve that by setting the z-index of the footer:

    .footer {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    padding: 0;
    background-color: black;
    text-align: center;
    color: white;
    font-size: 14px;
    z-index: 1; /* Make sure footer is above ul */
}
    Login or Signup to reply.
  3. 0

    Try and add footer to the bottom after 

    </center>

<footer class="footer">©2016 Garan Thomas - <a href="contact.html">Contact Me</a>.</footer>
    Login or Signup to reply.
  4. 0

    Just add z-index: 1; to the .footer in the CSS. However, you should name it something else than footer…

    Login or Signup to reply.
  5. 0

    For your footer, give it a z-index higher than anything else to keep it on top and set the bottom to 0. Also, in the HTML, put it at the end of the body.
    So your final css for the footer becomes.

    .footer {
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  background-color: black;
  text-align: center;
  color: white;
  font-size: 14px;
  z-index: 100000;
}

    And for the whitespace on top, it’s your unordered list automatically getting a margin-top from the browser, use this:

    ul.cb-slideshow {
margin-top: 0;
}

    Fiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search