I thought if I played around with the inset top/bottom/left/right in FW Pro 5 with my screen resolution of 1900x1200, that all would also look in position when I drop the resolution down to 1024x768 but unfortunately everything was out of place.
Just wondering, do I actually have to develop using my 1024x768 resolution?
All my items seem to be all over the place - what am I doing wrong?
Here’s a quick, simple and ugly example of a fully liquid layout I
did for another FW user a while ago that you can pick apart. Along
with the other responses you’ve received you should be able to glean
how this is accomplished.
This is a FW 4 file and I make no guarantees that it’ll render OK in
version 5. I made it and forgot it.
I just want to say that it is helpful always when working in percentages to ask the question “percentage of what?”. Widths not heights should be your focus, and you still need an optimum size to start from – most flexible sites still break down under extreme condition. Padding will bother you as well, as px and % mix a little unpredictably. Percentage padding is a percent of the box width, not the page.
On Tue, May 20, 2008 at 8:28 AM, Tonsils wrote:
I thought if I played around with the inset top/bottom/left/right in FW Pro 5 with my screen resolution of 1900x1200, that all would also look in position when I drop the resolution down to 1024x768 but unfortunately everything was out of place.
Just wondering, do I actually have to develop using my 1024x768 resolution?
All my items seem to be all over the place - what am I doing wrong?
What I have found and having difficulty with, is that now that I have set my Page alignment to “None” and have set a width of 778px and height 900px for the page, manupulating my both html and graphic items using their dimension settings is proving to be quite difficult, i.e left/right insets are on and I am actually disabling width component.
Pls let me kknow if this is not correct?
I have also found that I need to make sure that positioning all my HTML objects fall within my page width dimension as things seem to be all over the place.
Are there any tutorials/doco/websites/examples that explain how to assist me in this process as I’m having a little trouble.
Sometime around 20/5/08 (at 21:01 -0400) Tonsils said:
Page alignment to “None” and have set a width of 778px and height
900px for the page, manupulating my both html and graphic items
using their dimension settings is proving to be quite difficult, i.e
left/right insets are on and I am actually disabling width component.
That’s fine. Be aware that graphics will not be ‘stretchy’ in the
output; it is a rare condition indeed that would require that! So
you’re just using left/right dimension settings to define the width
of those graphics.
With layered HTML boxes, those should stretch neatly as you resize
the page in the browser. Is this not happening?
Just drag items around and scale them by dragging their handles as
you make your layout. It shouldn’t matter whether their dimensions
settings are left/right oriented, left/width, or width/right.
I have also found that I need to make sure that positioning all my
HTML objects fall within my page width dimension as things seem to
be all over the place.
It is normal to make a page layout using items that lie within the
page area…
I probably don’t understand what’s happening in your layout. If you
like, you could send me a sample Freeway document and I’ll see if I
can help more directly. My contact email address should be listed in
my forum ID page, and if you happen to read this list by email then
you’ll see it clearly anyway.
Sometime around 21/5/08 (at 10:50 -0400) Tonsils said:
Only think thought that I have changed, since I want the web site to
also fit nicely in a 1024x768 res is to left inset t to 0%
To fit a page into a 1024px-width display your page width should be less than 1024 pixels. Don’t forget to account for the width of
window borders in non-Mac browsers) and also scrollbars if your
content ever drops below around the 500-600 pixel level. It is
probably worth setting your page width at around the 950px or so size.
Keep in mind that dogs such as IE6 do not understand these attributes and ignores them. However most modern browsers do, though I’m not certain if IE7 does.
Todd
On May 21, 2008, at 6:48 AM, David Owen wrote:
Of course you can style using min-width or max-width to help control extreme distortion
same with min-height or max-height
On 21 May 2008, at 01:10, Ernie Simpson wrote:
most flexible sites still break down under extreme condition.
Argh… There’s always someone wanting to spoil the party.
That’s IE6/7 …not you Todd.
On 21 May 2008, at 16:12, Todd wrote:
Keep in mind that dogs such as IE6 do not understand these attributes and ignores them. However most modern browsers do, though I’m not certain if IE7 does.
Todd
David Owen
Freeway Friendly Web hosting and Domains ::
(Test Drive a web hosting account for Free)
I checked IE7 and the good news is that it appears to recognize the
attributes. A small victory.
Todd
On May 21, 2008, at 10:45 AM, David Owen wrote:
Argh… There’s always someone wanting to spoil the party.
That’s IE6/7 …not you Todd.
On 21 May 2008, at 16:12, Todd wrote:
Keep in mind that dogs such as IE6 do not understand these
attributes and ignores them. However most modern browsers do,
though I’m not certain if IE7 does.
You’ll find that padding is/will be your worst enemy in a flexible width page. I had hoped to have a simple example up soon (especially now that FWY5 lets me inline divs directly into the PageDiv) but I’m afraid circumstances are conspiring against me just now.
On Wed, May 21, 2008 at 8:08 AM, Tonsils wrote:
No worries Keith - i guess I took my width based on The Big Erns suggestion - second response this thread from the top.
So having a alignment of “None”, is there a rule of thumb when choosing the page width of your page?
I will change it to 950px and see what it looks like in 1024x768 res.
Looking forward to your simple example - how is this actually handled at the moment in FW5, i.e inline divs within PageDivs?
Just further on my Page Dimension issues, how is it possible to achieve something similar to http://slashdot.org/ when it comes to resizing your browser - is it all to do with percentages within FW5 b/c this is what I would like to achieve with my website that I am developing?
With your example (Liquid.zip) - I assume all your items there are HTML items and not Graphic items. Now will this type of liquid design still work for a page that uses graphic items, which is what my wen site consists of?
You can make a liquid graphic design, but you have to be crafty about it. Images cannot flex by themselves, but you do have two tricks you can use. One is to split your image between a part which can grow (that perhaps has a pattern that doesn’t show stretching) and the part or parts that cannot stand any of that (a person’s face or other literal image). By slicing up the image, and setting part of it as the background of an HTML element, and then floating the literal part(s) aligned with the background, you can create the illusion that the photograph is stretching without distortion.
Another much simpler trick is to make a very large image that has one area of interest and then other parts that are less important. Imagine if you had a billboard-shaped photo, with the person’s face in the top right part and a crowd scene spilling off to the left. Now you draw an HTML box, and set the photograph as the background of that box. By setting the photo to not repeat, and to “pin” to the top-right corner of the HTML box, you can now stretch the HTML box, and more of the crowd scene will reveal. The image won’t actually stretch, but it will continue to fill the space. You can also do this with a centered image.
Yes, all the items are html although there is one, possibly two tiled images applied as CSS backgrounds. Yes, graphic items can be used but as Walter has explained these behave differently and will require additional planning. It’s definitely possible to create the illusion of stretchy graphics, both vertically and horizontally, using CSS but it does take work to understand how to break apart your image and where to apply the pieces to achieve the effect you want.
Slightly off-topic, there is a CSS technique that allows graphics to be scaled using relative size units (em), not pixels. Do a search for CSS scaling images or similar, you’ll find plenty of tutorials. Once you get your ahead around liquid layouts this sort of thing might make more sense as it requires putting your pointy CSS hat on.
Todd
On May 22, 2008, at 12:37 AM, Tonsils wrote:
Todd,
With your example (Liquid.zip) - I assume all your items there are HTML items and not Graphic items. Now will this type of liquid design still work for a page that uses graphic items, which is what my wen site consists of?
Just one question though - I am currently looking at your Liquid example from above, just trying to achieve the same as you but unsure of one thing - how do you create a sub page, i.e you have:
-Home (master1)
-----+wrapper <<=== how is this achieved?
-------+header <<=== again how to u create sub page
Probably a dumb question but can’t seem to acheve same result on Page panel on left hand side.
