Solved

how to make header footer and content div

Posted on 2013-12-03
10
759 Views
Last Modified: 2014-01-03
I want to make a header , footer , content  div   using bootstrap.

link:   http://getbootstrap.com/2.3.2/


can you please tell  what would be the code with bootstrap  for this ?

(I want a fixed header & footer)
0
Comment
Question by:cofactor
  • 5
  • 5
10 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39692526
Why are you using the old version of bootstrap?

If you look at the instructions http://getbootstrap.com/2.3.2/components.html#navs there is a fixed top and fixed bottom.
<div class="navbar navbar-fixed-top">
  ...
</div>

Open in new window

fixed footer
<div class="navbar navbar-fixed-bottom">
  ...
</div>

Open in new window

Putting it all together, you will want to make sure there is space between the body and fixed top. Example working http://jsbin.com/ekOTEKUt/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
 
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .mainbody{margin-top:30px;}
  </style>
</head>
<body>
   <div class="navbar navbar-fixed-top topnav">I am fixed at the top</div> 
<div class="container mainbody">
  
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
      this is the side
    </div>
    <div class="span10">
      <!--Body content-->
      this is the body
    </div>
  </div>
</div> 
    <div class="navbar navbar-fixed-bottom">I am fixed at the bottom</div>  
</body>
</html>

Open in new window

As  long as  you are starting fresh, use the new version which is http://getbootstrap.com/
0
 

Author Comment

by:cofactor
ID: 39694698
I want to  put a banner header jpg  and a footer jpg  .  I don't see a place to put that  in your code.

What changes do I require here ?

I have downloaded the latest version.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39695389
>I don't see a place to put that  in your code.

Try where you see, "I'm fixed at the top" (class = "navbar-fixed-top topnav") or "I'm fixed at the bottom" (class="navbar-fixed-bottom").  Replacing the text with your images.
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39695403
You will notice in bootstrap3, fixed at the top and bottom has the same class http://getbootstrap.com/components/#navbar-fixed-top.  One of the main differences is the grid.  http://getbootstrap.com/css/#grid-example-mixed-complete

The hardest part is wrapping your head around coding 3 or 4 different versions of a page at the same time.
0
 

Author Comment

by:cofactor
ID: 39697563
>>>Replacing the text with your images.

Do you mean I should put an image in place of text ?

ummm.......but  you know I  already have a common.css file where I  have a class  for header banner. I just want to reuse this class

.HeaderBg {
       background: url("/PaymentServices/images/header.png") repeat-x top left;
       height: 40px;
}


Is it not possible to  use this class   along with  bootstrap css  to set a header background image  ?  If so , what changes I may require in your code ?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39704450
Just place a new div with the class HeaderBg in place of the text I have.
0
 

Author Comment

by:cofactor
ID: 39709244
>>>>Just place a new div with the class HeaderBg in place of the text I have.


this worked.....but image did not stretch to the  entire header.

Is there any workaround ?
0
 

Author Comment

by:cofactor
ID: 39710494
I am using this css..

background: url("/PaymentServices/images/header.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);

should I make it a repeat to stretch image  out ?

Could you please tell what is the proper code here ?
0
 

Author Comment

by:cofactor
ID: 39718676
No reply.

any comments ?
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 400 total points
ID: 39718995
If you don't use it as a background image you can make the image responsive http://getbootstrap.com/css/#overview-responsive-images otherwise, you may need to use media quires and keep your images at 100% where possible.

In the bootstrap docs you will see http://getbootstrap.com/css/#overview
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

For each of these, you can create custom css and use multiple size images.

@media (max-width: @screen-xs-max) { 
    background: url("/PaymentServices/images/header_xs.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    background: url("/PaymentServices/images/header_sm.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);

 }
@media (min-width: @screen-lg-min) { 
    background: url("/PaymentServices/images/header_large.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
 }

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question