Question

我的页脚菜单链接和社交图标按钮出现问题。我创建了页脚，使其在整个浏览器窗口中展开。然而，现在当我在div中放置菜单链接和社交媒体图标时，只要页面被重新调整大小，它们就会移动。为了使菜单链接和社交媒体链接的位置保持在适当的位置，我需要做些什么？

<!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>

点击下面的链接查看目前的状态： http://www.micre8tivegroup.com/default.html

Answer 1

正如我在评论部分写的那样，这不是一件简单的问题。许多事情都是错误的，这是一个问题。但主要是：

页面结构设计不佳。我知道这个页面更多的是测试，但创建一个网站不是直接进入编码，而是分析和设计解决方案。编码可能是＆＃34;有趣的部分＆＃34;，但它不是最重要的。
元素的定位不正确。作为个人建议：避免使用position:absolute进行控制。在您的页面中，徽标是绝对位置的一个很好的例子（尽管可以通过其他方式完成），所有其余的绝对定位都不应该存在并打破页面。

在这里，您有一个版本的链接，可以解决您评论的位置问题：http://muzaw.com/test.html。测试一下，让我知道你的目标是什么（我知道并不是所有东西都能完美契合，但这只是改变CSS中某些值的问题）。

我所做的更改：

删除页眉和页脚的绝对位置（或更改为position:relative）
重新构建页面以适应更方便的＆＃34;网页设计。
更改了某些元素的CSS。

我知道你正在学习，我听起来很光顾，我的评论和答案可能会让你感到沮丧;但如果你从一开始就开始学习坏事，那么以后会更糟。

Answer 2

我找到了一种方法来做你想做的事，但页眉和页脚的宽度与你的mainContainer相同。

只需将您的CSS更改为：

#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;
}

这样，页脚将始终保持在底部。

需要帮助定位页脚中的菜单链接

2 个答案: