阻止div重叠

时间：2017-04-21 16:55:53

标签： html css

好的，首先要做的事情。我搜索了这个主题，并设法找到了这个：

Prevent floating DIVs from overlapping footer

然而，这并没有解决我的问题。我还尝试过其他形式的重写我设置的css代码，但结果反过来会搞砸我的身体内容。

我的index.php代码：

＆＃13;
＆＃13; 
<?php
session_start();
?>
<html>
<link rel="stylesheet" type="text/css" href="css/main.css">



<title>
Shadey Process


        </title>





<body>
<?php
include 'includes/header.php';
include 'includes/navigation.php';
?>

<div class="body">
This is the body.
Due to errors beyond my control everything I had worked so hard to do is gone.
</div>
<?php
include 'includes/footer.php';
?>
</body>


</html>
＆＃13;
＆＃13;
＆＃13;

我的main.css代码：

＆＃13;
＆＃13; 
@font-face { 
        font-family: Kingdom; src: url('../addons/font/Kingdom.ttf'); 
} 
.header {
    padding: 20px;
    color: red;
    text-align: center;
    border-bottom-style: solid;
    border-bottom-color: green;
    font-family: Kingdom;
    font-size: 98px;
}

body {
    background-color: black;
    
}
.body {

    color: red;
    margin-right: 34%;
}
.navlinks {
    float: left;
    width: 250px;
    length: 100%;
    background: black;
}
.footer {
  float: left;
  border-top-style: solid;
  border-top-color: green;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px;
  color: red;
  text-align: center;
  clear: both;
}
＆＃13;
＆＃13;
＆＃13;

我的navigation.php代码：

＆＃13;
＆＃13; 
<style>
.btn-group {
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    width: 150px;
    display: block;
    height: 100%;
    border-right-style: solid;
    border-right-color: green;
}

.button {
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    width: 80%;
    display: block;
}

.btn-group .button:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
}


.home {
    background-color: black; 
    border: 1px solid red;
    color: red;
}
.home:hover {
    background-color:  	#800000; 
    border: 1px solid black;
    color: white;
}
.forum {
    background-color: black; /* Green */
    border: 1px solid green;
    color: green;
}
.forum:hover {
    background-color: #7CFC00; /* Green */
    border: 1px solid black;
    color: white;
}
.alpha {
    background-color: black; /* Green */
    border: 1px solid blue;
    color: blue;
}
.alpha:hover {
    background-color: #0000FF; /* Green */
    border: 1px solid black;
    color: white;
}
.games {
    background-color: black; /* Green */
    border: 1px solid yellow;
    color: yellow;
}
.games:hover {
    background-color: #FFFF00; /* Green */
    border: 1px solid black;
    color: black;
}
</style>





<div class="btn-group navlinks">

  <?php 
  if($_SESSION['user']==false)
    { 

      echo '
       <a href="index.php" class="button home">Home</a>
  <a href="forum.php" class="button forum">Forum</a>
  <a href="alpha.php" class="button alpha">Alpha</a>
  <a href="games.php" class="button games">Games</a> 
      <a href="includes/login/index.php" class="button home">Login</a>';
    }
  else{
      echo "<font color= 'red'>Glad to have you {$_SESSION["user"]}</font>";
      
      echo '
        <a href="index.php" class="button home">Home</a>
  <a href="forum.php" class="button forum">Forum</a>
  <a href="alpha.php" class="button alpha">Alpha</a>
  <a href="games.php" class="button games">Games</a>
      <a href="includes/logout/logout.php" class="button forum">Logout</a>';
    }
  ?>
  
  
  
  
  

</div>
＆＃13;
＆＃13;
＆＃13;

我的footer.php

＆＃13;
＆＃13; 
<div class="footer", "container-fluid" style="bottom:0; position:fixed;">
<img style="-webkit-user-select: none;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image:linear-gradient
(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);" 
src="https://multicraft.mcprohosting.com/index.php?r=status/606439.png">
</div>
＆＃13;
＆＃13;
＆＃13;

这是使用视图源后呈现的Html：

＆＃13;
＆＃13; 
<html>
<link rel="stylesheet" type="text/css" href="css/main.css">



<title>
Shadey Process


        </title>





<body>
<div class="header">
Shadey Process
</div><style>
.btn-group {
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    width: 150px;
    display: block;
    height: 100%;
    border-right-style: solid;
    border-right-color: green;
}

.button {
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    width: 80%;
    display: block;
}

.btn-group .button:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
}


.home {
    background-color: black; 
    border: 1px solid red;
    color: red;
}
.home:hover {
    background-color:  	#800000; 
    border: 1px solid black;
    color: white;
}
.forum {
    background-color: black; /* Green */
    border: 1px solid green;
    color: green;
}
.forum:hover {
    background-color: #7CFC00; /* Green */
    border: 1px solid black;
    color: white;
}
.alpha {
    background-color: black; /* Green */
    border: 1px solid blue;
    color: blue;
}
.alpha:hover {
    background-color: #0000FF; /* Green */
    border: 1px solid black;
    color: white;
}
.games {
    background-color: black; /* Green */
    border: 1px solid yellow;
    color: yellow;
}
.games:hover {
    background-color: #FFFF00; /* Green */
    border: 1px solid black;
    color: black;
}
</style>





<div class="btn-group navlinks">

  
       <a href="index.php" class="button home">Home</a>
  <a href="forum.php" class="button forum">Forum</a>
  <a href="alpha.php" class="button alpha">Alpha</a>
  <a href="games.php" class="button games">Games</a> 
      <a href="includes/login/index.php" class="button home">Login</a>  
  
  
  
  

</div>
<div class="body">
This is the body.
Due to errors beyond my control everything I had worked so hard to do is gone.
</div>

<div class="footer", "container-fluid" style="bottom:0; position:fixed;">
<img style="-webkit-user-select: none;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image:linear-gradient
(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);" 
src="https://multicraft.mcprohosting.com/index.php?r=status/606439.png">
</div></body>


</html>
＆＃13;
＆＃13;
＆＃13;

非常感谢任何帮助和/或批评。

1 个答案:

答案 0 :(得分：1)

您试图在</body>标记后添加标题文件。在<?php include 'includes/footer.php'; ?>代码中加入<body>页脚

<?php
  session_start();
  ?>
<html>
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <title>
    Shadey Process
  </title>
  <body>
    <?php
      include 'includes/header.php';
      include 'includes/navigation.php';
      ?>
    <div class="body">
      This is the body.
      Due to errors beyond my control everything I had worked so hard to do is gone.
    </div>
    <?php
      include 'includes/footer.php';
      ?>
  </body>
</html>

已更新（阅读Mike评论后）

如果仍然无法解决此问题。我认为问题出在您的footer.php，请将您的footer.php发布到此处或将此代码行放入您的页脚div 

<div class="container-fluid" style="bottom:0; position:fixed;">
相关问题
最新问题