Skip navigation
lyn100
lyn100 Calculating status...
Currently Being Moderated

How to get grey bar at bottom of page to move up and down

Jun 8, 2012 3:07 PM

Hi

I want to have a grey bar at the bottom of my pages. So far I have used a graphic with a grey bar on the bottom as a background image in the page properties section of my template. This works well, except I am now finding that some pages need more space than what the graphic will allow. Do I need to use frames to achieve this? (I have seen that Adobe don't recommend using frames). Or is there a way to get another graphic of a grey bar to float up and down according to page size? Please respond in layman's terms as I am still a rookie at DW.

thanks.

L

1497 Views   16 Replies   Latest reply: Nancy O., Jun 12, 2012 10:15 AM
 
Replies
  • John Waller
    Currently Being Moderated
    1. John Waller,
    Jun 8, 2012 3:34 PM   in reply to lyn100
    Report

    Do you mean like a Sticky Footer?

    http://ryanfait.com/sticky-footer/

    http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Jun 8, 2012 3:36 PM   in reply to lyn100
    Report

    Best to keep the height of your page flexible because you'll have some long pages and some short pages in your site. 

     

    The following demo shows how to have different background-colors on various sections of your page with CSS. 

     

    You can replace background-colors with CSS gradients or repeating image slices.

    http://alt-web.com/TEST/LHS-test.html

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    3. lyn100,
    Jun 8, 2012 5:04 PM   in reply to John Waller
    Report

    Hi John

     

    Yes, it’s a sticky footer I want … this is all new to me, but rather exciting!  What I am wanting to do is make the grey bar at the bottom of this page float up and down so I need to be able to adjust the height of the code you sent me as well as being able to place a small menu bar (contact us, etc.) and the email response blurb on top of the sticky. Could you elaborate on how to do this.

     

    Thanks so much.

     

    Lyn

     

    http://whiterockchristiansciencechurch.com/bcsitejune3/index.html

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Jun 9, 2012 10:24 AM   in reply to lyn100
    Report

    This link shows how to make a sticky footer:

    http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml

     

     

    CSS:

     

    #footer {

    position:fixed;

    bottom:0;

    left:0;

    background-color: #666666;

    }

     

     

    HTML:

     

    <div id="footer">

    This is a sticky footer.  Add your footer content here...

    </div>

     

    In addition, you'll need to slice your 4-color background image into 4 separate background images.

    http://whiterockchristiansciencechurch.com/bcsitejune3/images/sidebar4 .png

    Green = #header,

    Charcoal = #topMenu,

    White = #content

    Gray = #footer.

     

     

    Nancy O.

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    5. lyn100,
    Jun 9, 2012 4:25 PM   in reply to Nancy O.
    Report

    Thanks Nancy

     

    I think I am clear now on how to make the sticky footer, but your comment about slicing my background graphic into four graphics is puzzling me … I realize I have to take the grey off the bottom as this will now become part of the footer, but why slice the other into three bits? In Dreamweaver ‘page properties’ section, it only gives me the option of placing one background graphic. How would I be able to place more than one graphic as a background image?

     

    Thanks

     

    Lyn

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Jun 10, 2012 12:28 PM   in reply to lyn100
    Report

    Copy & paste this code into a new, blank HTML document. 

    You can change background-colors to background-images or CSS background-gradients if you prefer.

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 16px;
margin:0; padding:0;
background-color: #CCC;
}

#header {
min-height: 100px;
background-color: #099;
}

#menu {
min-height: 45px;
background-color: #333; 
color: #FFF;
}

#content {
min-height: 500px;
background-color: #FFF;
}

#footer {
min-height: 100px;
background-color: #666; 
color:  #FFF;
/**sticky footer**/
position:fixed;
bottom:0;
left:0;
width: 100%;
}

.section {
width: 880px; /**adjust width as needed**/
margin:0 auto;  /**this is centered**/
padding:0 12px; 
/**for demo purposes, you can remove the border**/
border: 1px dotted red;
}
</style>
</head>
<body>

<div id="header">
your header goes here...
</div>

<div id="menu">
<div class="section">
your navigation goes here...
</div>
</div>

<div id="content">
<div class="section">
your page content goes here...
</div>
</div>

<div id="footer">
your footer content goes here...
</div>


