-1

Currently working on my first ever website for my study using HTML and CSS and there's a massive gap below the footer which I cannot get rid of, I only have 3 pages on my website so far but it is repeating it on 2/3 of them.

I put the pages into paste bin since together it's over 2000ln long and can't post it all in here.

1 - https://pastebin.com/9ds87Jft

2 - https://pastebin.com/SMtkFVzR

<!-- Start of Code -->
<!DOCtype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pop Stop — New Zealands Best Range of Pop Vinyl!</title>
    <!-- Start of Styling -->
    <style>
        body {
            background-color: #d9d9d9;
            margin: 0;
            margin-right: -3px;
            overflow: hidden;
            overflow-y: scroll;
        }
        .menu {
            width: 100%;
            background-color: #850000;
            overflow: hidden;
            margin-left: 1010px;
        }
        .menu ul {
            margin: 10;
            padding: 10;
            list-style: none;
            line-height: 60px;
        }

        .menu li {
            float: left;

        }

        .menu ul li a {
            background-color: #850000;
            text-decoration: none;
            width: 150px;
            display: block;
            text-align: center;
            color:#f2f2f2;
            font-size: 16px;
            font-family: "Source Sans Pro";
            letter-spacing: 0.5px;
        }

        .menu li a:hover {
            color: #fff;
            opacity: 25;
            font-size: 17px;
        }

        .search-form {
            margin-top: 15px;
            float: right;
            margin-right: 100px;
        }

        input[type=text] {
            padding: 7px;
            border: none;
            font-size: 14px;
            font-family: "Source Sans Pro";
        }

        button {
            float:right;
            background: #5f0000;
            color: white;
            border-radius: 0 5px 5px 0;
            cursor:pointer;
            position:relative;
            padding: 7px;
            font-family: "Source Sans Pro";
            border: none;
            font-size: 16px;
        }

        .footer {
            font-family: "Source Sans Pro";
            background-color: #850000;
            font-size: 16px;
            color: white;
            width: auto;
            height: 75px;
            margin-top: -3500px;
            margin-right: -1095px;
            overflow: hidden;
            margin-bottom: -1000px;
            
        }

        .copyright {
            float: right;
            font-family: "Source Sans Pro";
            margin-right: 15px;
            margin-top: 13px;
            font-size: 16px;
        }

        .footercontact1 {
            font-family: "Source Sans Pro";
            color: white;
            font-size: 16px;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            margin-top: 28px;
            margin-left: 830px;
            display: inline-block;
        }

        .footercontact2 {
            color: white;
            text-decoration: none;
        }

        .auckland-sylviapark {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 24px;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            list-style: none;
        }

        .hamilton-terapa {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 24px;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            list-style: none;
        }

        .wellington-queensgate {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 24px;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            list-style: none;
        }

        .christchurch-papanui {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 24px;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            list-style: none;
        }

        .christchurch-riccarton {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 24px;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            list-style: none;
        }
        
        .sylvia-location {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 13px;
            text-decoration: none;
            list-style: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
        }
        
        .terapa-location {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 13px;
            text-decoration: none;
            list-style: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
        }

        .queensgate-location {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 13px;
            text-decoration: none;
            list-style: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
        }

        .papanui-location {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 13px;
            text-decoration: none;
            list-style: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
        }

        .riccarton-location {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 13px;
            text-decoration: none;
            list-style: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
        }

        .sylvia-location-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color: black;
            text-align: center;
            display: block;
        }

        .terapa-location-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color: black;
            text-align: center;
            display: block;
        }

        .queensgate-location-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color: black;
            text-align: center;
            display: block;
        }

        .papanui-location-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color: black;
            text-align: center;
            display: block;
        }

        .riccarton-location-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color: black;
            text-align: center;
            display: block;
        }

        .sylvia-contact {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 13px;
            text-decoration: none;
            list-style: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;  
        }

        .terapa-contact {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 13px;
            text-decoration: none;
            list-style: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;  
        }
        
        .queensgate-contact {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 13px;
            text-decoration: none;
            list-style: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;  
        }
        
        .papanui-contact {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 13px;
            text-decoration: none;
            list-style: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;  
        }

        .riccarton-contact {
            font-family: "Source Sans Pro";
            color: black;
            font-size: 13px;
            text-decoration: none;
            list-style: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block; 
        }

        .sylvia-contact-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color: black;
            text-align: center;
            display: block;
        }

        .terapa-contact-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color: black;
            text-align: center;
            display: block;
        }

        .queensgate-contact-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color: black;
            text-align: center;
            display: block;
        }

        .papanui-contact-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color: black;
            text-align: center;
            display: block;
        }

        .riccarton-contact-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color: black;
            text-align: center;
            display: block;
        }

        .sylvia-hours {
            font-family: "Source Sans Pro";
            font-size: 13px;
            list-style: none;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
        }

        .terapa-hours {
            font-family: "Source Sans Pro";
            font-size: 13px;
            list-style: none;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
        }

        .queensgate-hours {
            font-family: "Source Sans Pro";
            font-size: 13px;
            list-style: none;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
        }

        .papanui-hours {
            font-family: "Source Sans Pro";
            font-size: 13px;
            list-style: none;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
        }

        .riccarton-hours {
            font-family: "Source Sans Pro";
            font-size: 13px;
            list-style: none;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            display: inline-block;
        }

        .sylvia-hours-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color:black;
            text-align: center;
            display: block;
        }

        .terapa-hours-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color:black;
            text-align: center;
            display: block;
        }

        .queensgate-hours-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color:black;
            text-align: center;
            display: block;
        }

        .papanui-hours-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color:black;
            text-align: center;
            display: block;
        }

        .riccarton-hours-text {
            font-size: 10px;
            font-family: "Source Sans Pro";
            color:black;
            text-align: center;
            display: block;
        }


    </style>
    <!-- End of Styling -->

    <link rel="icon" type="image/x-icon" href="https://popstop.co.nz/wp-content/uploads/2021/09/cropped-favicon-2-png-280x280.png?crop=1">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="css">

