Reputation: 139

footer is not at the bottom of the page

i have a problem where my footer element is not at the bottom of the page while i browse the page over mobile this my html


<!DOCTYPE html>
<html>
    <head>
        <title>Ziad Alian</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
        <h4>Ziad Alian</h4>
        <img class="imgz" src="zCmakv5P_400x400.jpg"/></img>
        <ul>
            <li><a href="#aboutme">ABOUT ME</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
        <hr>
        <div>
            <p id="hello">Hello World! </p>
            <p id="aboutme">I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br/>
                 I studied Geomatics but I don't like it cause computer science is my passion.<br/> 
                 I'm a self taught web developer, My goal is to be a fucll stack developer using 
                HTML5, CSS, JavaScript, React, Python and Django.<br/>
                I love programming and everything that has to do with technology, the internet and writing code.
             </p>
        </div>
        <hr>
        <div id="contact">
            <ul>
                 <li><a href="https://github.com/ziaalian">GitHub</a> </li>   
                 <li><a href="https://www.linkedin.com/in/ziad-alian-24b1139b/">LinkedIn</a> </li>   
                 <li><a href="https://twitter.com/ziaalian">Twitter</a> </li>   
                 <li><a href="https://www.instagram.com/ziaalian/">Instagram</a> </li>   
            </ul>
            
        </div>
        <br>
        <footer>&copy; 2020 Ziad Alian</footer>
    </body>
</html>

And this is my CSS

this where my footer element been added


  footer {
      background-color: black;
      color: white;
     padding: 0.5em;
         
  }

Edit

i added this code

 body {
    background-color:whitesmoke;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    
}

h4 {
    text-align: center;
    font-size: 68px;
    font-weight: 80;
    color: teal;
    }
.imgz {
    width: 200px;
    border-radius: 50%;
    
    
    
}
#hello {
    text-align: center;
    font-size: 30px;
    color: teal;
    }

#aboutme {
    font-size: medium;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
}


p {
    text-align: justify;
  }


      
  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color:white;
    padding: 0.5em;
    margin: 0;
    margin-top: auto;
      }

and it's now fixed like it's just go down and up with me while i scroll the page i just want it to stay at the bottom

mywebsite

Upvotes: 0

Answers (4)

Mikail B.

Reputation: 243

I have developed a website for you with the same structure as your old website, but with only minor changes.

The source code now has a better structure.
Comments have been added to avoid losing track of the source code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
    <title>2020 Ziad Alian</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <div id="container">
       <div id="header">
          <!-- Header start -->
          <h1>
             <center>2020 Ziad Alian</center>
          </h1>
          <!-- Header end -->
       </div>
       <div id="body">
          <!-- Body start -->
          <center>
             <img class="imgz" src="zCmakv5P_400x400.jpg"></img>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li> ABOUT ME</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>PROJECTS</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>CONTACT</li></a></p>
          </center>
          <hr>
          <p>
          <center style="font-size: 30px"> HELLO WORLD</style></center>
          </p>
          <center>
             <p><strong>I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br><br>
                I studied Geomatics but I don't like it cause computer science is my passion.<br><br>
                I'm a self taught web developer, My goal is to be a fucll stack developer using HTML5, CSS, JavaScript, React, Python and Django.<br><br>
                I love programming and everything that has to do with technology, the internet and writing code.</strong>
             </p>
          </center>
          <hr>
          <center>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li> GitHub</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>LinkedIn</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>Twitter</li></a></p>
             <p>
                <a href="https://LinkToTheWebsite.com">
             <li>Instagram</li></a></p>
          </center>
          <!-- Body end -->
       </div>
       <div id="footer">
          <!-- Footer start -->
          <center>
             <p><font color="#FFFFFF">&copy; 2020 Ziad Alian</font></p>
          </center>
          <!-- Footer end -->
       </div>
    </div>
 </body>
</html>

CSS

  html,
  body {
      margin:0;
      padding:0;
      height:100%;
  }
  #container {
      min-height:100%;
      position:relative;
  }
  #header {

      padding:10px;
  }
  #body {
      padding:10px;
      padding-bottom:60px;    
  }
  #footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:60px;    
      background:#000000;
  }

  .imgz {
  border-radius: 50%;
  }

  #header p,
  #header h1 {
      margin:0;
      padding:10px 0 0 10px;
  }
  #footer p {
      margin:0;
      padding:10px;
  }

Upvotes: 0

Mikail B.

Reputation: 243

You have not integrated some properties into the CSS-file.

You have not integrated the block of the element footer into the HTML-file.

New footer properties

footer {

   background-color: black;

   color: white;

   padding: 0.5em;

   position:fixed;

   left:0px;

   bottom:0px;

   height:30px;

   width:100%;

}

Old footer properties

footer {

   background-color: black;

   color: white;

   padding: 0.5em;

}

New footer

  <footer> &copy; 2020 Ziad Alian</footer>

These properties fix the object for the view of the user visiting the website, which means that the object is dynamic for the view of the user.

Upvotes: 1

KarimovFarda

Reputation: 1

Try using position: fixed to keep your footer pinned to the bottom of the viewport.

When using fixed positioning, you'll also want to be sure you set the left: 0 and width: 100% properties to make the footer the same width as the viewport.

footer {
  background-color: black;
  color: white;
  padding: 0.5em;
  position:fixed;
  bottom:0;
  left:0;
  width:100%
}

<footer>&copy; 2020 Ziad Alian</footer>

Upvotes: 0

Vincenzo

Reputation: 433

You could also try giving the main section a min-height: 100vh so to push the footer down. See if that helps.

Upvotes: 0

footer is not at the bottom of the page

Answers (4)

Related Questions