CODEWITHSUNDEEP
htmlcssfooter
Martin Nemeth
Martin Nemeth

Reputation: 679

html / css footer positioning

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; 
 }

Upvotes: 1

Views: 4154

Answers (2)

harrypujols
harrypujols

Reputation: 2284

Your markup shouldn't validate for many reasons. There is not a closing tag on the second table. Use .buybtn instead of #buybtn (an ID does not repeat on the same document). That table with the id #obsah should read like this:

    <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>

Using a background image for an img tag is redundant and non-semantic. The element with the id of #footerimg should be a div tag, or the img tag with the actual image.

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

One, or the other. Not both.

Upvotes: 0

trebor
trebor

Reputation: 734

.page -> position="relative"; change to position:relative;

footerimg -> height:200x; change it to height:200px;

You want have footer always at bottom of page?

...
   <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>

Second. Change that:

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

To:

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

And css:

#footer {
   position:absolute;
   left:0;
   bottom:0;
   width:992px;
   height:200px;
   background-image:url('img/footer.png');
}

Upvotes: 1

Related Questions