</body>
</html>

     

     

    Nancy O.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    7. MurraySummers,
    Jun 11, 2012 5:58 AM   in reply to Nancy O.
    Report

    Why the 100% width on the #footer, Nancy?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    8. Nancy O.,
    Jun 11, 2012 9:26 AM   in reply to MurraySummers
    Report

    Murray *ACP* wrote:

     

    Why the 100% width on the #footer, Nancy?

     

    Because footer is fixed and the OP's layout uses 100% width header & footer backgrounds.

     

     

    N

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    9. MurraySummers,
    Jun 11, 2012 9:31 AM   in reply to Nancy O.
    Report

    But wouldn't the width go to 100% by default? Does in my tests....

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    10. MurraySummers,
    Jun 11, 2012 9:36 AM   in reply to MurraySummers
    Report

    OK - this is interesting.  Position:relative goes to 100%.  Absolute and fixed do not in IE.  Absolute does not in FF, but fixed does.  Strange that....

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    11. Nancy O.,
    Jun 11, 2012 9:40 AM   in reply to MurraySummers
    Report

    It doesn't for me in either Firefox 12 or IE9 on Win. 

    Which browsers are you using?

     

     

    N

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    12. MurraySummers,
    Jun 11, 2012 9:45 AM   in reply to MurraySummers
    Report

    No.  See the test page -

     

    http://www.gws-sandbox.com/test-div_default.html

     

    It appears that the behavior is the same in IE/FF/Opera/Safari (but not in DW's Design view) - Fixed and Absolute positioning requires you to specify a width for the div.  Relative positioning does not.  I suppose that makes sense.  Thanks - I learned something!

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    13. lyn100,
    Jun 11, 2012 4:58 PM   in reply to Nancy O.
    Report

    Hi Nancy

     

    Thank you for sending me the code …

     

    I am learning Dreamweaver CS4 from the digital classroom manual and in creating a first page it tells you to create a ‘main’ ap box first and then a ‘container’ which wraps the ‘main’ box as well as all the other elements on the page. I am unable to find a ‘container’ in the code you send me so now I am puzzled. I am trying to insert my masthead at the top, but I don’t see a way to keep them lined up with the rest of the body copy -- if I attach them to the ‘header’ in your code, the masthead slides sideways as you size the screen. I would have thought these elements should be inside the container to keep them in position.

     

    I really appreciate your help. Thanks.

     

    Lyn D.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    14. Nancy O.,
    Jun 12, 2012 9:45 AM   in reply to lyn100
    Report

    ...it tells you to create a ‘main’ ap box first and then a ‘container’ which wraps the ‘main’ box as well as all the other elements on the page.

    Any book that instructs you to use APDivs for primary layouts should be burned, OK?  I am not joking.  Nobody, not even experienced web developers should use APDivs for primary layouts because they are removed from the normal document flow. To illustrate what happens when people increase text size in their browsers (as many do), APDivs collide making a jumbled mess.  See screenshot.

     

    SCBC.jpg

     

    In some layouts, it's good to use an outer #container or #wrapper division but it isn't required in all layouts.  Yours doesn't need an outer #container so much as it needs an inner one.   I created a class for this called .section.   The .section div horizontally centers content on screen.

     

    Get rid of Digital Classroom.  Learn HTML & CSS first.  This is required knowledge. 

    HTML & CSS Tutorials - http://w3schools.com/

     

    WEB DESIGN RESOURCES:

    http://forums.adobe.com/message/4105662#4105662

     

    For your first site, use one of the pre-built CSS layouts that comes with Dreamweaver.

    File > New > Blank > HTML > 2-col, fixed layout.

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • lyn100
    Currently Being Moderated
    15. lyn100,
    Jun 12, 2012 10:02 AM   in reply to Nancy O.
    Report

    Hi Nancy:

     

    Oh dear, your comments about the Digital Classroom which I had thought would be the ‘bible’ to learn Dreamweaver are most discouraging! I will check out the w3schools. Thanks for your patience … I would still like to know, though, if you’re available for private, paid consultations per my email to your company.

     

    Thanks.

     

    Lyn

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    16. Nancy O.,
    Jun 12, 2012 10:15 AM   in reply to lyn100
    Report

    You can contact me through my web site.

    http://alt-web.com/contact.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)