I’m using latest version of freeway pro. I have read many topics but I couldn’t solve my problem completely. I want to make a footer that grows as width of browser window. just like the footer of this site -freewaytalk- itself.
I know that if I want to get “width can grow” option work, I have to set page align to “none”. but if I do, all my stuff will be aligned to left. How can I set alignment of my objects to center while page alignment is set to none?
I’m really confused, please explain to me simply what to do.
I also wanted to fix my navigation bar at the top and make it unscrollable! but I have the similar problem. it aligns to left.
The issue with this, always, is that 100% width has to be 100% of
something. If you have set your page to center or other alignment,
that page has to have a width of some sort, or else it cannot center
– it’s always going to stretch out to the full width of the screen,
and any elements within it that have a width will be positioned
relative to the top-left corner of the browser window. When you set
that page to a defined width so that it can center, all child elements
within the page are constrained to whatever width you have chosen. It
has to be 100% of that page, and cannot be 100% of the window any more.
If you want to have a fixed-width element centered on the screen, and
a browser-width element at the top and the bottom, you need to build
an inline layout. Try these steps in a new page.
Set the page to Align: none.
Draw an HTML box the width of your page, starting below where your
header will be. The height of this element doesn’t matter much at this
point. In the Inspector, change the width setting to 100% (you have to
type the %).
Double-click inside that box so you have a flashing text cursor.
From the main menu, choose Insert / HTML Item. Click once on the
100px square box that will be inserted in the text flow. Use the
Inspector to set the width you want your “page” to have, and set the
Margin to Auto (centered).
Click on the pasteboard somewhere, then double-click inside the
outer HTML box again, so you have a text cursor again, and use the
down-arrow a bunch of times so you are certain that your cursor is
after the first inline box you entered. Repeat step 3, only set the
width to 100% and don’t fiddle with the Margin. This will be your
footer element.
Now you can use inline construction techniques to add your content
to the centered inline box. This will ensure that your content will
push the footer down the screen if the visitor zooms the text or uses
Windows.
Center your footer text in the second box, and you should have a
complete layout. Preview it in a browser and you should see the footer
taking up the full page width and the body content pushing that footer
down the screen.
To make your fixed-in-window element, draw another box at the top
of the screen (you do this last so it will be at the top of the stack
of page elements) and use the Inspector to set it to 100% width and
Position: Fixed in Window. Give it a color or a tiling background
image so it has a defined shape.
On Sep 9, 2011, at 11:36 AM, Khashayar Ebrahimi wrote:
I’m using latest version of freeway pro. I have read many topics but
I couldn’t solve my problem completely. I want to make a footer that
grows as width of browser window. just like the footer of this site -
freewaytalk- itself.
I know that if I want to get “width can grow” option work, I have to
set page align to “none”. but if I do, all my stuff will be aligned
to left. How can I set alignment of my objects to center while page
alignment is set to none?
I’m really confused, please explain to me simply what to do.
I also wanted to fix my navigation bar at the top and make it
unscrollable! but I have the similar problem. it aligns to left.
Thanks Walter.
I did this on an empty new page and works good but it makes adding photos and graphics much more difficult.
I found a new bie way myself. I created an absolute layered html and added background color, then set its width to 1893 and put it in the bottom of my page. it works even when page align is center. but if somebody with a visit the page with a screen more than 1893px of width, not a good thing is going to happen.
do you have some idea to make freeway allow width more than 1893 Walter?
isn’t there any other way to make flexible width object in a center aligned page?
by the way which way freewaytalk uses to make its header n footer flexible?
You should download the document I linked to. That’s not precisely the
technique I used to make FreewayTalk, but it’s very similar. The
footer is actually the background color of the page, and then the 100%
wide element in the middle holds the background color white to make
the content area. The header is a tiling graphic with a static image
overlaid on that. You can probably get rid of your super-wide image if
you create an image that can tile horizontally, by the way.
Walter
On Sep 9, 2011, at 4:18 PM, Khashayar Ebrahimi wrote:
Thanks Walter.
I did this on an empty new page and works good but it makes adding
photos and graphics much more difficult.
I found a new bie way myself. I created an absolute layered html and
added background color, then set its width to 1893 and put it in the
bottom of my page. it works even when page align is center. but if
somebody with a visit the page with a screen more than 1893px of
width, not a good thing is going to happen.
do you have some idea to make freeway allow width more than 1893
Walter?
isn’t there any other way to make flexible width object in a center
aligned page?
by the way which way freewaytalk uses to make its header n footer
flexible?
I have created this successfully but have an additional question
I have a scroll layer /scroll content action to center on page that is formatted as directed above. but the scroll action cannot be applied with the container.
Is there a solution to this?
All other pages work great except the scroll pages
thanks as always
I’m such a newbie that if the terms aren’t exactly what is stated inn Freeway Pro then I am lost. For instance Margin, as in set the Margin to Auto (Center).
I am using FWP v6.1.1 maybe some of you have different versions and they have different terms. But, I find this type of thing to be prevalent for a lot of terms.
Maybe it is old hat to some of the real pros here, but I need all the coddling I can get.
The example was written when Freeway 5 (not 5.5, and certainly not 6) was the latest version. I am looking in Freeway 6.1.0, and I have followed these steps:
Double-click inside an HTML box so you see a flashing text cursor.
From the main menu, select Insert / HTML Item.
Click once on the resulting 100px-square HTML box, and look in the Inspector.
In the Measurements section, look in the Align picker and choose Center.
Look in the Dimensions section, in the Margin picker, where it shows the ‘–’, meaning “mixed values”. Select Custom and you will see nothing top and bottom, and Auto left and right. You don’t have to use Align to get this effect, you can simply set the Margin to Custom and enter those values through the Dimensions segment of the Inspector if you prefer. (This was where 5.5 and lower hid this preference.)
Walter
On Oct 16, 2013, at 3:10 PM, gunner holmes wrote:
I’m such a newbie that if the terms aren’t exactly what is stated inn Freeway Pro then I am lost. For instance Margin, as in set the Margin to Auto (Center).
I am using FWP v6.1.1 maybe some of you have different versions and they have different terms. But, I find this type of thing to be prevalent for a lot of terms.
Maybe it is old hat to some of the real pros here, but I need all the coddling I can get.
You’re certainly not alone.
Dave
On Oct 16, 2013, at 3:10 PM, gunner holmes wrote:
I’m such a newbie that if the terms aren’t exactly what is stated inn Freeway Pro then I am lost. For instance Margin, as in set the Margin to Auto (Center).
I am using FWP v6.1.1 maybe some of you have different versions and they have different terms. But, I find this type of thing to be prevalent for a lot of terms.
Maybe it is old hat to some of the real pros here, but I need all the coddling I can get.
I follow step by step and have created this successfully but have an additional question I put some graphic item with text, how can I make them all keep in page center when preview in browser?
I’ve read through this message twice, and I still cannot work out what you mean by make them all keep in page center. Can you make a little graphic of what you want, and post it somewhere (with a link here)? Picture’s worth a thousand words, and all that.
Walter
On Nov 8, 2013, at 1:31 AM, smallwhite wrote:
I follow step by step and have created this successfully but have an additional question I put some graphic item with text, how can I make them all keep in page center when preview in browser?
Well, the center of your page isn’t centering left to right, either. What I recommend you do is download the inline example I linked to earlier in this thread, and look at how that page is constructed. If you make your page a truly inline layout, you will be able to have the look you want – full-width footer and all. Centering is a feature of how you construct the outermost element – the thing that all the other elements are positioned relative to.
I looked at your example webpage and noticed the same problem I have on my website (www.plug-and-play.nl).
If you adjust the browser window width, so a scroll bar will appear on the bottem, and start scrolling to the right, the flexible width stops at the point where the browser windows stops.
I know this can be solved by putting a background instead of using colored html boxes, but it would take more time if you need to adjust something. Now I can easily adjust the size of a colored html box in height instead of making a new background image.
If you set the outermost box to Overflow: hidden, then you won’t have this problem.
Walter
On Jan 4, 2014, at 3:36 AM, Frans Boumans wrote:
Hi waltd,
I looked at your example webpage and noticed the same problem I have on my website (www.plug-and-play.nl).
If you adjust the browser window width, so a scroll bar will appear on the bottem, and start scrolling to the right, the flexible width stops at the point where the browser windows stops.
I know this can be solved by putting a background instead of using colored html boxes, but it would take more time if you need to adjust something. Now I can easily adjust the size of a colored html box in height instead of making a new background image.
The problem is your basic construction. The “outermost” divs are set “absolute” while they should be relative as well within the PageDiv (such as the “content” DIVs within those “outermost” (Box-inBox construction).