包括footer.php和header.php [英] including footer.php and header.php
问题描述
我为网站的索引创建了一个顶部栏和一个底部栏。我已经隔离了两个文件在两个文件，header.php控制顶部栏和footer.php，控制底部栏。
I have created a top bar and a bottom bar for my website's index. I have isolated both of them in two files, the header.php, which controls the top bar and the footer.php, which controls the bottom bar.
在索引没有问题，但如果我创建一个新的页面像about.php，我包括两个php文件，顶部和底部栏被向右移动10px（或类似的东西）。
In the index there is no problem, but if I create a new page like about.php, and I include the two php files, the top and bottom bar are moved to the right by 10px (or something like that).
在这种情况下，页面较大，因为在两个栏的开头之前，左侧有一个很小的空白。
In this case the page is larger, because there is this tiny blank space to the left, before the beginning of the two bars.
以下是两个文件：
Header.php
<style>
.blue { background-color: #039; width: 100%; height: 15%; position: absolute; top: 0px; }
html, body { width: 650px; background-color:#F5F5F5;}
</style>
<div class="blue">
<h1 style="text-align: center; color:#FFFFCC ;font-family:"Times New Roman",Times,serif;">My Website</h1>
</div>
Footer.php
<ul id="figo">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<style>
#figo {background-color: #039; position:absolute; bottom:0px; width:100%;}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:right;
}
a{
display:block;
width:90px;
color:#FFFFCC;
}
</style>
INDEX.PHP
这里我发布了index.php
INDEX.PHP Here I post the index.php
-
<html>
<head> <title> About </title> </head>
<body>
<? include 'header.php'; ?>
<?include 'footer.php'; ?>
</body>
</html>
推荐答案
< style& < / style> 标签应该只进入文档的< head>< / head> 部分。你想避免任何内联样式。比使用< style>< / style> 更好，应该将所有页面使用的所有样式放入一个样式表。
The <style></style> tags should only go into the <head></head> portion of a document. You want to avoid having any inline styles as well. Better than using <style></style>, you should put all the styles that are to be used by all of your pages into a single stylesheet.
我将实现一个包装器（容器），并给出你的页面宽度和位置相对，这将对齐页脚菜单到该块的底部（假设这是你的尝试实现）。如果没有，从容器中删除位置。
I would implement a wrapper (container) and give that your page width and position relative, this will align your footer menu to the bottom of that block (assuming that's what you're trying to achieve). If not, drop the position from the container.
对于所有这些更改，结构看起来像这样。记住这是一个非常古老的设计，但它应该有助于你开始。
header.php：
With all of these changes, the structure would look something like this. Keep in mind this is a very archaic design, but it should help get you started. header.php:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
...
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
...
</head>
<body>
<div id="container">
<div class="blue" id="header">
<h1>Header Content</h1>
</div>
index.php / about.php / whatever.php ...
index.php/about.php/whatever.php...
<?php
$title = 'My About Page';
include('header.php');
?>
<div>Your page contents</div>
<?php include('footer.php'); ?>
footer.php：
footer.php:
<div id="footer">
<ul id="figo">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</div><!-- end "container" -->
</body>
</html>
/css/stylesheet.css：
/css/stylesheet.css:
body {
background-color: #F5F5F5;
margin: 0;
padding: 0;
}
#container {
position: relative;
width: 650px;
}
.blue {
background-color: #039;
height: 15%;
}
#figo {
background-color: #039;
position: absolute;
bottom: 0px;
margin: 0;
padding: 0;
width: 100%;
}
#figo ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#figo li {
float: right;
}
#figo a {
display: block;
width: 90px;
color: #FFFFCC;
}
这篇关于包括footer.php和header.php的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