<!-- Header -->
</head> 
<body>

    <nav class="menu">
        <div style="position:relative; left: 5px; top: 15px; background-color: #850000;">
            <img src="images/popstop robot.jpg" width="50" height="50" style="float:left"/>        
        </div>
        <div style="position:relative; right: 20px; top:5px; background-color: #850000;">
            <img src="images/popstop.png" width="120" height="67" style="float:right"/>        
        </div>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="departments.html">Departments</a></li>
            <li><a href="contact.html">Contact Us</a></li>
            <li><a href="account.html">Account</a></li>
            <li><a href="cart.html">Shopping Cart</a></li>
        </ul>
        <form class ="search-form">
            <input type="text" placeholder="Search">
            <button><img src="images/Search.png" width="15px" height="15px"></button>
        </form>
    </nav>

    <!-- Sylvia Park Details -->
    <div class="sylviapark">
        <div style="position:relative; right: -1050px; bottom: -30px;">
            <img src="images/contact/sylviapark.PNG" width="300" height="400">
        </div>
    <div class="auckland-sylviapark">
        <div style="position:relative; right: -550px; bottom: 375px;">
            <li><b>Auckland - Sylvia Park</b></li>
        </div>
    <div class="sylvia-location">
        <div style="position:relative; right: -480px; bottom: 375px;">
                <li><b>LOCATION</b></li>
        </div>
    </div>

    <div class="sylvia-location-text">
        <div style="position:relative; right: -475px; bottom: 375px;">
            <p>Shop 246, Sylvia Park</p>
            <p>286 Mount Wellington Highway</p>
            <p>Mount Wellington</p>
            <p>Auckland 1060</p>
        </div>
    </div>

    <div class="sylvia-contact">
        <div style="position:relative; right: -635px; bottom: 516px;">
            <li><b>CONTACT US</b></li>
        </div>
    </div>
    
    <div class="sylvia-contact-text">
        <div style="position:relative; right: -630px; bottom: 516px;">
            <p>Phone : 09 218 6511</p>
            <p>Email: sylviapark@popstop.co.nz</p>
        </div>
    </div>

    <div class="sylvia-hours">
        <div style="position:relative; right: -480px; bottom: 475px;">
            <li><b>OUR HOURS</b></li>
        </div>
    </div>

    <div class="sylvia-hours-text">
        <div style="position:relative; right: -475px; bottom: 475px;">
            <p>Monday 9:00AM - 7:00PM</p>
            <p>Tuesday 9:00AM - 7:00PM</p>
            <p>Wednesday 9:00AM - 7:00PM</P>
            <p>Thursday 9:00AM - 9:00PM</p>
            <p>Friday 9:00AM - 9:00PM</p>
            <p>Saturday 9:00AM - 7:00PM</p>
            <p>Sunday 9:00AM - 9:00PM</p>
        </div>
    </div>



    <!-- Te Rapa Details -->
    <div class="terapa">
        <div style="position:relative; right: -875px; bottom: 861px;">
            <img src="images/contact/terapa.PNG" width="300" height="400">
        </div>
    <div class="hamilton-terapa">
        <div style="position:relative; right: -1155px; bottom: 1270px;">
            <li><b>Hamilton - Te Rapa</b></li>
        </div>
    <div class="terapa-location">
        <div style="position:relative; right: -1100px; bottom: 1275px;">
                <li><b>LOCATION</b></li>
        </div>
    </div>

    <div class="terapa-location-text">
        <div style="position:relative; right: -1095px; bottom: 1275px;">
            <p>Shop L238, The Base</p>
            <p>The Base Parade</p>
            <p>Northgate</p>
            <p>Hamilton 3200</p>
        </div>
    </div>

    <div class="terapa-contact">
        <div style="position:relative; right: -1225px; bottom: 1415px;">
            <li><b>CONTACT US</b></li>
        </div>
    </div>
    
    <div class="terapa-contact-text">
        <div style="position:relative; right: -1220px; bottom: 1415px;">
            <p>Phone : 07 949 8993</p>
            <p>Email: terapa@popstop.co.nz</p>
        </div>
    </div>

    <div class="terapa-hours">
        <div style="position:relative; right: -1110px; bottom: 1375px;">
            <li><b>OUR HOURS</b></li>
        </div>
    </div>

    <div class="terapa-hours-text">
        <div style="position:relative; right: -1105px; bottom: 1375px;">
            <p>Monday 9:00AM - 6:00PM</p>
            <p>Tuesday 9:00AM - 6:00PM</p>
            <p>Wednesday 9:00AM - 6:00PM</P>
            <p>Thursday 9:00AM - 9:00PM</p>
            <p>Friday 9:00AM - 9:00PM</p>
            <p>Saturday 9:00AM - 6:00PM</p>
            <p>Sunday 9:00AM - 6:00PM</p>
        </div>
    </div>

    <!-- Queensgate Details -->
    <div class="queensgate">
        <div style="position:relative; right: -1515px; bottom: 1753px;">
            <img src="images/contact/queensgate.PNG" width="300" height="400">
        </div>
    <div class="wellington-queensgate">
        <div style="position:relative; right: -1815px; bottom: 2162px;">
            <li><b>Wellington - Queensgate</b></li>
        </div>
    <div class="queensgate-location">
        <div style="position:relative; right: -1745px; bottom: 2162px;">
                <li><b>LOCATION</b></li>
        </div>
    </div>

    <div class="queensgate-location-text">
        <div style="position:relative; right: -1740px; bottom: 2162px;">
            <p>Shop 145, Queensgate</p>
            <p>Cnr Queens Dr & Bunny St</p>
            <p>Hutt Central</p>
            <p>Wellington 5011</p>
        </div>
    </div>

    <div class="queensgate-contact">
        <div style="position:relative; right: -1905px; bottom: 2305px;">
            <li><b>CONTACT US</b></li>
        </div>
    </div>
    
    <div class="queensgate-contact-text">
        <div style="position:relative; right: -1900px; bottom: 2305px;">
            <p>Phone : 04 213 9773</p>
            <p>Email: queensgate@popstop.co.nz</p>
        </div>
    </div>

    <div class="queensgate-hours">
        <div style="position:relative; right: -1750px; bottom: 2270px;">
            <li><b>OUR HOURS</b></li>
        </div>
    </div>

    <div class="queensgate-hours-text">
        <div style="position:relative; right: -1745px; bottom: 2270px;">
            <p>Monday 9:00AM - 6:00PM</p>
            <p>Tuesday 9:00AM - 6:00PM</p>
            <p>Wednesday 9:00AM - 6:00PM</P>
            <p>Thursday 9:00AM - 10:00PM</p>
            <p>Friday 9:00AM - 9:00PM</p>
            <p>Saturday 9:00AM - 6:00PM</p>
            <p>Sunday 9:00AM - 5:30PM</p>
        </div>
    </div>


    <!-- Papanui Details -->
    <div class="papanui">
        <div style="position:relative; right: -890px; bottom: 2220px;">
            <img src="images/contact/papanui.PNG" width="300" height="400">
        </div>
    <div class="christchurch-papanui">
        <div style="position:relative; right: -1190px; bottom: 2625px;">
            <li><b>Christchurch - Papanui</b></li>
        </div>
    <div class="papanui-location">
        <div style="position:relative; right: -1125px; bottom: 2625px;">
                <li><b>LOCATION</b></li>
        </div>
    </div>

    <div class="papanui-location-text">
        <div style="position:relative; right: -1120px; bottom: 2625px;">
            <p>34 Main North Road</p>
            <p>Papanui</p>
            <p>Christchurch 8053</p>
        </div>
    </div>

    <div class="papanui-contact">
        <div style="position:relative; right: -1285px; bottom: 2743px;">
            <li><b>CONTACT US</b></li>
        </div>
    </div>
    
    <div class="papanui-contact-text">
        <div style="position:relative; right: -1280px; bottom: 2743px;">
            <p>Phone : 03 423 9526</p>
            <p>Email: papanui@popstop.co.nz</p>
        </div>
    </div>

    <div class="papanui-hours">
        <div style="position:relative; right: -1125px; bottom: 2735px;">
            <li><b>OUR HOURS</b></li>
        </div>
    </div>

    <div class="papanui-hours-text">
        <div style="position:relative; right: -1120px; bottom: 2735px;">
            <p>Monday 9:00AM - 6:00PM</p>
            <p>Tuesday 9:00AM - 6:00PM</p>
            <p>Wednesday 9:00AM - 6:00PM</P>
            <p>Thursday 9:00AM - 8:00PM</p>
            <p>Friday 9:00AM - 8:00PM</p>
            <p>Saturday 9:00AM - 5:00PM</p>
            <p>Sunday 9:00AM - 4:00PM</p>
        </div>
    </div>

    <!-- Riccarton Details -->
    <div class="riccarton">
        <div style="position:relative; right: -1540px; bottom: 3088px;">
            <img src="images/contact/riccarton.PNG" width="300" height="400">
        </div>
    <div class="christchurch-riccarton">
        <div style="position:relative; right: -1840px; bottom: 3495px;">
            <li><b>Christchurch - Riccarton</b></li>
        </div>
    <div class="riccarton-location">
        <div style="position:relative; right: -1760px; bottom: 3495px;">
                <li><b>LOCATION</b></li>
        </div>
    </div>

    <div class="riccarton-location-text">
        <div style="position:relative; right: -1760px; bottom: 3495px;">
            <p>Upstairs Shop 234, Westfield</p>
            <p>129 Riccarton Road</p>
            <p>Christchurch 8041</p>
        </div>
    </div>

    <div class="riccarton-contact">
        <div style="position:relative; right: -1930px; bottom: 3612px;">
            <li><b>CONTACT US</b></li>
        </div>
    </div>
    
    <div class="riccarton-contact-text">
        <div style="position:relative; right: -1920px; bottom: 3612px;">
            <p>Phone : 03 420 3717</p>
            <p>Email: riccarton@popstop.co.nz</p>
        </div>
    </div>

    <div class="papanui-hours">
        <div style="position:relative; right: -1770px; bottom: 3605px;">
            <li><b>OUR HOURS</b></li>
        </div>
    </div>

    <div class="papanui-hours-text">
        <div style="position:relative; right: -1770px; bottom: 3605px;">
            <p>Monday 9:00AM - 6:00PM</p>
            <p>Tuesday 9:00AM - 6:00PM</p>
            <p>Wednesday 9:00AM - 6:00PM</P>
            <p>Thursday 9:00AM - 9:00PM</p>
            <p>Friday 9:00AM - 9:00PM</p>
            <p>Saturday 9:00AM - 6:00PM</p>
            <p>Sunday 9:00AM - 6:00PM</p>
        </div>
    </div>
    
    <!-- Footer -->
    <div class="footer">
        <footer>
            <div class="copyright">
                <p><small><b>© Pop Stop 2023</b></small></p>

            </div>
            <div class="contactfooter">
                <a href="contact.html" class="footercontact1"><b>Contact Pop Stop</b></a>
                <a href="contact.html" class="footercontact2"><b>Store Locations</b></a>    
            </div>
        </footer>
    </div>

