0

I am having trouble with my footer menu links and social icon buttons. I created the footer so that it will stretch across the entire browser window. However now when I lay the menu links and social media icons inside the div they are moving whenever the page is re-sized. What do I need to do in order to make the placement of the menu links and social media links stay in the proper place?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MECA Basketball Club</title>

<script type="text/javascript"     
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1">  
</script>
<script type="text/javascript" src="jQuery/infinite-rotator.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-2.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-3.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-4.js"></script>

<style type="text/css">
    body
    {
        background-image: url(img/backgroundimg.png);
        background-repeat: repeat-x;
        /*background-color:white;*/
    }

    #maincontainer
    {
        width: 1024px;
        margin: 0 auto;
    }

    #header
    {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 47px;
        background-image: url(img/headerimg.png);
    }

    #headerlogo
    {
        position: absolute;
        top: 0;
        width: 201px;
        height: 118px;
        background-image: url(img/headerlogo_padding.png);
    }


    #header-nav-menu
    {
        position: relative;
        left: 580px;
        top: 0px;
        width: 400px;
        list-style-type: none;
    }

    .nav-button-header-menu-1
    {
        float: right;
        font-family: Calibri;
        color: white;
        text-decoration: none;
        width: 125px;
    }

    .nav-button-header-menu-2
    {
        float: right;
        font-family: Calibri;
        color: white;
        text-decoration: none;
        width: 104px;
    }

    .nav-button-header-menu-3
    {
        float: right;
        font-family: Calibri;
        color: white;
        text-decoration: none;
        width: 105px;
    }

    .nav-button-header-menu-1:hover
    {
        color: #d4d3d2;
    }

    .nav-button-header-menu-2:hover
    {
        color: #d4d3d2;
    }

    .nav-button-header-menu-3:hover
    {
        color: #d4d3d2;
    }

    #main-nav-container
    {
        width: 197px;
        height: 500px;
        float: left;
        margin-top: 95px;
    }



    #mainnav
    {
        position: relative;
        top: 0px;
        left: 0px;
        list-style-type: none;
        margin: 0;
        padding-left: 8px;
    }

    .navbutton-red-top
    {
        /*Button Style*/
        display: block;
        height: 40px;
        width: 193px;
        background-color: #c41002;
        padding-top: 20px;
        border-bottom: 1px solid;
        border-color: #a30e03;
        /*Text Style*/
        font-family: Calibri;
        font-weight: 800;
        color: white;
        text-align: center;
        text-decoration: none;
        /*Making Button Fancy*/
        border-radius: 10px 10px 0px 0px;
        box-shadow: 0px 3px 8px #515050;
    }

    .navbutton-red
    {
        /*Button Style*/
        display: block;
        height: 40px;
        width: 193px;
        background-color: #c41002;
        padding-top: 20px;
        border-bottom: 1px solid;
        border-color: #a30e03;
        /*Text Style*/
        font-family: Calibri;
        font-weight: 800;
        color: white;
        text-align: center;
        text-decoration: none;
        /*Making Button Fancy*/
        box-shadow: 0px 3px 8px #515050;
    }

    .navbutton-black
    {
        /*Button Style*/
        display: block;
        height: 40px;
        width: 193px;
        background-color: black;
        padding-top: 20px;
        border-bottom: 1px solid;
        border-color: #515050;
        /*Text Style*/
        font-family: Calibri;
        font-weight: 800;
        color: white;
        text-align: center;
        text-decoration: none;
        /*Making Button Fancy*/
        box-shadow: 0px 3px 8px #515050;
    }

    .navbutton-black-bottom
    {
        /*Button Style*/
        display: block;
        height: 40px;
        width: 193px;
        background-color: black;
        padding-top: 20px;
        border-bottom: 1px solid;
        border-color: #515050;
        /*Text Style*/
        font-family: Calibri;
        font-weight: 800;
        color: white;
        text-align: center;
        text-decoration: none;
        /*Making Button Fancy*/
        border-radius: 0px 0px 10px 10px;
        box-shadow: 0px 3px 8px #515050;
    }


    .navbutton-red-top:hover
    {
        background: #e91101;
    }

    .navbutton-red:hover
    {
        background: #e91101;
    }

    .navbutton-black:hover
    {
        background: #2c2b2b;
    }

    .navbutton-black-bottom:hover
    {
        background: #2c2b2b;
    }

    #content
    {
        background-color: white;
        width: 1024px;
        float: left;
        box-shadow: 0px 3px 20px #515050;
    }

    #rotating-item-wrapper
    {
        position: relative;
        margin-left: 240px;
        margin-top: 20px;
        padding: 150px;
    }

    .rotating-item
    {
        display: none;
        position: absolute;
        top: 0;
        left: 0px;
    }

    #placeholderdiv
    {
        padding-left: 40px;
        padding-top: 10px;
    }

    #slideshow
    {
        padding-left: 40px;
        padding-top: 10px;
    }

    #video1
    {
        padding-left: 40px;
        padding-top: 10px;
        float: left;
    }

    .stats-offense
    {
        padding-left: 10px;
        padding-top: 10px;
        float: left;
    }

    #events1
    {
        padding-left: 40px;
        padding-top: 10px;
        float: left;
    }

    #rotating-item-wrapper-2
    {
        position: relative;
        left: 455px;
        top: 281px;
    }

    .rotating-item-2
    {
        display: none;
        position: absolute;
        top: 0;
        left: 0px;
    }

    #rotating-item-wrapper-3
    {
        position: relative;
        left: 240px;
        top: 532px;
        padding: 300px;
    }

    .rotating-item-3
    {
        display: none;
        position: absolute;
        top: 0;
        left: 0px;
    }

    .stats-defense
    {
        position: relative;
        left: 766px;
        top: -68px;
        overflow: auto;
        padding-bottom: 206px;
    }

    #rotating-item-wrapper-4
    {
        position: relative;
        left: 240px;
        top: -260px;
        padding: 35px;
    }

    .rotating-item-4
    {
        display: none;
        position: absolute;
        top: 0;
        left: 0px;
    }



    #footer-home
    {
        position: absolute;
        bottom: -600px;
        left: 0;
        min-width: 100%;
        height: 200px;
        background-image: url(img/footerimg.png);
    }

    #footer-nav-menu-left
    {
        position: absolute;
        left: 0px;
        list-style-type: none;
        margin-left: 430px;
    }

    #footer-nav-menu-right
    {
        position: absolute;
        list-style-type: none;
        margin-left: 550px;
    }

    .nav-button-footer
    {
        font-family: Calibri;
        color: white;
        text-decoration: none;
    }

        .nav-button-footer:hover
        {
            color: #c5c5c4;
        }

    #SocialMedia
    {
        font-family: Calibri;
        color: white;
    }

    #Facebook-icon
    {
    }

    #Twitter-icon
    {
    }
  </style>
