Solved

how to make header footer and content div

Posted on 2013-12-03
10
744 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

770 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