2014-10-16 166 views
0

我正在創建一個網站,並偶然發現問題。頁腳一直推到我的邊欄,而我的內容與我的頁腳重疊。我已經嘗試了幾種方法來尋找解決方案,但沒有一個可行。我嘗試將我的heeder,側邊欄和內容放在div中,並將footer留出,但沒有任何效果。我不想修復頁腳,因爲它可能會在某些顯示器上以不同的分辨率搞亂網頁。內容重疊頁腳

我已經包含了CSS和HTML。

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

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

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

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

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

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

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

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

 
h4 { 
 
\t color: #000000; 
 
\t font-size: 20px; 
 
\t font-weight: bolder; 
 
\t 
 
} 
 
h1, h2 { 
 
\t color: #6AD8DA; 
 
} 
 
h1 { 
 
\t 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"> 
 
\t <tbody> 
 
    \t \t  <tr> 
 
    \t \t  <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> 
 
    \t \t  <td width="840">&nbsp;</td> 
 
    \t \t  <td width="220" style="text-align: right; font-size: 10pt;"><p> 
 
       Linda van Scheijndel 
 
       <br>Bowentherapie Nijkerk 
 
       <br>(06) 50 88 48 76 
 
       <br>[email protected]</p> 
 
       </td> 
 
\t   </tr> 
 
\t  </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> 
 
\t \t <p> 
 
\t \t \t 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> 
 
\t \t \t 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> 
 
\t \t \t 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> 
 
\t \t </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 - [email protected]</td> 
 
     </tr> 
 
     <tr> 
 
      <td style="font-size: 10pt; text-align: center; color: #FFFFFF;">Designed By: Lars van Scheijndel - 2014 </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
\t 
 
    </footer> 
 
    
 
    
 
</body> 
 
</html>

回答

0
爲 「H1,H2,H3,H4,H5,H6,對」 你的CSS定義

,您有:

     高度:15px的;

...所以它不佔用元素的完整渲染高度。刪除它,你的頁腳應該再次回到底部。