PHP включает в себя перекрытие друг друга
Итак, я только что узнал о функции включения, я сделал:
include («header.php»); а также
include («mainSection.php»); но они, кажется, перекрывают друг друга.
это что-то с моим CSS или HTML?
<!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
Решение
Удалить «высота: 30 пикселей;» в блоке #logoheader вашего css. Так это выглядит так:
#logoheader {
width: 1366px;
background-color: #2b292a;
}
Это что-нибудь делает? Вам не нужно указывать элементам, как далеко начинать работу на странице. По умолчанию они будут накладываться друг на друга, если не указано иное.
Другие решения
Других решений пока нет …