Solved

how to make header footer and content div

Posted on 2013-12-03
10
769 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How Close unsubmited attempts 10 42
I really need help in my css for such a simple change, but can't find the code to do it 13 51
Jquery 7 28
Two decimal 5 25
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

679 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