</head>
<body>
<div id="maincontainer">
    <div id="header"></div>

    <div id="headerlogo"></div>
    <ul id="header-nav-menu">
        <li><a class="nav-button-header-menu-3" href="#RegisterLeague">Login</a></li>
        <li><a class="nav-button-header-menu-2" href="#RegisterLeague">Join The
Club</a></li>
        <li><a class="nav-button-header-menu-1" href="#RegisterLeague">Register  
League</a></li>
    </ul>


    <div id="content">
        <div id="main-nav-container">

            <ul id="mainnav">
                <li><a class="navbutton-red-top" href="#stats">STATS</a></li>
                <li><a class="navbutton-red" href="#stats">EVENTS</a></li>
                <li><a class="navbutton-red" href="#stats">FIND A LEAGUE</a></li>
                <li><a class="navbutton-red" href="#stats">SCHEDULE</a></li>
                <li><a class="navbutton-black" href="#stats">BECOME A REFEREE</a></li>
                <li><a class="navbutton-black" href="#stats">REGISTER LEAGUE</a></li>
                <li><a class="navbutton-black-bottom" href="#stats">JOIN THE CLUB</a>  
</li>

            </ul>
        </div>




        <div id="rotating-item-wrapper">
            <img class="rotating-item" src="img/ContentArea1/AdOne/MainAd1.png" />
            <img class="rotating-item" src="img/ContentArea1/AdOne/MainAd2.png" />
        </div>


        <div id="video1">
            <img src="img/ContentArea1/Video/video1img.png" />
        </div>
        <div class="stats-offense">
            <img src="img/ContentArea1/Stats/stats1img.png" />
        </div>
        <div id="events1">
            <img src="img/ContentArea1/Events/events1.png" />
        </div>
        <div id="rotating-item-wrapper-2">
            <img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad2Img.png" />
            <img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad23Img.png" />
        </div>
        <div id="rotating-item-wrapper-3">
            <img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad3Img.png" />
            <img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad4Img.png" />
        </div>
        <div class="stats-defense">
            <img src="img/ContentArea1/Events/events1.png" />
        </div>
        <div id="rotating-item-wrapper-4">
            <img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner1img.png" 
