CODEWITHSUNDEEP
htmlcsscss-position
Andree
Andree

Reputation: 1

Need help positioning the menu links in the footer

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

Upvotes: 0

Views: 92

Answers (2)

Alvaro Montoro
Alvaro Montoro

Reputation: 29655

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.

Upvotes: 1

Freelex
Freelex

Reputation: 186

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.

Upvotes: 0

Related Questions