2015-03-11 6 views
0

Так что я только что узнал о функции включения, я сделал: include ("header.php"); и включают («mainSection.php»); но они, похоже, перекрывают друг друга. это что-то с моим css или html?PHP включает в себя перекрытие eacher other

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <title>Chocoot</title> 
</head> 
<body> 
    <div id="wrapper"> 
     <?php 
      include ("header.php"); 
      include ("mainSection.php"); 
     ?> 
    </div> 
</body> 
</html> 

header.php

<header id="logoheader"> 
    <h1 id="logo">Chocoot</h1> 
    <div id="orangeborder1"> 
     <nav> 
      <ul> 
       <li><a href ="index.php">Home</a></li> 
       <li><a href ="chocolate.php">Chocolate</a></li> 
       <li><a href ="beans.php">Beans</a></li> 
       <li><a href ="history.php">History</a></li> 
       <li><a href ="contact.php">Contact</a></li>  
      </ul> 
     </nav> 
    </div> 
     <div id="slider"></div> 
     <div id="orangeborder2"></div> 
</header> 

mainSection.php

<section id="midSection"> 

    </section> 

CSS:

*{ 
    margin: 0px; 
    padding: 0px; 
} 

#logoheader{ 
    width: 1366px; 
    height: 30px; 
    background-color: #2b292a; 
} 

body{ 
    background-color: #171515; 
} 

#wrapper{ 
    width: 1366px; 
    height: auto; 
    margin: auto; 
    background-color:#2b292a; 

} 
header{ 
    width: 1366px; 
    height: 475px; 
    float: left; 
} 
#logo{ 
    font-family: Georgia; 
    font-weight: bold; 
    font-style: italic; 
    font-size: 32px; 
    color: white; 
    margin-left: 28px; 
    margin-top: -3px; 
    margin-bottom: -3px; 
    float: left; 
} 
#orangeborder1{ 
    width: 1366px; 
    height: 30px; 
    float: left; 
    background-color: #2b292a; 
} 

#orangeborder1{ 
    width: 1366px; 
    height: 86px; 
    background-color: #9b3210; 
    float: left;  
} 
nav ul li{ 
    float: left; 
    list-style: none; 
    margin-top: 28px; 
} 

nav ul li a{  
    font-family: Georgia; 
    font-size: 24px; 
    font-style: italic; 
    font-weight: bold; 
    color: #fff; 
} 

nav ul li:first-child{ 
    margin-left: 250px; 
} 
nav ul li:nth-child(2){ 
    margin-left: 64px; 
} 
nav ul li:nth-child(3){ 
    margin-left: 90px; 
} 
nav ul li:nth-child(4){ 
    margin-left: 63px; 
} 
nav ul li:nth-child(5){ 
    margin-left: 50px; 
} 

a{ 
    text-decoration: none; 
} 

#slider{ 
    width: 1366px; 
    height: 301px; 
    float: left; 
    background-color: black; 
    color: white; 
} 
#slider2{ 
    width: 1366px; 
    height: 301px; 
    float: left; 
    background-color: black; 
    color: white; 
} 

#orangeborder2{ 
    width: 1366px; 
    height: 59px; 
    background-color: #9B3210; 
    float: left; 
} 
#midSection{ 
    width: 1366px; 
    height: 570px; 
    background-color: #2b292a; 
    float: left; 
} 
#pictureContainer{ 
    width: 250px; 
    height: 570px; 
    float: left; 

} 
footer{ 
    width: 1366px; 
    height: 155px; 
    background-color: #433f40; 
    float: left; 
} 

Я надеюсь, что вы можете мне помочь: s

+0

Да, это «что-то с моим css или html» –

+0

Проверьте размер ваших товаров в CSS. Заголовок имеет высоту 475 пикселей. Мидель не рекомендуется начинать с 475 пикселей вниз. – kainaw

+1

Тот факт, что код находится в файлах «include», не означает, что он отображается. Браузеру было все равно. Итак, да, ваша проблема где-то в вашем визуализированном коде. Я предлагаю Firefox или Chrome Inspect Element, чтобы найти проблему. – durbnpoisn

ответ

0

Удалить «height: 30px;» в блоке #logoheader вашего css. Так выглядит примерно так:

#logoheader { 
width: 1366px; 
background-color: #2b292a; 
} 

Это что-нибудь? Вам не нужно указывать элементам, как далеко начать работу на странице. По умолчанию они будут складываться друг на друга, если не указано иное.

+0

Ах спасибо, что помогли! :) – Slizzer

Смежные вопросы