CODEWITHSUNDEEP
htmlcss
Nathan
Nathan

Reputation: 125

My footer has moved half way up my page, and I have unnecessary scrolling

So I recently added a sort of bubble-slideshow esc thing to my website to make it a bit better. For some unexplainable reason this pushed my footer down to the bottom of my page (and it also extended the page downwards so now I have to scroll even though everything should be able to fit on the page). I was screwing around with it yesterday to figure out how to fix it (I'm not very experienced at CSS), and I couldn't find the problematic line. Now today I check my localhost and the page is completely screwed up and the footer is half way up the page, shall I note that I still have the option to scroll even though beyond half way down my page it's entirely blank.

Below is my CSS, involving the entirety of the different styles I used to make the footer (which is probably more than necessary, but again, noob). It was definitely different last night, hence why it's all screwed up today, but my recent backup doesn't have the footer.

html,
body {
  margin: 0;
  padding: 0;
  height: 90%;
}
#container {
  min-height: 100%;
  bottom: 0;
  position: relative;
}
#footer {
  width: 100%;
  height: 60px;
  bottom: 0;
  background: #DADADA;
  display: block;
}
ul2 {
  list-style-type: none;
  margin: 0;
  text-align: center;
  display: block;
  bottom: 0;
  padding: 20px 16px;
}
li5 a {
  text-family: verdana;
  color: black;
  padding: 20px 20px;
  text-align: center;
  text-decoration: none;
}
<div id="container">
  <div id="footer">
    <ul2>
      <li5><a href="Contact.html">Contact Us</a>
      </li5>
      <li5>A test project</li5>
      <li5><a href="About.html">About</a>
      </li5>
    </ul2>
  </div>
</div>

Upvotes: 0

Views: 771

Answers (2)

Masoud
Masoud

Reputation: 333

Also you can try this code, no need for extra container:

<html>
<head>
<style>
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
}
#footer {
  width: 100%;
  bottom: 0;
  background: #DADADA;
  display: block;
  position: absolute;
}
ul {
  list-style-type: none;
  margin: 0;
  text-align: center;
  display: block;
  bottom: 0;
}
li{
  font-family: verdana;
  color: black;
  padding: 20px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
</style>
</head>
<body>
  <div id="footer">
    <ul>
      <li><a href="Contact.html">Contact Us</a>
      </li>
      <li>A test project</li5>
      <li><a href="About.html">About</a>
      </li>
    </ul>
  </div>
</body>
</html>

Upvotes: 0

dippas
dippas

Reputation: 60563

change your height:90% to 100% in html/body set position:absolute or fixed in #footer (depending if you want to scroll and let footer fixed or not, it was unclear to me)

Note: there isn't property text-family, use font-family instead

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#container {
  min-height: 100%;
  bottom: 0;
  position: relative;
}
#footer {
  position: fixed; /* or - absolute - */
  width: 100%;
  height: 60px;
  bottom: 0;
  background: #DADADA;
  display: block;
}
ul {
  list-style-type: none;
  margin: 0;
  text-align: center;
  display: block;
  bottom: 0;
  padding: 20px 16px;
}
li a {
  font-family: verdana;
  color: black;
  padding: 20px;
  text-align: center;
  text-decoration: none;
}
<div id="container">
  <div id="footer">
    <ul>
      <li><a href="Contact.html">Contact Us</a>
      </li>
      <li>A test project</li>
      <li><a href="About.html">About</a>
      </li>
    </ul>
  </div>
</div>

Upvotes: 1

Related Questions