CODEWITHSUNDEEP
htmlcss
Steveatc
Steveatc

Reputation: 11

Footer positioning html/css

The issue that I'm having (the main one, anyways), is that my footer is stuck in the middle of my page and not at the bottom. I have tried several different scenarios (absolute positioning, margin, height, etc.) to no avail. I know some of the coding is not "best practice", so go easy on me, but if someone could assist, that would be great.

https://jsfiddle.net/scampbellatc/hbweegr6/#&togetherjs=oFhSKaw0Ms

Please let me know if that link does not work....and just in case....

body {
  background-size: 100%;
  position: static;
  width: 100%;
  height: 100%;
}

.header {
  top: 0;
  background: background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 30%, rgba(0, 0, 0, 0.65) 52%, rgba(0, 0, 0, 0.65) 82%, rgba(0, 0, 0, 0.65) 92%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 30%, rgba(0, 0, 0, 0.65) 52%, rgba(0, 0, 0, 0.65) 82%, rgba(0, 0, 0, 0.65) 92%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 30%, rgba(0, 0, 0, 0.65) 52%, rgba(0, 0, 0, 0.65) 82%, rgba(0, 0, 0, 0.65) 92%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
  /* IE6-9 */
  copy;
  height: 120px;
  width: 100%;
  position: fixed;
  -webkit-box-shadow: 0px 3px 28px -2px rgba(79, 70, 79, 0.76);
  -moz-box-shadow: 0px 3px 28px -2px rgba(79, 70, 79, 0.76);
  box-shadow: 0px 3px 28px -2px rgba(79, 70, 79, 0.76);
  opacity: .9;
  margin: auto;
  padding: 10px;
  z-index: 10;
}

.headerContent img {
  display: block;
  border-radius: 10px;
  height: 100px;
  width: 1024px;
  margin: auto;
  -webkit-box-shadow: 2px 1px 75px 16px rgba(0, 0, 0, 1);
  -moz-box-shadow: 2px 1px 75px 16px rgba(0, 0, 0, 1);
  box-shadow: 2px 1px 75px 16px rgba(0, 0, 0, 1);
}

.navbar {
  width: 100%;
  margin: auto;
  margin-top: 10px;
  background: rgba(192, 211, 221, 1);
  background: -moz-linear-gradient(top, rgba(192, 211, 221, 1) 0%, rgba(80, 170, 230, 1) 99%, rgba(161, 207, 237, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(192, 211, 221, 1)), color-stop(99%, rgba(80, 170, 230, 1)), color-stop(100%, rgba(161, 207, 237, 1)));
  background: -webkit-linear-gradient(top, rgba(192, 211, 221, 1) 0%, rgba(80, 170, 230, 1) 99%, rgba(161, 207, 237, 1) 100%);
  background: -o-linear-gradient(top, rgba(192, 211, 221, 1) 0%, rgba(80, 170, 230, 1) 99%, rgba(161, 207, 237, 1) 100%);
  background: -ms-linear-gradient(top, rgba(192, 211, 221, 1) 0%, rgba(80, 170, 230, 1) 99%, rgba(161, 207, 237, 1) 100%);
  background: linear-gradient(to bottom, rgba(192, 211, 221, 1) 0%, rgba(80, 170, 230, 1) 99%, rgba(161, 207, 237, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#c0d3dd', endColorstr='#a1cfed', GradientType=0);
  border-radius: 3px;
}

.navbar ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navbar ul li {
  list-style-type: none;
  display: inline;
}

.navbar ul li a {
  font-size: 24px;
  text-decoration: none;
  color: black;
  padding: 10px 40px;
  display: inline;
}

.navbar ul li a:hover {
  color: white;
}

@import "compass/css3";
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}


/* Icons */

@font-face {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  src: url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.eot") format("embedded-opentype"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.woff") format("woff"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.ttf") format("truetype"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.svg#FontAwesomeRegular") format("svg");
}

.icon-user:before {
  content: "\f007";
}

.icon-lock:before {
  content: "\f023";
}

[class^="icon-"],
[class*=" icon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  &:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
  }
}

.icon-large {
  position: absolute;
  top: 11px;
  left: 10px;
  color: white;
  &:before {
    vertical-align: top;
    font-size: 1.3333333333333333em;
  }
}

.icon-lock {
  left: 12px;
}

