CMS Made Simple Forums

Hi,

A newbie question here, so please be gentle.

I'm trying to expand my content to the whole height of a browser window, with my footer image below it.

I'm just using the default layout stylesheet and the default bulletmenu vert 1c stylesheet [because when I create a new template, it just doesn't seem to find the style...but another issue for another date].

Here is the layout stylesheet:
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */
    body {
        margin: 0;
        padding: 0;
        text-align: center;
        background-color: #8fa6b4;
    }
    div#page {
        width: 763px;
        margin:  auto;
        padding: 0;
        text-align: left;
    }
   
    /* HEADER */
        div#header {
          position: absolute;
          top: 0px;
          left: auto;
          width: 763px;
          height: 210px;
          background:  url(/images/Header.jpg);
        }

    /* END HEADER */
   
   
    /* CONTENT */
        div#content {
          position: absolute;
          top: 230px;
          left: auto;
          width: 763px;
          height: 100%;
          background:  url(/images/Body.gif);
        }
       
        /* MAIN */
            div#main {
            width: 570px;
            padding-right: 25px;
           
            }
        /* END MAIN */
       
        /* SUB */
            div#sub {
               
            }
        /* END SUB */
       
    /* END CONTENT */
   
   
    /* FOOTER */
        div#footer {
          position: absolute;
          Top: 100%;
          left: auto;
          width: 763px;
          height: 60px;
          background:  url(/images/Footer.gif);
        }

        div#footer p {
         
        }
    /* END FOOTER */
/* END LAYOUT */



div.breadcrumbs {
         
          position: absolute;
          top: 210px;
          left: auto;
          width: 763px;
          height: 20px;
          background:  url(/images/Body.gif);
          font-size: 90%;
         
}
_____
...and here is the bulletmenu vert 1c stylesheet:
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* NAV BAR ON THE LEFT AND ONE COLUMN OF CONTENT */
    div#content {
        margin: auto auto auto auto;
       
    }
    div#main {
      float: right;
     
     
    }
    div#menu_vert {
        float: left;
        width: 140px;
        margin-left: 15px;
    }
    div#content2 {
        display: none;
    }
    div#menu_horiz {
        display: none;
    }
    div#footer {
   
}
/* END CONTENT */
_____

Ok...no shame here....this is the site I'm trying to get working with CMSMS:  http://awchurch.ca. [As you see the ">>" for the little nav menu is not aligned properly either].

I've done a several other website, but all with tables.  I'm trying to learn CSS & CMSMS.  But I'm just not grasping something.

Any help would be muchly appreciate.

Thanks,

but what is actually going wrong here then? In Konq the page is even bigger then the window height, and the yellow coloring extends under the footer-image (btw: images with text on them are less accesible. You  should only do that if the text's typography is important, such as in logo's and company names. (c)copyright and the webhost is not, IMHO)

Thanks Jelle for the quick reply.

Well, this is the problem:
http://www.awchurch.ca/index.php?page=46

Any help to straighten out my layout would be great.

Thanks,

P.S.  I just have the images/text [header & footer] there for now for my own testing...it will be changed....thanks.

P.P.S.  How to I make the URL's look nicer on a windows server? [I read about the '.htaccess' file and I tried that, but it didn't work because I'm hosted on a windows server.

sorry, cannot help you with the windows rewrite rules. I am LPIc-2 certified, but I know nothing of that other OS (and I like it that way:)).

Cool no problem.....any advice on the layout problem

yes the layout:

I think this might be a problem: I don't think that is what you want. absolute positioning kills the flow of the content. As you see it just goes right under or over it. setting the top border at 100% will make sure that the picture sits just below the fold. You want it to be just a few em's above the bottom, can't you use that? (remove the position, bottom: 1 em;)
You might try putting a &nbsp in th efooter too, it is empty now and your browser may treat is special then (not sure about that, or anything else come to think about it)

Thanks Jelle...I removed the absolute positioning and that seems to align everything up.

Slowly getting there.

One more question How do I get the content to expand to 100% of the height of the browser window?

Thanks again for all of your help.

Hi,

Ok...I'm just pulling my hair out.  I've been doing google searches until the cows come home.  I can't figure out, why my pages [http://awchurch.ca] won't expand to 100% height of the browser window.  The pages only expand as far as the text goes.

I really need help...I have spent hours trying to figure this out with no avail.

Here is the layout stylesheet:
___/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */

body {
        margin: 0;
        padding: 0;
        text-align: center;
        background-color: #8fa6b4;
        height: 100%;
    }
    div#page {
        width: 763px;
        margin:  auto;
        padding: 0;
        text-align: left;
        height: 100%;
    }
   
    /* HEADER */
        div#header {
          top: 0px;
          left: auto;
          width: 763px;
          height: 210px;
          background:  url(/images/Header.jpg);
        }

    /* END HEADER */
   
   
    /* CONTENT */
        div#content {
          top: 230px;
          left: auto;
          width: 763px;
          height: 100%;
          background:  url(/images/Body.gif);
        }
       
        /* MAIN */
            div#main {
            width: 570px;
            padding-right: 25px;
           
            }
        /* END MAIN */
     
       
    /* END CONTENT */
   
   
    /* FOOTER */
        div#footer {
        top: auto;
        left: auto;         
        bottom: 1 em;
        width: 763px;
        height: 60px;
        background:  url(/images/Footer.gif);
        }

        div#footer p {
         
        }
    /* END FOOTER */
/* END LAYOUT */



div.breadcrumbs {
          top: 210px;
          left: auto;
          width: 763px;
          height: 20px;
          background:  url(/images/Body.gif);
          font-size: 90%;
         
}
___

Thanks for any help or suggestions.....I need a lot

You probably are not the only one having this problem. As a fix, you could add a few em margin to the bottom, that at least makes it look less akward.
I remeber some trick with using a repeat-y for a background image, but I have never tried that myself.