/>
            <img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner2img.png" 
/>
        </div>

    </div>

    <div id="footer-home">
        <ul id="footer-nav-menu-left">
            <li><a class="nav-button-footer" href="#RegisterLeague">About</a></li>
            <li><a class="nav-button-footer" href="#RegisterLeague">Contact Us</a></li>
            <li><a class="nav-button-footer" href="#RegisterLeague">Press Inquiry</a> 
</li>

        </ul>
        <ul id="footer-nav-menu-right">

            <li><a class="nav-button-footer" href="#RegisterLeague">Terms of Use</a>
</li>
            <li><a class="nav-button-footer" href="#RegisterLeague">Privacy Policy</a>
</li>
        </ul>
        <div id="SocialMedia">Follow Us</div>
        <div id="Facebook-icon">
            <img src="img/SocialMediaIcon/FB_icon.png" alt="Facebook" /></div>
        <div id="Twitter-icon">
            <img src="img/SocialMediaIcon/Twitter_icon.png" alt="Twitter" /></div>
        <div id="Instagram-icon">
            <img src="img/SocialMediaIcon/IG_icon.png" alt="Instagram" /></div>
        <div id="YouTube-icon">
            <img src="img/SocialMediaIcon/YouTube_icon.png" alt="YouTube" /></div>



    </div>
</div>



</body>
</html>

Click the link below to see how it currently looks: http://www.micre8tivegroup.com/default.html

9
  • 1
    Create a demo please.
    – Ryan Kinal
    Aug 7, 2014 at 16:41
  • How do I do that? I tried going through JBin but I dont know how to upload images..Is there another site I can use?
    – Andree
    Aug 7, 2014 at 16:54
  • Don't use images, substitute with background colors. The images are not mandatory, only the positioning of the links.
    – IndieRok
    Aug 7, 2014 at 17:09
  • Here is the demo. I just put it on one of our test domains.
    – Andree
    Aug 7, 2014 at 17:27
  • micre8tivegroup.com/default.html
    – Andree
    Aug 7, 2014 at 17:27

2 Answers 2

1

As I was writing on the comments section, this is not a single thing issue. This is a problem with many things being done incorrectly. But mainly:

  • The structure of the page is poorly designed. I understand that this page is more of testing, but creating a web site is not directly getting into coding but analyzing and designing a solution. Coding may be the "fun part", but it's not the most important.
  • The positioning of the elements is incorrect. As a personal recommendation: avoid using position:absolute for controls. In your page, the logo is a good example of position absolute (although it could be done in other ways), all the rest absolute positioning shouldn't be there and breaks the page.

Here you have a link to a version the solves the position problems that you commented about: http://muzaw.com/test.html. Test it, and let me know if that's what you were aiming for (I know not everything will fit perfectly but that's just a matter of changing some values in the CSS).

The changes that I made:

  • Removed the position absolute for the header and footer (or changed to position:relative)
  • Restructured the page to fit a "more convenient" web page design.
  • Changed the CSS of some of the elements.

I understand you are learning, that I sound patronizing, and that my comments and answer may frustrate you; but if you start learning bad things from the beginning, it will be worse later.

1
  • 1
    +1 This solution is much more efficient than mine. "Better far to teach a hungry man to fish than to give him a fish already caught."
    – Freelex
    Aug 7, 2014 at 21:22
0

I've found a way to do what you want, but the header and the footer will be the same width as your mainContainer.

Just change your CSS to :

#footer-home
{
    position: absolute;
    bottom: 0; /* Put it back to 0 */
    left: 0;
    min-width: 100%;
    height: 200px;
    background-image: url(img/footerimg.png);
}

#maincontainer
{
    width: 1024px;
    margin: 0 auto;
    /* Add the code below */
    left: 0;
    right: 0;
    position: absolute;
}

That way, the footer will always stay at the bottom.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.