form {
  z-index: 10;
  float: right;
  width: 250px;
  margin: 150px auto;
  padding: 15px;
  border-radius: 0.3em;
  border: 1px solid rgba(0, 0, 0, 0.6);
  background: #222;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 1px 3px 2px rgba(0, 0, 0, 0.3), inset 0 -100px 50px rgba(255, 255, 255, 0.1);
  position: fixed;
  &:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    width: 15px;
    height: 15px;
    margin-left: -8px;
    background: inherit;
    top: -8px;
    transform: rotate(45deg);
    border-top: 1px solid rgba(0, 0, 0, 0.6);
    border-left: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
  }
}

#input_wrapper {
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 0.3em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -50px 30px rgba(255, 255, 255, 0.1), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}

p {
  position: relative;
}

label {
  color: transparent;
  font-size: 1px;
  position: absolute;
  visibility: hidden;
}

input[type=text],
input[type=password] {
  width: 100%;
  padding: 10px 10px 10px 35px;
  border: 0 none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  &:hover {
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
  }
}

#login {
  border-bottom: 1px solid black;
  border-radius: 0.3em 0.3em 0 0;
}

#pass {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 0.3em 0.3em;
}

input[type=submit] {
  display: block;
  position: relative;
  width: 100%;
  padding: 8px;
  margin-top: 8px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 0.2em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 20px 20px rgba(255, 255, 255, 0.2), 0 2px 1px rgba(0, 0, 0, 0.2), 0 0 2px 8px rgba(50, 50, 50, 0.1);
  transition: all 0.3s ease-out;
  font-family: Helvetica, sans-serif;
  font-size: 1em;
  line-height: 1em;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-font-smoothing: subpixel-antialiased;
  &:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -20px 20px rgba(200, 200, 200, 0.1), 0 2px 1px rgba(0, 0, 0, 0.2), 0 0 2px 8px rgba(100, 100, 100, 0.1);
  }
  &:active {
    top: 1px;
  }
}

#log-in {
  background: #1e83e5;
}

#register {
  background: #464d56;
}

.pagebreak {
  position: absolute;
  top: 550px;
  height: 10px;
  border: 2px;
  box-shadow: 0 10px 10px -10px #8c8c8c;
}

.pagetext {
  width: 1024px;
  top: 225px;
  text-shadow: 4px 2px 4px rgba(150, 150, 150, 0.64);
  right: 190px;
  font-size: 26px;
  text-shadow: font-weight: bold;
  margin: auto;
  padding: 20px;
  display: block;
  text-align: right;
  position: absolute;
  font-family: malayalam MN, sans-serif;
}

.wrapper img {
  z-index: -5;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}

.wrapper img:hover {
  -webkit-filter: grayscale(100%);
}

.Services {
  position: absolute;
  top: 650px;
  left: 200px;
  padding: 10px;
}

.Services img {
  height: 200px;
  width: 325px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #eee;
  -webkit-box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
}

.Contact {
  position: absolute;
  top: 950px;
  left: 200px;
  display: block;
  padding: 10px;
}

.Contact img {
  height: 200px;
  width: 325px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #eee;
  -webkit-box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
}

.About {
  position: absolute;
  top: 950px;
  right: 200px;
  display: block;
  padding: 10px;
}

.About img {
  height: 200px;
  width: 325px;
  border-color: #eee;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  -webkit-box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
}

.Testimonials {
  position: absolute;
  top: 670px;
  right: 200px;
  display: block;
  padding: 10px;
}

.Testimonials img {
  height: 200px;
  width: 325px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #eee;
  -webkit-box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 26px -4px rgba(0, 0, 0, 0.75);
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  font-size: 16px;
  font-family: verdana;
  width: 100%;
  background-color: #f6f6f6;
}

.footer ul {
  float: left;
  margin: 0;
  padding: 0;
  text-align: left;
}

.footer ul li {
  list-style-type: none;
  display: block;
}

