Solved

how to make header footer and content div

Posted on 2013-12-03
10
727 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
 
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

707 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now