Нижний колонтитул дурацкий - PullRequest
Новая
       7

Нижний колонтитул дурацкий

0 голосов
/ 10 марта 2019

Я довольно новичок в программировании / веб-разработке (по сути, это мой первый веб-сайт), и по какой-то причине мой нижний колонтитул на странице index.php не имеет никаких отступов вверху (каждая вторая страница нижнего колонтитула отличнов порядке).

Index.php 

<?php 
include('includes/header.php');
?>

<div class="main-body">
    <div id="box-1">
        <h2>WELCOME TO</h2>
    </div>
    <div id="box-2">
        <h2>TOTALLY<br> EDUCATIONAL</h2>
    </div>
</div>

<?php 
    include('includes/footer.php') 
?>

footer.php 

<footer>
    <h5>© 2019 Totally Educational. All Rights Reserved.</h5>
</footer>

</body>
</html>

стиль.css (index) 

/*INDEX PAGE*/

/*side-by-side box structure*/

.main-body {
    box-sizing: border-box;
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 10px;
    text-align: center;
}

#box-1 {
    width: 49.5%;
    background-color: rgba(126,121,121,1.00);
    float: left;
    height: 600px;
    border-right: solid;
    border-right-width: 2px;
}

#box-2 {
    width: 50%;
    background-color: white;
    float: left;
    height: 600px;
}

/*side-by-side box styling*/

#box-1 h2 {
    padding: 300px 0;
    letter-spacing: 5px;
    color: white;
}

#box-2 h2 {
    padding: 300px 10%;
    letter-spacing: 5px;
}

style.css (нижний колонтитул) 

#footer, #footer h5 {
    background-color: black;
    color: white;
    padding: 20px 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

Выше приведены все PHP и CSS, относящиеся к данной проблеме.По сути, когда я запускаю его, нижний колонтитул страницы h4 не имеет отступов вверху, а под ним белая полоса.Для любой другой страницы эта проблема не возникала, только в index.php.Я написал все это за 3 дня или около того, и я только начинаю изучать все, так что, возможно, это было какое-то глупое новшество, которое я сделал, но любая помощь будет высоко ценится.Я также приложу некоторые изображения того, как это выглядит.

index.php снимок экрана
games.php снимок экрана

-jEK01

1 Ответ

0 голосов
/ 10 марта 2019

Попробуйте использовать inline-block для .main-body и добавьте clear:both; в #footer: 

.main-body {
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 10px;
    text-align: center;
}
#footer, #footer h5 {
  background-color: black;
  clear:both;
  color: white;
  padding: 20px 0;
  margin: 0;
  text-align: center;
  width: 100%;
}
...