.footer ul li a {
  text-decoration: none;
}
<body background="http://i1149.photobucket.com/albums/o595/steve_campbell6/chainimage-abstract-blue-backgrounds-cartoon-wallpapers-wallpaper-desktop_zpslhxbbnlr.jpg">




  <div class="header">
    <div class="headerContent">
      <a href="#">
        <img src="http://i1149.photobucket.com/albums/o595/steve_campbell6/GensysSol_zps7ux8uhtk.jpg" alt=" photo GensysSol_zps7ux8uhtk.jpg" style="height=100px; width=140px;" alt="GenSolPic">
      </a>
      <div class="navbar">
        <ul>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Product Information</a>
          </li>
          <li>
            <a href="#">Contact Us</a>
          </li>
        </ul>

      </div>
    </div>

  </div>

  <form>
    <div id="input_wrapper">
      <p>
        <label for="login">Login</label>
        <i class="icon icon-user icon-large"></i>
        <input type="text" name="login" id="login" placeholder="Login">

      </p>
      <p>
        <label for="pass">Password</label>
        <i class="icon icon-lock icon-large"></i>
        <input type="password" name="pass" id="pass" placeholder="Password">

      </p>
    </div>
    <p>
      <input type="submit" id="log-in" name="log-in" value="Log in">
      <input type="submit" id="register" name="register" value="Register">
    </p>
  </form>

  <div class="pagetext">
    <h3>Tasks and Procedures at Your Fingertips!</h3>
    <br>
    <br>
    <h3>We Focus on CMS, So You Can Focus on Patient Healthcare</h3>
    <br>
    <br>
    <h3>Access to Equipment Service Manuals for Your Entire Inventory</h3>
  </div>
  <hr class="pagebreak">
  <div class="wrapper">
    <div class="Services">

   
      <a href="#">

        <img src="http://i1149.photobucket.com/albums/o595/steve_campbell6/Service-3_zpsntwq1bfj.jpg" alt=" photo Service-3_zpsntwq1bfj.jpg">
      </a>
    </div>

    <div class="Contact">
      <a href="#">
        <img src="http://i1149.photobucket.com/albums/o595/steve_campbell6/Contact%20Us%20copy_zpsvzztano4.jpg" alt=" photo Contact Us copy_zpsvzztano4.jpg">
      </a>
    </div>

    <div class="About">
      <a href="#">
        <img src="http://i1149.photobucket.com/albums/o595/steve_campbell6/about-us-banner_zpsb55oa9ye.jpg" alt=" photo about-us-banner_zpsb55oa9ye.jpg" alt="AboutPic">
      </a>

    </div>

    <div class="Testimonials">
      <a href="#">
        <img src="http://i1149.photobucket.com/albums/o595/steve_campbell6/Testimonials_zpsclzomi6h.jpg" alt=" photo Testimonials_zpsclzomi6h.jpg" alt="TestPic">
      </a>
    </div>
  </div>


<div style="clear: both;">

</div>
  <div class="footer">

    <ul>
      <li>
        <p>Resources</p>
      </li>
      <li>
        <a href="#">Product Demo</a>
      </li>
      <li>
        <a href="#">About Us</a>
      </li>
      <li>
        <a href="#">Current Clients</a>
      </li>

    </ul>
  </div>
</body>

Upvotes: 1

Views: 89

Answers (2)

Katana314
Katana314

Reputation: 8620

There's not really a uniform answer to your issue. In general, you are vastly overusing position: absolute and position: fixed to put content where you want it.

When you read these two paragraphs, the second one is about a full line below the first one. If I decided I didn't need the first paragraph and took it out, I wouldn't then need to re-position the second paragraph so that it's at the top of my post. With nothing above it, this paragraph would automatically take up the next available line. That is HTML's "standard layout", and that's what you should be going for with the footer. It shouldn't need a CSS rule to be told to appear "at the bottom of the page" - just by being the last element in your <body>, it should be at the bottom. Unfortunately, because your other elements are given an absolute position, they're removed from standard layout, and are allowed to appear on top of other things.

The header and your sidebar form seem like they make sense with absolute positioning, but your main body needs to use standard layout (meaning, no custom positioning). To help you along with this, it is possible to ensure that the .pageText element takes up "at least the height of the browser, minus the height of the footer".

min-height: calc(100vh - 40px)

This will be only a minimum, and it will grow bigger if you add more content to the page.

(Please make sure you read the whole post! This is NOT a "add the CSS attribute and it works" thing!)

Upvotes: 1

Snyzzle
Snyzzle

Reputation: 1

Have you tried using the position fixed? And I would only use left: 0 OR right: 0. I assume you want the footer to use the entire width of the screen with this. Try going for width: 100%; for this.

.footer{
position: fixed;
left: 0px;
bottom:0px;
width:100%;
}

If you want to have the footer centred add margin: auto;

Upvotes: 0

Related Questions