</body>
</html>
<!-- End of Code -->
gekohasnonecko
  • 7
  • 1
  • Don't use position relative for the layout. We now have grid and flexbox, these are better layout tools. – Joshua Mar 31 '23 at 03:10
  • Where abouts would I not use the position relative? There's a lot of position relative in this - Don't think position relative is in anything relating to the footer. – gekohasnonecko Mar 31 '23 at 03:14
  • Does this answer your question? [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) – scatter Mar 31 '23 at 03:16
  • You will probably need to remove them all and use either flexbox or grid for the layout. Relative positioning is typically used in conjunction with absolute positioning. However, it does not remove the element from the normal document flow. This means that your position values such as left, right, top, and bottom will still work and move the elements, but the original spacing of the elements will remain. – Joshua Mar 31 '23 at 03:20
  • 1
    It may sound hard, but please don't use phrases like "I'm a newbie", because they are not relevant to the question, and won't help future readers. Then, try to shrink your code to a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) – HoRn Apr 03 '23 at 03:29

1 Answers1

-1

firs of all, your provided links didn't work for me, it could be a result of filtering or sanctions or what ever,, but thank to you for providing some of your code i can answer the question

second, if this is the result of a self study, Good Job and keep going but if this is the result of taking a course, i want the teacher ALIVE !

