Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Problem with footer

Edrol97

Well-Known Coder
How do I get rid of this gap in my footer? This is the code.

HTML:
<footer class="Bad_Timesfooter">
  <footer style="background-color: black;">
  <a href="Home.html"><div class="title_text3">&#169 Eliot Lord 2024</div></a>
  <br>
  <button onclick="topFunction()" id="myBtn" title="Go to top">Back to the Top</button>
  <div class="column"><a href="Home.html"><p>Phone Home</p></a></div>
  <div class="column"><a href="about_me.html"><p>About Me</p></div></a>
  <div class="column"><a href="Art.html"><p>The Main Event</p></a></div>
  <div class="column"><a href="mailto:[email protected]"><p>Hit Me Up</p></a></div>
  <div class="column"><a href="The_Pun.html"><p>The Pun</p></a></div>
  <div class="column"><a href="https://procartoonists.org/profile/eliotlord/" target="_blank"><p>Trust Me, I'm a Professional</p></a></div>
  <div class="column"><a href="Mail.html"><p>The Fail</p></a></div>
  <div class="column"><a href="cv.html"><p>The Professional Bit</p></a></div>
  <div class="column2"><a href="Home.html"><img src="img/background/Bad%20Times%20logo%20horizontal%20white%20colour.png" width="500px"></a></div>  
  <div style="background-color: black;">
    <a href="https://www.facebook.com/house.of.lord.illustration1/" target="_blank"><img src="img/background/Facebook Logo.png" class="fa fa-facebook"></a>
    <a href="https://twitter.com/eliotlord1" target="_blank"><img src="img/background/Twitter%20Logo.png" class="fa fa-twitter"></a>
    <a href="https://www.instagram.com/house_of_lord_illustration/?hl=en" target="blank"><img src="img/background/Instagram logo.png" class="fa fa-instagram"></a>
  </div>
</footer>
 

Attachments

  • Screenshot 2024-05-11 at 19.02.40.png
    Screenshot 2024-05-11 at 19.02.40.png
    392.8 KB · Views: 7
Solution
Looks like something has a margin that is causing the gap. Does the 'bad times' image or it's container have a margin bottom? Do the social links or their container have a margin top?
The gap is most likely caused by the overflowing image. Either give the "Bad Times" image absolute positioning, or if you still want that spacing, but just to be black, then give the footer element a black background colour.
Are there intentionally 2 footer elements? One of them has no closing tag.
 
The gap is most likely caused by the overflowing image. Either give the "Bad Times" image absolute positioning, or if you still want that spacing, but just to be black, then give the footer element a black background colour.
Are there intentionally 2 footer elements? One of them has no closing tag.
How do I style that specific image with absolute positioning in the css file though?
 
How do I style that specific image with absolute positioning in the css file though?
CSS:
.column2 {
  position: absolute;
}

That might not actually be the best way to go about it, now that I'm thinking about it, because the image will probably be somewhere at the top of the footer.
A better approach might be to use overflow: visible; on the footer. I can't be 100% sure though. Could you show your CSS for the footer?
 
CSS:
.column2 {
  position: absolute;
}

That might not actually be the best way to go about it, now that I'm thinking about it, because the image will probably be somewhere at the top of the footer.
A better approach might be to use overflow: visible; on the footer. I can't be 100% sure though. Could you show your CSS for the footer?
CSS:
footer{
    background-color: black;
    font-family: 'Times New Roman', Times, serif;
    width: screen;
}
footer a:hover{
    -webkit-text-fill-color: white;
    font-family: 'Times New Roman', Times, serif;
}
footer a{
    -webkit-text-fill-color: white;
    font-family: 'Times New Roman', Times, serif;
}

.fa {
    padding: 20px;
    font-size: 30px;
    width: 80px;
    height: 80px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    padding-bottom: 20px;
    bottom: 150px;
  }
  
  .fa:hover {
    opacity: 0.7;
  }
  
  .fa-facebook {
    background: #2e73b7;
    color: white;
    height: 80px;
    width: 80px;
  }
  
  .fa-twitter {
    background: #429bd6;
    color: white;
    height: 80px;
    width: 80px;
  }
  .fa-instagram {
    color: white;
    height: 80px;
    width: 80px;
  }
 
This can't be all the CSS for the footer. What about the .column elements? and the image?
Did you try overflow: visible;?
From the specific page css here

CSS:
@font-face {
    font-family: Times;
    src: url(Fonts/TIMES%20CY.TTF);
}

header{
    fill: black;
}

body::-webkit-scrollbar {
    width: 1em;
  }
  
body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px black;
  }
  
body::-webkit-scrollbar-thumb {
    background-color: black;
    outline: 1px solid black;}

footer{
    background-color: black;
    font-family: 'Times New Roman', Times, serif;
    width: 100%;
    overflow: visible;
}

footer a:hover{
    -webkit-text-fill-color: white;
    font-family: 'Times New Roman', Times, serif;
}

footer a{
    -webkit-text-fill-color: white;
    font-family: 'Times New Roman', Times, serif;
}

.title_text3{
    font-family: 'Times New Roman', Times, serif;
    -webkit-text-fill-color: white}

#column2{
    align-items: center;
}

.fa {
    padding: 20px;
    font-size: 30px;
    width: 80px;
    height: 80px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    padding-bottom: 20px;
    bottom: 150px;
  }
 

  .fa:hover {
    opacity: 0.7;
  }
 
  .fa-facebook {
    background: #2e73b7;
    color: white;
    height: 80px;
    width: 80px;
  }
 
  .fa-twitter {
    background: #429bd6;
    color: white;
    height: 80px;
    width: 80px;
  }

  .fa-instagram {
    color: white;
    height: 80px;
    width: 80px;
  }

  #roche{
    float: right;
    bottom: 200px;
    background-color: black;
    width: 100%;
  }

From the general CSS on the specific icons we have this

CSS:
.fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    padding-bottom: 20px;
    bottom: 150px;
  }
  
  .fa:hover {
    opacity: 0.7;
  }
  
  .fa-facebook {
    background: #2e73b7;
    color: white;
  }
  
  .fa-twitter {
    background: #429bd6;
    color: white;
  }
  .fa-instagram {
    background: #ffffff;
  }
  #roche{
    float: right;
    bottom: 100px;
  }
 
Looks like something has a margin that is causing the gap. Does the 'bad times' image or it's container have a margin bottom? Do the social links or their container have a margin top?
 
Solution

Buy us a coffee!

Back
Top Bottom