Rhigo Rhigo - 18 days ago 5
CSS Question

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

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.

Answer

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 */
}
Comments