my dear friend do not use positions for each and every element, it's simply not necessary and mostly causing problems like this

quick answer is you're placing your elements out of their nature flow... try this CSS code to see their nature flow

*{
    position: static !important;
}

the real problem is this : you are pushing your elements right and thus you can not see them but they are still there, you see their empty place on your viewport and you consider it empty while it is not...

you've mentioned that you are learning web design so here's my life saving recommendation for your entire career life

use positions only and onllly if necessary, save the nature flow of your page and do not try to place your elements into the screen like pieces of puzzle otherwise you'll get stuck which such problems, and also you can't make it responsive never ever...

Specially position absolute ( your using position relative which is much easier to deal with than absolute positioning )

use positions when you want to make your elements overlapping each other (placing one on the top or beneath the other one) use positions when you want one of your elements to get stuck with another (they need to have parent/child relationship and parRent most be Relative and child most be absolute) use positions when you want to make your elements stuck on viewport at all or sometimes (fixed and sticky) though there are a lot more use cases for positions it's quiet tricky and needs experience to know when to use positions and when not, but generally try avoiding it

also remember this, if you are using numbers more than 100px for margin`` or paddingor left or right or etc, you're "probably" making a mistake ( using more than500px``` is a sign of an absolute mistake and it could be rewritten using better solutions such as float, flexbox, grid and etc )

good luck

Mahdiar Mransouri
  • 652
  • 1
  • 4
  • 11