内容重叠页脚

时间:2014-10-16 11:21:13

标签: html css footer overlap

我正在创建一个网站,偶然发现了一个问题。页脚一直向上推到我的侧边栏,而我的内容与我的页脚重叠。我已经尝试了几种方法来找到解决方案,但它们都不起作用。我尝试将我的heaeder,侧边栏和内容放在div中并将页脚放下,它没有任何效果。我不想修复页脚,因为它可能会在某些具有不同分辨率的显示器上弄乱网站。

我已经包含了CSS和HTML。

@charset "UTF-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #FCFCFC;
	margin-left: 200px;
	margin-right: 200px;
	padding: 0px;
	color: #000;
}
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 10px;
	height: 15px;
	padding-left: 15px;
	text-align: left;
	background-color: #FFFFFF;
}
a img {
	border: none;
}
a:link {
	color: #42413C;
	text-decoration: underline; 
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}
.container {
	width: 1500px;
	background-color: #FFFFFF;
}
header {
	background-color: #FFFFFF;
}

.sidebar1 {
	float: left;
	width: 350px;
	background-color: #FFFFFF;
}
p {
	font-size: 24px;
}

td p {
	text-align:right;
}
.content {
	padding: 10px;
	width: 960px;
	float: left;
}
aside {
	float: left;
	width: 220px;
	background-color: #FFFFFF;
	padding: 10px;
}

.content ul, .content ol {
	padding: 15px 15px 40px; 
	clear:both;
}

ul.nav {
	list-style: none;
	border-top: none;
}
ul.nav li {
	background-color: #FFF;
}
ul.nav a, ul.nav a:visited {
	padding: 5px 5px 5px 15px;
	display: block;
	width: 330px;
	text-decoration: none;
	background-color: #FFF;
	font-size: 24px;
}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
	background-color: #6AD8DA;
}

article {
	width:980px;
}
footer {
	padding: 10px;
	background-color: #FFFFFF;
	clear: both;
	background-image: url(Afbeeldingen/FooterBackground.png);
	background-repeat:no-repeat;
	background-size: 100%;
}
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

header, section, footer, aside, article, figure {
	display: block;
	text-align: center;
}

h4 {
	color: #000000;
	font-size: 20px;
	font-weight: bolder; 
	
}
h1, h2 {
	color: #6AD8DA;
}
h1 {
	font-size: 36px;
}
logo { visibility: hidden;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Fascie - Bowentherapie Nijkerk</title>
<link href="BowentherapieNijkerk.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
var __adobewebfontsappname__="dreamweaver"

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
<script src="http://use.edgefonts.net/alice:n4:default;abel:n4:default;actor:n4:default;allan:n7:default.js" type="text/javascript"></script>

</head>

<body>

<div class="container">
  <header>
    <table border="0">
	  <tbody>
  		    <tr>
  		      <td width="440"><a href="#"><img src="Afbeeldingen/Logo1.png" alt="" width="440" height="286" id="Logo" style="background-color: #C6D580; display: block; color: #FFFFFF; background-image: url(file:///Macintosh%20HD/Users/larsvanscheijndel/Documents/Site_BowentherapieNijkerk/Afbeeldingen/Logo1.png);" /></a></td>
  		      <td width="840">&nbsp;</td>
  		      <td width="220" style="text-align: right; font-size: 10pt;"><p>
              Linda van Scheijndel
              <br>Bowentherapie Nijkerk
              <br>(06) 50 88 48 76
              <br>Linda@BowenBehandeling.nl</p>
              </td>
	        </tr>
	      </tbody>
    </table>
  </header>
  <div class="sidebar1">
    <ul class="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="verloop-eerste-afspraak.html">Verloop eerste afspraak</a></li>
          <li><a href="de-behandeling.html">De behandeling</a>
          </li>
        <li><a href="fascie.html"><b>Fascie</b></a></li>
        <li><a href="klachten.html">Klachten</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="tarieven.html">Tarieven</a></li>
        <li><a href="links.html">Links</a>
        </li>
    </ul>
  <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>Home</h1>
    <section>
		<p>
			Fascie, het grootste deel van het bindweefsel in het lichaam, geeft ondersteuning, bescherming en structuur. Het verbindt alles in ons lichaam in functionele patronen. Een verstoring in dit weefsel heeft invloed op de gehele interne balans en beweeglijkheid van ons lichaam. Ons immuunsysteem is ook sterk afhankelijk van de fascie. Vanuit deze rol staat de fascie bekend als Basis Bio Regulatie Systeem (BBRS). <br>
			van de afgelopen 15 jaar tonen aan dat het fasciale weefsel in ons lichaam een functie heeft die vergelijkbaar is met ons brein. Minder complex, maar heel snel. <br>
			Het doel van de bowenbehandeling is de spanning in de fascie te normaliseren. dit teveel aan spanning (of teveel aan ontspanning) heeft niet alleen invloed op het bewegingsapparaat, maar ook op organen, het spijsverteringssysteem, het immuunsysteem, het ademhalingsstelsel, de hormoonbalans, etc. <br>
		</p>
</section>
  <!-- end .content --></div>
  <!-- end .container --></div>
  <footer>
  
    <table width="100%" border="0">
      <tbody>
        <tr>
          <td style="text-align: center; color: #FFFFFF; font-size: 12px;">&nbsp;</td>
        </tr>
        <tr>
          <td style="font-size: 10pt; text-align: center; color: #FFFFFF;">Linda van Scheijndel - Bowentherapie Nijkerk - Ooievaarshof 23 - 3862 KP Nijkerk - (06) 230 86 135 - Linda@Bowenbehandeling.nl</td>
        </tr>
        <tr>
          <td style="font-size: 10pt; text-align: center; color: #FFFFFF;">Designed By: Lars van Scheijndel - 2014 </td>
        </tr>
      </tbody>
    </table>
	
  </footer>
  
  
</body>
</html>

2 个答案:

答案 0 :(得分:0)

别误会我的意思,

首先学习HTML

您使用的方法已经很久了,所以请

首先学习本教程然后开始编码

- &gt; http://www.codecademy.com/en/tracks/webhttp://www.w3schools.com/html/

答案 1 :(得分:0)

在“h1,h2,h3,h4,h5,h6,p”的CSS定义中,你有:

身高:15px;

...所以它没有占据元素的完整渲染高度。删除它,你的页脚应该再次恢复到底部。