PHP和CSS不能完全工作


PHP and CSS not working fully

好吧,我的网站有问题,我的页眉和页脚受到css的影响,但我的正文没有,我尝试过编辑值,但它似乎不起作用,但出于某种原因,如果我在正文类中添加背景色,它的颜色会改变,但位置不会。我被卡住了。请帮忙。这是我的css:

#nav ul 
{
    overflow: hidden;
    list-style-type: none;
    margin: 0;
    padding-left: 25%;
    text-align: center;
}
#nav li 
{
    float: left;
    padding-right: 10%;
    background-color: red;
}
#nav a:link, a:visited 
{
    display: block;
    width: 100%;
    font-weight: bold;
    color: #FFFFFF;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}
#nav a:hover, a:active 
{
    background-color: blue;
}
#footer 
{
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 25%
}
.body 
{
    width: 50%;
    left: 25%;
}

这是我的PHP:页眉:标题

<!--<script type="text/javascript">
        var j = Math.floor(8*Math.random());
        var s = new Array();
        s[0]="1";
        s[1]="2";
        s[2]="3";
        s[3]="4";
        s[4]="5";
        s[5]="6";
        s[6]="7";
        s[7]="8";
        s[8]="9";
        k=s[j];
        document.write("<style type='text/css'>body {background-image:url(../images/bg"+k+".jpg);background-attachment:fixed;background-size: 100% 100%;}</style>");
</script>
-->
</head>
<body>
<div id="nav">
<ul>
<li><a href= "home.php">Refugio</a></li>
<li><a href= "addAccommodation.php">Add accommodation</a></li>
<li><a href= "login.php">Log In/Register</a></li>
</ul>
</div> 

主页:

<?php
session_unset();
include ('header.php');
?>
<div class="body">
<b>Refugio</b>
<form action= "results.php" method = "post">
Search Accommodation:
<input type="search" name="accomSearch" required>
</br>
Arrival Date:
<input type="date" name="bday">
</br>   
Departure Date:
<input type="date" name="bday"></br>
<input type="submit" value= "Search">
</form>
</div>
<?php
include ('footer.php');
?>

和页脚

<div id = "footer">
<p>&#169&nbspCompany.<br />
If you have a trouble with our service 
<a href="mailto:ellaine@reo.net">Contact Us
</p>
</div>
</body>
</html>

您必须为<div class="body"...设置包装器才能设置一些宽度。

这个宽度将是你的身体计算25% 的基础

#nav 
{
overflow: hidden;
width:70%;
margin: 0 auto;
  background-color: #E1E1E1;
}
#nav ul 
{
list-style-type: none;
width:100%;
text-align: center;
}
#nav li 
{
float: left;
padding-right: 10%;
background-color: red;
}
#nav a:link, a:visited 
{
display: block;
width: 100%;
font-weight: bold;
color: #FFFFFF;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover, a:active 
{
background-color: blue;
}
#footer 
{
  clear:both;
width: 70%;
margin 0 auto;
position: absolute;
bottom: 0;
}
.page{
  width:70%;
  margin: 0 auto;
  position:relative;
}
.body 
{
  border:solid 1px red;
  margin:5px auto;
  width:100%;
  position:absolute;
  
}
<html>
<body>
 <div id="nav">
<ul>
<li><a href= "home.php">Refugio</a></li>
<li><a href= "addAccommodation.php">Add accommodation</a></li>
<li><a href= "login.php">Log In/Register</a></li>
</ul>
</div> 
  
  <div class="page">
<div class="body">
  
<b>Refugio</b>
<form action= "results.php" method = "post">
Search Accommodation:
<input type="search" name="accomSearch" required>
<br />
Arrival Date:
<input type="date" name="bday">
<br />   
Departure Date:
<input type="date" name="bday"><br />
<input type="submit" value= "Search">
</form>
    
</div>
</div>
<div id = "footer">
  <div>
<p>&#169&nbspCompany.<br />
If you have a trouble with our service 
<a href="mailto:ellaine@reo.net">Contact Us</a>
</p>
    </div>
</div>
   
</body>
</html>

我将css中body的位置更改为absoulte,它就起作用了。也感谢@Alex的帮助,我使用了您的代码