How to separate header and footer in html website

Discussion in 'HTML & Website Design' started by mellyess56, Aug 31, 2015.

0
  1. #1
    please suggest me how to separate header and footer in html page not php. please give me html code.
     
    mellyess56, Aug 31, 2015 IP
  2. King Manu

    King Manu Active Member

    Messages:
    149
    Likes Received:
    22
    Best Answers:
    4
    Trophy Points:
    75
    #2
    King Manu, Aug 31, 2015 IP
  3. xXxpert

    xXxpert Well-Known Member

    Messages:
    604
    Likes Received:
    34
    Best Answers:
    9
    Trophy Points:
    165
    Digital Goods:
    7
    #3
    HTML is markup language and you cannot perform such tasks only with HTML. you have to use PHP to separate files and than include or require them within any file.
    However if you insist on not using PHP than You can use jQuery .load function to include external html files : http://www.w3schools.com/jquery/ajax_load.asp

    example code will be 


    $("document").ready(function(){
    $("#header").load("header.html");
});
    Code (JavaScript):
     
    xXxpert, Aug 31, 2015 IP
    webcosmo likes this.
  4. tinman47

    tinman47 Greenhorn

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    Well if your trying to seperate the footer and the header, you can create divs and style them in CSS. Heres an example:

    <html>
     <head>
          <!-- Load page title, meta tags, external CSS, etc. up here-->
     </head>
     <body>
          <div class="header">
               <!-- Content in header goes here -->
          </div>
          <div class="footer">
                <!-- Content in footer goes here -->
          </div>
     </body>
</html>
    HTML:
    And in the CSS style sheet, style each div block as you wish. Heres an example of CSS styling.

    /* I'm not going to completely generate a CSS file for you, I'm just going to quickly style the header and footer div blocks */

/* Notice in the HTML, I gave class names to each div, so in order to select the respective div, I have to use a "." to modify it */

.header {
     position: relative;
     width: 100%;
     top: 0;
}

.footer {
     position: absolute;
     width: 100%;
     height: 50px;
     /* Place footer at the bottom */
     bottom: 0;
}
    Code (CSS):
     
    tinman47, Aug 31, 2015 IP
  5. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #5
    Just put your content between the header and the footer and they will automatically be separated.
     
    mmerlinn, Sep 5, 2015 IP
  6. vinika

    vinika Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #6
    You need to create divs in your page or as you will put content in your page; your page will automatically go down and at last put your footer content; your header and footer will be separated.
     
    vinika, Sep 8, 2015 IP