Results 1 to 7 of 7

Thread: Layout Region Fill Page Width Question

  1. #1
    Junior Member
    Join Date
    Oct 2010
    Location
    Portland, Oregon
    Posts
    22

    Default Layout Region Fill Page Width Question

    If you go to http://mynpn.com/ and look at the bottom of the page you will see a gray box. I want the gray box to fill the screen left to right in it’s same height... I just want the width to stretch according to the users screen resolution. I have no idea how to accomplish this in Fusion. I am using NOF12. Right now the gray box (my footer) is a layout region that I would like to have appear at the bottom of each page I publish, regardless of how long the page is. I read on http://netobjects.com/en/nof/12/00/d...out_Method.htm that you cannot set the Layout to wrap to the width of your site visitor’s browser. If the browser window is wider than your page, the page’s background fills in; if the window is smaller than your page width, your site visitor has to scroll.

    So basically, how do I accomplish this in NOF12? Is it possible? Can someone provide me with easy instructions that I can follow to accomplish this?
    Dustin D.
    http://www.DustinDrorbaugh.com - Built w NetObjects Fusion 13
    http://www.Paula-Abdul.net - Built w NetObjects Fusion 13

  2. #2
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    1,875

    Default

    easy to do, the following is German but you will follow it
    http://www.tommyherrmanndesign.com/n.../tutorial.html

  3. #3
    Junior Member
    Join Date
    Oct 2010
    Location
    Portland, Oregon
    Posts
    22

    Default

    If you look at my attachments - example A is what my site looks like now. Example B is what I want it to look like. I tried translating that site and figuring it out but the site doesnt demonstrate how to make it stretch the screen like my Example B.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	example-a..jpg 
Views:	264 
Size:	16.4 KB 
ID:	1101   Click image for larger version. 

Name:	example-b..jpg 
Views:	274 
Size:	18.3 KB 
ID:	1102  

  4. #4
    Senior Member mia's Avatar
    Join Date
    Apr 2010
    Location
    Germany /Deutschland
    Posts
    809

    Default

    Did you set the width of your div container to 100% ?
    If you do it should stretch the screen like shown in the tutorial.
    http://www.nof-community.de
    NOF-Community, Hilfe, Support, Tutorials, Anleitungen, Tipps und Tricks für Netobjects Fusion und SwissKnife Komponenten

  5. #5
    Junior Member
    Join Date
    Oct 2010
    Location
    Portland, Oregon
    Posts
    22

    Exclamation Still not working - look at my code attached

    Take a look at the attached HTML example I did following the instructions on the link you provided. You will note my code matches the code in the link you provided exactly - but the blue box is not filling the entire width of the page.
    Attached Files Attached Files

  6. #6
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    1,875

    Default

    you did not place the code in the CSS file in style view, the code below needs to be added in style view, CSS tab, then it should work in all browsers, currently your page works in chrome and FF and fails in IE
    http://www.videoproductions.com.au/NOF12/CSS-code.png

    #footer
    {
    position:fixed;
    bottom:0px;
    left:0;
    height:17px;
    background-color:#0000ff;
    background-position : 50% 0%;
    padding:2px;
    width:100%;
    }

    adding the code between heads will also work, but you get leaner code by using the CSS file
    Last edited by antonsvideo; 02-06-2012 at 03:39 AM.

  7. #7
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    1,875

    Default

    and you need to set html output to XHTML

    it looks like your html is set to html 4.01 with tables

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •