1

On my site, I have banner, menubar + buttons(in table), one table, with 2 columns. and I want to place footer below that table. I have my table in separate div. I am puttingmy footer to another div, right after the table div ends. Howerver, it isnt positioning below my table. My footer stays at the top of my table and I cant even see the whole footer image. What did I do wrong please?

HTML:

 <body>

 <div class = "page " align ="center">
    <div class="header">
                <img id="bannerimg">
                <img id="menubar">
    </div>

    <div class="menu">
        <table id="menubtns" border="0">
        <tr>
            <td><a href =""><img id="projekt"></a></td>
            <td><a href =""><img id="eshop"></a></td>
            <td><a href =""><img id="foto"></a></td>
            <td><a href =""><img id="video"></a></td>

        </tr>
        </table>
    </div>

    <div class= "content">
        <table id= "obsah" border="0">
        <tr>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
        </tr>   
        <tr>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
        </tr>       

    </div>

    <div class= "footer">
                <img id="footerimg">
    </div>

 </div>


 </body>
 </html>

my CSS file:

 body {
 background-image:url('img/bg_image.png');
 background-repeat:no-repeat;
 background-attachement:fixed;
 }

 .page
 {
 position= "relative";
 }

 .header #bannerimg
 {
 background-image:url('img/banner.png');
 width: 1040px;
 height: 594px;
 background-repeat:no-repeat;
 }

 .content
 {
 margin-top: 80px;
 margin-right: 50px;
 font-family: "Verdana";
 font-size: 20px;
 position: relative;
 }

 .content #buybtn
 {
 background-image:url('img/kupit.png');
 height: 36px;
 width: 140px;
 }

 .content #obsah
 {
 border-spacing: 60px 30px;
 }

 .footer
 {
 position:absolute; 
 bottom:0;
 }

 .footer #footerimg
 {
 background-image:url('img/footer.png');
 height: 200x;
 width: 992px; 
 }
4

2 回答 2

1

.page -> position="relative"; 改变位置：相对；

footerimg -> 高度：200x；将其更改为高度：200px；

您希望页脚始终位于页面底部吗？

...
   <tr>
      <td><a href =""><img id="buybtn"></a></td>
      <td> dátum: XX.XX.XXXX </td>
      <td><a href =""><img id="buybtn"></a></td>
      <td> dátum: XX.XX.XXXX </td>
   </tr>       
   **</table>**
</div>

第二。改变：

<div class= "footer">
   <img id="footerimg">
</div>

至：

<div id="footer"></div>

和CSS：

#footer {
   position:absolute;
   left:0;
   bottom:0;
   width:992px;
   height:200px;
   background-image:url('img/footer.png');
}
于 2013-09-13T19:27:47.820 回答
0

出于多种原因，您的标记不应该验证。第二个表上没有结束标记。使用 .buybtn 而不是 #buybtn（同一文档上不会重复 ID）。id 为 #obsah 的表应如下所示：

    <table id= "obsah" border="0">
    <tr>
        <td><a href =""><img class="buybtn"></a></td>
        <td> dátum: XX.XX.XXXX </td>
        <td><a href =""><img class="buybtn"></a></td>
        <td> dátum: XX.XX.XXXX </td>
    </tr>   
    <tr>
        <td><a href =""><img class="buybtn"></a></td>
        <td> dátum: XX.XX.XXXX </td>
        <td><a href =""><img class="buybtn"></a></td>
        <td> dátum: XX.XX.XXXX </td>
    </tr>
   <!--   and this is when we cue to... -->
  </table>

为标签使用背景图像img是多余的和非语义的。id 为#footerimg 的元素应该是一个div标签，或者是img带有实际图像的标签。

<img src="img/footer.png" alt="footer image">

非此即彼。不是都。

于 2013-09-13T19:29:14.650 回答