Is it just me, or does the Relative Page Layout Action seem erratic?
I’ve created a new document in FW 5.5 applied the RPL Action and created a few HTML and graphic boxes to give it a go…
One of the HTML items is ‘Fixed in Window’ with a horizontal size of 100%. This no longer works, see UK.COM if you scroll across the black horizontal line doesn’t ‘grow’ to fill the window 100%.
And if I select this HTML item and apply the Remove from Relative Page Layout Action, then the layout totally freaks out (when previewed).
Does the RPL Action not work with ‘Fixed in Window’ items?
Item2 is the ‘horizontal rule’ and it is definitely ‘Fixed in Window’.
I have no idea what the margin settings are - I haven’t applied any margin settings / wrap to the item. If I remove the RPL Action from the page, and view the Page Source in a browser, item2 is styled as we would expect. So I can only assume the RPL Action is doing something odd…
By the way, your horizontal rule - if I increase the text size, the rule doesn’t move down the page - the layout breaks. Does this item have Remove from RPL Action applied to it?
Try applying the Remove from relative page layout Action to the fixed item. We’ll look into automatically removing fixed items from the flow for the full release.
Joe
On 8 Aug 2010, at 14:52, “Mark” email@hidden wrote:
Hi David
Item2 is the ‘horizontal rule’ and it is definitely ‘Fixed in Window’.
I have no idea what the margin settings are - I haven’t applied any margin settings / wrap to the item. If I remove the RPL Action from the page, and view the Page Source in a browser, item2 is styled as we would expect. So I can only assume the RPL Action is doing something odd…
By the way, your horizontal rule - if I increase the text size, the rule doesn’t move down the page - the layout breaks. Does this item have Remove from RPL Action applied to it?
By the way, your horizontal rule - if I increase the text size, the rule doesn’t move down the page - the layout breaks. Does this item have Remove from RPL Action applied to it.
The layout ‘breaks’ because this item is Fixed in Window! You will note that it stays put while the rest moves - that is how it is supposed to work.
And yes it has the Remove from RPL action applied.
Try applying the Remove from relative page layout Action to the fixed item. We’ll look into automatically removing fixed items from the flow for the full release.
I’ve applied the Remove from RPL Action to the item and the layout freaks out. See UK.COM
I’ve also been working on another site: UK.COM I’ve applied the RPL Action to the pages and it all works as it should do, but the ‘Fixed in Window’ items (the white background and black horizontal line) no longer stretch 100% across the window (if you scroll across you’ll see what I mean). If I remove these items from the RPL Action then the relative page layout no longer works (the H1 headings goes over the line and the images below the line etc).
Is it possible to have an item 100% stretch across the window (not have an absolute length) AND work with the RPL Action, i.e. if the text size is increased, the line moves down in relationship to the text above it?
My website – UK.COM – is very simple and doesn’t require CSS layout
That it is very easy to create non-CSS layouts in Freeway that don’t break when the text size is increased
It doesn’t matter to the end user if the website is tabled base or CSS layout
Why should I bother with a CSS layout?
The box model scares the pants off me and the RPL Action doesn’t seem to work with my design.
What’s the advantage to me of a CSS layout? Is it more search engine friendly? or does it just look more professional to the miniscule number of people who might read the source code?
What’s the advantage to me of a CSS layout? Is it more search engine
friendly? or does it just look more professional to the miniscule
number of people who might read the source code?
A CSS layout wins points in accessibility; think screen readers.
Easier to maintain a CSS layout.
Tables require a lot of markup (code) to accomplish the same thing
compared to a CSS-based layout and this can have a ripple effect in
terms of load times and bandwidth but this will vary considerably.
More code, more clutter.
Tables, when used for layout, do not make as much sense semantically
to search engines.
It does look more professional/modern.
True, the average visitor doesn’t care about the code but people do
look, eg, potential employers and savvy clients. If you do this stuff
for a living it’s worth keeping in mind for the reasons mentioned.
Tables excel at displaying data, but it’s less than ideal for layouts.
Try applying the Remove from relative page layout Action to the fixed item. We’ll look into automatically removing fixed items from the flow for the full release.
I’ve applied the Remove from RPL Action to the item and the layout freaks out. See UK.COM
The reason it’s “freaking out” is because your page has align set to None. No alignment on the page means the page doesn’t actually have any width, causing the relative positioned items to jump down the page when they run out of space, which in this case is at the right edge of the browser window. This very thing can allow you to create very clever layouts that always fit in a given space, think mobile designs vs regular designs.
You can do one of two things to make the layout behave as you expect, you could left align your page or select all the items under the line and group them. Both things will tell the browser how wide your content should be.
In the second example you sent (the A3 design), try aligning the page left and setting the black line to have a width of 98%.
Todd was spot on with what he said about CSS Layout.
As you suggested I’ve made the page align left, but kept the black line 100% see: UK.COM
The black line and the white background HTML items work with the RPL Action, i.e. when text is enlarged they move down the page or enlarge as expected (even though they are ‘Fixed in Window’ items. It seems the RPL Action is making the items ‘Absolute’ items)
but, the black line is now the same width as the page (an absolute length) and on the shorter pages there is a lot of needless horizontal scrolling.
Maybe I’m asking too much of HTML. All I want is the black line to stretch across the window 100% (avoiding all the scrolling with an absolute length) AND to work with the RPL Action…
You’re just missing one thing, a specific (and correct) width for the page. The page in your example has a width of 4000px so the black line and white box are stretching to 100% of 4000px.
Also, if the black line stays fixed in window then it won’t stay in the right position relative to the other content on the page.
As you suggested I’ve made the page align left, but kept the black line 100% see: UK.COM
The black line and the white background HTML items work with the RPL Action, i.e. when text is enlarged they move down the page or enlarge as expected (even though they are ‘Fixed in Window’ items. It seems the RPL Action is making the items ‘Absolute’ items)
but, the black line is now the same width as the page (an absolute length) and on the shorter pages there is a lot of needless horizontal scrolling.
Maybe I’m asking too much of HTML. All I want is the black line to stretch across the window 100% (avoiding all the scrolling with an absolute length) AND to work with the RPL Action…
I understand what you’re saying, but I want the white background and black line to stretch across the window.
In the example you created (which is very kind of you), on my big monitor, the grey background appears on the right where the page ends. Some of my pages are not very wide, so even people with small monitors are going to see the grey background colour at the right of the page.
I’ve created my website exactly as I want it (see UK.COM), using CSS layout, but it appears I can’t use the RPL Action without making changes to the design.
I’m sure this is to do with the limitations of HTML rather than the Action, but it is a pain. Any ideas?
Flexible widths like this are not currently supported in the RPL Action. If and when they are I still don’t think you will be able to do what you are hoping because of the limitations in HTML and CSS. The white item and line will always need to be a specific width, or will only ever be the width of the browser when it loads - I think this is mainly happening because HTML and CSS haven’t bee written to accommodate layouts like this. It’s possible this could change with HTML 5 and CSS3 though.
I’d be happy to be corrected here.
Joe
On 9 Aug 2010, at 12:29, Mark wrote:
Hi Joe
I understand what you’re saying, but I want the white background and black line to stretch across the window.
In the example you created (which is very kind of you), on my big monitor, the grey background appears on the right where the page ends. Some of my pages are not very wide, so even people with small monitors are going to see the grey background colour at the right of the page.
I’ve created my website exactly as I want it (see UK.COM), using CSS layout, but it appears I can’t use the RPL Action without making changes to the design.
I’m sure this is to do with the limitations of HTML rather than the Action, but it is a pain. Any ideas?
In a nutshell I’m wanting an item to be 100% horizontal scale ‘Fixed in Window’, with an absolute distance from the top of the page, so that it will move down as text is enlarged.
Might have to rethink my design, or live with the fact that the layout will break… I guess less than 1% of my visitors will ‘zoom text only’…
I’ve had a quick look, but couldn’t find any research to get a handle on: how many people know they can zoom, how many people do zoom and of those, how many people only zoom text.
Can anyone shed any light on this?
Google Analytics doesn’t / can’t record the number of times visitors zoom?
IE throws another wrench in the works, just to add insult to injury. The Large Fonts setting in Windows allows a person to crank the resolution of a (physically) small screen to its physical maximum while keeping the text legible. But it does so by zooming the text only, again throwing off the ratio between graphics and font sizes, and thus destroying an absolutely-positioned layout.
Everything about Web design is a mixture of resigning oneself to the inevitable and defensive design. The inevitable part is that no two browsers will show the same exact site. The defensive part is that you plan for lazy browsers, and set things up so that when (not if) they mess up your vision of the page, they can’t get it too wrong.
An inline layout, or the new RPL Action’s output, will go a long way toward the latter.
I’m wanting an item to be 100% horizontal scale ‘Fixed in Window’, with an absolute distance from the top of the page, so that it will move down as text is enlarged.
But this is a contradiction! If it is ‘Fixed in Window’ then by definition it will not move down with enlarged text.