6

clear:both を使用するフッターに上マージンを追加できません。パディングを使用すると、問題が解決するようです。しかし、それはフッターの上の実線を台無しにします。

index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Study at Best</title>
    <link rel="stylesheet" rev="stylesheet" href="styles/layout.css" />
    <link rel="stylesheet" rev="stylesheet" href="styles/ddm.css" />
    <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.corner.js"></script>
    <script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<div id="container">
    <div id="logo">
        <img class="imageCenter" src="images/logo.png" alt="Best School"/>
    </div>
    <div id="navigation">
        <?php include("navigation.html"); ?>    
    </div>
    <div id="header">

    </div>
    <div id="left-column">
        <h2>left-column</h2>
        <p>
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.  
        </p>
    </div>
    <div id="main-column">
        <h2>main-column</h2>
        <p>
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        </p>
    </div>
    <div id="right-column">
        <h2>right-column</h2>
        <p>
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
        Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
        non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
        In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
        </p>
    </div>
    <?php include("footer.html"); ?>
</div>
</body>
</html>

フッター.html:

<div id="footer">
<a href="#">Home |</a>
<a href="#">About Us |</a>
<a href="#">Contact Us |</a>
<a href="#">Menu Item 4 |</a>
<a href="#">Menu Item 5 |</a>
</div>

スタイル.css:

/*Default*/
* { margin: 0px; padding: 0px; }
body { font-size: 75%; font-family: Arial, Helvetica, sans-serif; }
ul { list-style: none }
a { outline: none; }
a img { border: none; }
h1 { font-size: 3.0em; }
h2 { 
    font-style: normal;
    font-size: 1.0em; 
    padding: 5px 10px;
    margin-bottom: 10px;
    color: #FFF;
    background-color: #A53030;
}

/*Tools*/
.textCenter { text-align: center; }
.imageCenter { margin-left: auto; margin-right: auto; display: block; }
.floatLeft: { float: left; }
.floatRight: { float: right; }
.clear { clear: both; }

/*Page*/
#container {
    width: 800px;
    margin: 0px auto;
}

#logo {
    width: 170px;
    height: 60px;
    margin: 5px;
}

#header {
    width: 800px;
    height: 200px;
    background-image: url('../images/best.jpg');
}

#navigation {
    color: white;
    width: 800px;
    background-color: #000;
}

#left-column {
    width: 150px;
    padding: 10px;
    float: left; 
    color: #FFF;
    background-color: #A53030;
}

#main-column {
    width:360px;
    padding: 10px;
    float: left; 
}

#right-column {
    width: 200px;
    padding: 10px;
    float: right; 
}

#footer {
    margin-top: 50px;
    width: 800px;
    border-color: #262626;
    border-top-style: solid; 
    border-width: medium;
    clear: both;
}

#footer ul li {
    list-style: none;
    float: left;
}

#footer ul li a {
    display: block;
    padding: 5px;
    width: auto;
    color: #000;
    font-weight: bold;
    text-align: center;
    text-decoration: none
}

#footer ul li a:hover {
    color: #49A3FF;
}
4

4 に答える 4

4

代わりにパディングを使用してみてください。余白は浮動要素の下で「飲み込まれています」。

于 2009-06-28T20:56:30.097 に答える
2

左列と右列のフロートをクリアする必要があります。

overflow:hidden;#コンテナに追加

于 2009-06-28T20:58:19.127 に答える