Невозможно добавить верхнее поле в нижний колонтитул, использующий clear: оба - PullRequest
Новая
       17

Невозможно добавить верхнее поле в нижний колонтитул, использующий clear: оба

6 голосов
/ 29 июня 2009

Я не могу добавить верхнее поле в нижний колонтитул, использующий clear: both. Использование padding, кажется, решает проблему. Но это разрушает верхнюю сплошную границу нижнего колонтитула.

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>

footer.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>

style.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 голосов
/ 29 июня 2009

Попробуйте вместо этого использовать отступы. Поле «проглатывается» под плавающими элементами.

2 голосов
/ 29 июня 2009

Вам нужно очистить поплавок в левой и правой колонках.

Добавить overflow:hidden; к # контейнеру

1 голос
/ 22 апреля 2013

Эмили ответ работает отлично! Я столкнулся с той же проблемой пару дней назад, и я нашел 3 разных способа достижения этой цели (один с HTML, два с помощью CSS).

  1. Добавление структурного элемента : Это в основном влечет за собой добавление пустого div после ваших плавающих элементов, чтобы очистить поплавки. Старомодный и непопулярный, потому что мы используем HTML для решения проблемы, связанной с внешним видом. Добавьте div с атрибутом style = "clear: both" сразу после ваших плавающих элементов.

  2. Добавление содержимого с помощью CSS : Вы можете использовать контейнер: после селектора в CSS, чтобы добиться того же самого. Лучше всего объяснить здесь: http://www.positioniseverything.net/easyclearing.html.

  3. Использование переполнения : как объяснено Эмили или здесь: http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html.

0 голосов
/ 29 апреля 2017

Margin не работает со встроенными элементами, просто добавьте «display: inline-block» в нижний колонтитул css, margin-top должен работать.

...