2012-12-31 101 views
0

我正在做一個簡單的內容管理系統,我的CSS和佈局適用於除了我做一個表然後以某種方式移動頁腳部分移動到一個包裝類上面的部分。即使表格下方的文本也會在表格上方輸出。頁腳不會留在頁面底部由於表

我的基本佈局...

 <?php 
     session_start(); 
     //nav bar //top part of page which fully works etc 
     include "header.php"; 
    ?> 

    <section class= "mainSection"> 

    <section class = "subMain"> 
    <p> this should be above </p> 

    <?php include "/mysql/catgoryShow.php"; ?> 

    <p> this should be below the table </p> 

    </section> 

    </section> 
    <footer class = "mainFooter"> 

    </footer> 

</body> 

我的CSS的重要組成部分......

section.mainSection{ 

margin-left: 4%; 
margin-right:4%; 
min-height: 1000px; 
background-color: #ffffff; 

border-left-style:solid; 
border-left-color:#DAE3ED; 
border-left-width:5px; 

border-right-style:solid; 
border-right-color:#DAE3ED; 
border-right-width:5px; 



    } 

section.subMain{ 
margin-left: 10%; 
margin-right: 10%; 
padding-top:10%; 
padding-bottom: 2%; 

} 

我的頁腳CSS

footer.mainFooter{ 

margin-left: 4%; 
margin-right:4%; 
height: 75px; 
background-color:#78B0F0; 
border-top-style:solid; 
border-top-color:#DAE3ED; 
border-top-width:5px; 
} 

最後我表

<?php 
$result=mysql_query($query); 

$num=mysql_numrows($result); 
    echo "<p>'$query' returns $num rows:<p>\r\n"; 
?> 
<table border="0" cellspacing="2" cellpadding="2"> 
<tr> 
<td><font face="Arial, Helvetica, sans-serif">|Product ID|</font></td> 
<td><font face="Arial, Helvetica, sans-serif">|Product Name|</font></td> 
<td><font face="Arial, Helvetica, sans-serif">Product Category|</font></td> 
<td><font face="Arial, Helvetica, sans-serif">Product Minimum Age|</font></td> 
<td><font face="Arial, Helvetica, sans-serif">Product Discription|</font></td> 
<td><font face="Arial, Helvetica, sans-serif">Product Price|</font></td> 
<td><font face="Arial, Helvetica, sans-serif">Product Quantily Available|</font></td> 
<td><font face="Arial, Helvetica, sans-serif">View Product Page|</font></td> 
</tr> 

<?php 
$i=0; 
while ($i < $num) { 

$f1=mysql_result($result,$i,"ProductID"); 
$f2=mysql_result($result,$i,"ProductName"); 
$f3=mysql_result($result,$i,"ProductCategory"); 
$f4=mysql_result($result,$i,"SuitableAge"); 
$f5=mysql_result($result,$i,"ProductDiscription"); 
$f6=mysql_result($result,$i,"ProductPrice"); 
$f7=mysql_result($result,$i,"ProductAvailable"); 
?> 

<tr> 
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td> 
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td> 
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td> 
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td> 
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td> 
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td> 
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td> 
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td> 
<td><font face="Arial, Helvetica, sans-serif"><a href="../cw/itemPage.php?id=<?php echo $f1?>">View Details</a></font></td> 
</tr> 

<?php 

$i++; 
} 
    echo "<p>'$query' returns $num rows:<p>\r\n"; 


?> 

無論是顯示查詢的回聲獲取表莫名其妙藏漢前打印:/

+1

我們需要* generated * HTML,原始的PHP不能幫助我們。請製作一個http://jsfiddle.net/。我沒有在任何地方看到關閉表格標籤。 – cimmanon

+1

LOl我是一個白癡歡呼聲,忘記了關閉表標籤 –

回答

0

對於主頁腳的CSS,添加position:relativebottom:0。它將始終固定在底部。

1

正如@cimmanon關閉此<table>標籤將是一個非常好的開始

+1

,並可能之後添加一個

+0

...並擺脫這些''標籤以及。我們在2013年...幾乎... – tchap

1

正如前面提到的注意 - 你必須關閉該表元素與適當的</table>標籤。在極少數情況下,表格可能也會繼承一些浮動值,所以footer.mainFooter { clear: both; }應該修復這個問題。