我将我的页眉和页脚包含在 PHP 中。但问题是标题并不总是留在它的位置（水平）。我希望它在每一页上都保持稳定，但它会左右移动一些像素。而且内容并不总是在它的位置，它在其中一个页面上向左或向右移动。如果你看到这个例子，你可以更好地理解它。查看这两个页面之间的区别： 1- http://www.altayda.com/test2/ 2- http://www.altayda.com/test2/about.php
这是代码。提前致谢：
索引.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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>psdtowebindex12323.psd</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="frameworkmodified.js"></script>
</head>
<body>
<div id="header"><?php include 'header.php'; ?></div>
<div id="container">
<ul id="filter"><hr size=1><br />
<li class="current"><a href="#">All</a></li>
<li><a href="#">Poster Design</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Painting</a></li>
<li><a href="#">Print Design</a></li>
<br /><br />
<hr size=1>
</ul>
<ul id="portfolio">
<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/politician.png" alt="" height="156" width="263" /></a></li>
<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/recycle.png" alt="" height="156" width="263" /></a></li>
<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/women.png" alt="" height="156" width="263" /></a></li>
<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/warwomen.png" alt="" height="156" width="263" /></a></li>
<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/joy.png" alt="" height="156" width="263" /></a></li>
<li class="poster-design"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/bombs.png" alt="" height="156" width="263" /></a></li>
<li class="branding"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/mir.png" alt="" height="156" width="263" /></a></li>
<li class="illustration"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/vader.png" alt="" height="156" width="263" /></a></li>
<li class="illustration"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/mario.png" alt="" height="156" width="263" /></a></li>
<li class="painting"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/eye.png" alt="" height="156" width="263" /></a></li>
<li class="print-design"><a class="image" href="#"><span class="rollover" ></span>
<img class="imgborder" src="images/rain.png" alt="" height="156" width="263" /></a></li>
</ul>
</div>
<div class="footer"><?php include 'footer.php'; ?></div>
</body>
</html>
索引样式
/* Portfolio Filter Stylesheet */
/*****Reset*****/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
/*****Basic Definitions*****/
body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
h1 { font-size: 1.667em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.333em; }
h4 { font-size: 1.167em; }
h5, h6 { font-size: 1em; }
a { color: #333; }
a:visited { }
a:hover { text-decoration: none; }
p, ul, ol, dl, table { margin-bottom: 18px; }
ul, ol, dd { margin-left: 36px; }
/*****Custom Classes*****/
.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }
/*****Basic Layout*****/
div#container { margin: 0px auto 0; overflow: hidden; width: 860px; }
ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 0px; margin-top:250px; width: 100%; font-family:Helvetica }
ul#filter li {
border-right: 1px solid #dedede;
float: left;
line-height: 16px;
margin-right: 10px;
padding-right: 10px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #333; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { color: #A1A1A1; }
ul#filter li.current a { color: #333; font-weight: bold; font-family:Helvetica }
ul#portfolio { float: left; list-style: none; margin-left:0px; margin-right:-35px; margin-top:20px; border: 0px solid #dedede; }
ul#portfolio li {
border: 0px solid #dedede;
float: left;
margin: 0 31px 20px 0;
padding: 0px;
width: 263px;
height: 156px
}
ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { border: 0px solid #dedede; display: block; padding-bottom: 5px; }
hr { display: block; height: 1px;
border: 0; border-top: 1px solid #ccc;
margin: 1em 0; padding: 0; width: 100%; }
span.rollover {
opacity: 0;
-o-transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition: -webkit-transform 1s;
background:url(images/mag.png) center center no-repeat #ffffff;
cursor: pointer;
height: 156px;
width: 263px;
position: absolute;
z-index: 10;
opacity: 0;
}
span.rollover:hover {
opacity: 0.9;
-o-transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition: -webkit-transform 1s;
-webkit-box-shadow: 0px 0px 0px #000;
-moz-box-shadow: 0px 0px 0px #000;
box-shadow: 0px 0px 0px #000;
}
关于.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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>psdtowebindex12323.psd</title>
<link href="aboutstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"><?php include 'header.php'; ?></div>
<div id="container">
<div id="title"><hr size=1>
<div id="titletext">
<br />
About me
<br /><br /><br />
</div>
<hr size=1></div>
</div>
<div class="footer"><?php include 'footer.php'; ?></div>
</body>
</html>
关于风格
@charset "utf-8";
/* CSS Document */
/*****Reset*****/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin:0; padding: 0; }
/*****Basic Definitions*****/
body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
h1 { font-size: 1.667em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.333em; }
h4 { font-size: 1.167em; }
h5, h6 { font-size: 1em; }
a { color: #333; }
a:visited { }
a:hover { text-decoration: none; }
p, ul, ol, dl, table { margin-bottom: 18px; }
ul, ol, dd { margin-left: 36px; }
/*****Custom Classes*****/
.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }
/*****Basic Layout*****/
div#container { margin: 0px auto 0; overflow: hidden; width: 860px; }
#title {
margin-top:254px;
width:860px;
}
#titletext {
width:860px;
float:left;
font-family:Helvetica;
font-size:26px;
margin-top:2px;
}
hr { display: block; height: 1px;
border: 0; border-top: 1px solid #ccc;
margin: 1em 0; padding: 0; width: 100%; }
#header {
width:100%;
float:left;
margin: 0px auto 0; overflow: hidden;
}
.footer {
margin: 0px auto 0;
width:860px;}
头文件.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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creating a Filterable Portfolio with jQuery</title>
<link href="headerstyle.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<div id="contained">
<div id="logo"><a href="http://www.altayda.com"><img src="images/Logo.png"></a></div>
<ul id="nav">
<li><a href="http://www.altayda.com/test2">Works</a></li>
<li><a href="about.php">About me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
标题样式
body {
margin: 0;
padding: 0;
text-align:left;
}
ul#nav {
list-style-type: none;
height: 80px;
width: 350;
margin: auto;
margin-left: 555px;
position:absolute;
top: 159px;
}
li {
float: left;
}
ul#nav a{
padding-right: 20px;
padding-left: 20px;
display: block;
line-height: 80px;
text-decoration: none;
font-family: Helvetica;
font-weight:bold;
font-size: 18px;
color: #371C1C;
}
ul#nav a:hover {
color: #999 ;
}
#logo
{
float: left;
top: 161px;
position: absolute;
width: 183px;
height: 40px;
z-index:2;
}
#contained { margin: 0px auto 0; overflow: hidden; width: 860px; }
#Contact
{
top: 161px;
position: absolute;
width: 67px;
height: 13px;
z-index:3;
font-weight: bold;
font-family: Helvetica;
font-size: 19px;
}
#Aboutme
{
top: 161px;
position: absolute;
width: 95px;
height: 13px;
z-index:4;
font-size: 19px;
font-family: Helvetica;
font-weight: bold;
}
#Works
{
top: 161px;
position: absolute;
width: 53px;
height: 13px;
z-index:5;
font-family: Helvetica;
font-size: 19px;
font-weight: bold;
}