Results 1 to 6 of 6

Thread: 100% width footer?

  1. #1
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,732

    Default 100% width footer?

    Pulling up a template at random (AVA-Red) I noticed it has an interesting feature: The footer colour goes completely across the entire width of the browser window, regardless of page width or browser window size.

    Looking at the template, there seems to be some sort of "trickery" (or perhaps "witchcraft") using two, nested layout regions. The back one has the fill/colour/image for the full-width background, while the front layout region has the content to be centered on the page.

    I notice some CSS in the SiteStyle tagged #footer that I suspect does the full width thing. I am a CSS-O-Phobe, so only my spider sense tells me this is the key.

    My question: If I am starting a style from scratch, what would I need to do to create a 100% width footer?

    Do I have to manually insert the appropriate CSS code in the SiteStyle?

    If I do that, how do I assign the #footer tag to the layout region?

    Is there another way using the regular Style configuration tools?

    Looking for the easy way...
    Ray Cambpell
    Sounds In Sync
    Linked in

  2. #2
    Senior Member barbara0701's Avatar
    Join Date
    Apr 2010
    Location
    Germany
    Posts
    1,184

    Default

    Hi Ray,

    how about reading some German again:

    http://www.nof-tutorials.com/Footer/

    In that example you write a CSS-class in style view: name it footer

    <style type="text/css">
    #footer {
    position: absolute;
    left:0;
    background-image: url(bgfooter.png);
    background-repeat: repeat-x;
    height:170px;
    width:100%;
    text-align:center;
    padding-top:0px;
    }
    </style>
    You draw a text area and format it as stated in the tutorial.

    If you still use tables there is another nice method. But I don't suppose you want to use tables anymore

    If you do (HTML4 with tables) , draw a table with three columns at e.g. 2200 px width. Set the middle column at exactly your page width in pixel. Right and left column at automatic. Then define the whole table with 100% width and give it a background colour. Draw a layout region into the middle column and include your contents there.

    There is a tutorial in German on that method too:

    http://www.nof-schule.de/forum/t-foo...r-masterrahmen

    Maybe somebody can give you links to english instructions.

    Have fun!

  3. #3
    Senior Member franko's Avatar
    Join Date
    Apr 2010
    Location
    Tasmania Australia
    Posts
    2,639

    Default

    I've been doing 100% footers for quite some time by simply making different length backgrounds and changing the background in Layout Properties depending on the content length. I usually find I only need to make 4 or 5 different length backgrounds for things to fit pretty well. Easier than the kludges above and, until NoF allows a 100% footer to be spec'd in properties, the way I'll continue with.

    A tutorial on 100% footer was promised about 2 years ago by one of the NO guys here - Etienne, I think. But no sign yet. I do think that if a template is included that has things that are not a part of NoF's wysiwyg methodology, ie, requires writing custom CSS, then they should at least produce a detailed tutorial to do it. Otherwise, if you know how to write it in CSS, why the heck do you need NoF? Just use a text editor; there are some good programmer's editors for free on the 'net.

  4. #4
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,732

    Default

    Thanks, Babs

    That looks pretty much like the template is doing. It wasn't clear, however, how to assign the #footer tag to a layout region by studying the code. I will try inserting a <DIV> statement and see what happens.

    Now if only there was some sort of function called, oh I don't know, a "snippet", where I could save this sort of code and call it up and insert it when I wanted it. I could create a library of little custom "snippets" and I wouldn't have to figure it out each time I want to use it. I have dozens of mini websites where I've successfully inserted some script or such, and keep them around so I can copy what I've done in client sites.
    Ray Cambpell
    Sounds In Sync
    Linked in

  5. #5
    Senior Member barbara0701's Avatar
    Join Date
    Apr 2010
    Location
    Germany
    Posts
    1,184

    Default

    To insert code in the layout region press html and insert before the tag:

    <div id="footer">

    And then close the div after the end tag:

    </div>

    "footer" can be any name you call your class.

    (Sorry if i don't know the exact terminology in English)

    Regarding the other issue:

    You can create a template with all your custom css-classes and use it for new projects.

  6. #6
    Senior Member
    Join Date
    Sep 2010
    Posts
    144

    Default

    Took a while but I got it working !! But only using HTML5 Dynamic, didnt work on HTML5

Posting Permissions

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