8

小さな問題があります。フッターをposition: absolute. しかし、margin: auto画面の中央に配置することはもう機能しません。

html:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
        <link rel="shortcut icon" href="../IMAGES/favicon.ico">
        <title>TEST</title>
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="../css/stylesheet.css">
    </head>
    <body>
        <div id="header">
            <div id="logo">
                <img src="../IMAGES/logo.png" />
            </div>
            <div id="logotitel">
                Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
            </div>
        </div>
        <div id="nav">
            <div id="links">
                <a href="index.php"><div class="link">Home</div></a>
                <a href="wie.php"><div class="link">Wie is wie</div></a>
                <a href="fotos.php"><div class="link">Foto's</div></a>
                <a href="repertoire.php"><div class="link">Repertoire</div></a>
                <a href="links.php"><div class="link">Links</div></a>
                <a href="contact.php"><div class="link">Contact</div></a>
            </div>
        </div>
        <div class="clear"></div>
        <div id="content">
            TEST
        </div>
        <div class="clear"></div>
        <div id="footer">
            <div id="copy">
                Developed by Yoshi &copy vAntstAd
           </div>
       </div>
   </body>
</html>

CSS:

/* PAGE LAYOUT */
html
{
        padding: 0px;
        margin: 0px;
}

body
{
        background-image: url(../IMAGES/background.png);
        padding: 0px;
        margin: 0px;
        color: white;
        font-family: 'Source Sans Pro', serif, sans-serif;
}

.clear
{
        clear: both;
}

/* HEADER */
#header
{
        width: 1100px;
        height: 150px;
        background-color: #282828;
        margin: auto;
        border-bottom: solid;
        border-color: red;
}

#logo
{
        width: 283px;
        height: 100px;
        margin: auto;
}

#logotitel
{
        width: 1100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: x-large;
}

/* NAV */
#nav
{
        width: 1100px;
        height: 50px;
        margin-top: 25px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 25px;
        background-color: red;
}

#links
{
        width: 600px;
        height: 50px;
        margin: auto;
}

.link
{
        width: 100px;
        height: 50px;
        line-height: 50px;
        float: left;
        text-align: center;
        color: white;
        text-decoration: none;
}

.link:hover
{
        color: #282828;
        text-decoration: underline;
}

/* CONTENT */

#content
{
        width: 1100px;
        height: auto;
        margin: auto;
        color: #282828;
        position: relative;
}

/* FOOTER */

#footer
{
        width: 1100PX;
        height: 50px;
        position: absolute;
        bottom: 0;
        margin: auto;
        background-color: #282828;
}

#copy
{
        width: auto;
        float: right;
        margin-right: 5px;
        height: 50px;
        line-height: 50px;
}
4

2 に答える 2

13

フッターの幅 (1100px) がわかっているので、left:50%;margin-left:-550pxそれを中央に配置するだけです。

例: 絶対配置要素を
中央揃え http://jsfiddle.net/vdWQG/

したがって、フッターは次のようになります。

#footer
{
    width: 1100PX;
    height: 50px;
    position: absolute;
    bottom: 0;
    left:50%;           /* Add this */
    margin-left:-550px; /* Add this (this is half of #footers width) */
    background-color: #282828;
}

ユーザーが下にスクロールしたときに要素をページの下部に貼り付けたい場合は、position: fixed代わりにposition:absolute

于 2013-04-12T00:44:20.317 に答える