1

私のサイトには、バナー、メニューバー + ボタン (テーブル内)、1 つのテーブル、2 つの列があります。そのテーブルの下にフッターを配置したいと思います。別のdivにテーブルがあります。テーブル div が終了した直後に、フッターを別の div に配置しています。しかし、それは私のテーブルの下に配置されていません。フッターがテーブルの一番上に表示されたままになり、フッターの画像全体が見えなくなります。私は何を間違えましたか？

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>

私のCSSファイル:

 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>

2番。次のように変更します。

<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

多くの理由で、マークアップは検証されるべきではありません。2 番目のテーブルには終了タグがありません。#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は冗長であり、セマンティックではありません。#footerimg の ID を持つ要素は、divタグ、またはimg実際の画像を持つタグである必要があります。

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

どちらか一方。両方ではありません。

于 2013-09-13T19:29:14.650 に答える