Page automatically resizes to length of content?

www.stephenkelman.co.uk/test

I’m going to use cushy cms at some point with this so was wanting the page to automatically change size depending on the amount of copy there (the white box and grey underneath is visible).

Any ideas?

Thanks in advance.

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

To me, this cries out for the ‘box model’ layout method, about which
there are a number of threads in FreewayTalk (just search), including
examples. As I’m only just getting to grips with this myself, I won’t
go into a detailed explanation, but the principal would be to make
your white panel an HTML container (not the graphic box it appears to
be now), click inside and add all the elements you need inline.

You can control positioning by setting individual elements to float
left or right, to keep apart horizontally, and/or to clear (left,
right, both) to divide them vertically. The result is that as each
element expands it moves the following items down so that you get no
overlaps and the whole container (your white panel) expands to
accommodate all this. There is also an Action to produce neat, CSS3
round corners on your HTML ‘white panel’ (thank you Walter), although
this can also be done graphically within Freeway.

Hope that gives you a direction to explore.

Colin.

On 15 May 2009, at 12:04, Stephenk wrote:

www.stephenkelman.co.uk/test

I’m going to use cushy cms at some point with this so was wanting
the page to automatically change size depending on the amount of
copy there (the white box and grey underneath is visible).

Any ideas?

Thanks in advance.

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Stephen,

The best way to achieve this would be to create your white area as HTML and then put the elements within it. That way it will expand according to its content.

To understand how this works more fully look up threads relating to creating a box model or have a look at the tutorial Dan put together.

http://danjasker.blogspot.com/2008/07/fw5-understanding-box-model.html

Hope that helps.
Jon


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mentally break the page down into two areas. The area above the text block can be constructed using relatively positioned CSS boxes. In other words, by creating boxes and positioning them over each other by hand, as you are probably do it already.

The lower area needs to be constructed via inline CSS boxes. Where the two areas meet can be made to appear seamless. Leave the bottom white corner radius off and have the main white box stop just under the image. This is as far down as the normally done CSS stuff will go.

You’ll need to draw out an html box to the correct width, and with a decent height for now, so that is adjoins the box immediately above it, but extends down the page further than will be necessary. This will give you something to select later on.

Click inside this box, and go to Insert > HTML Item, and then repeat. Select the top box you just created and click on the double-headed arrow next to the width measurement. This gets the box to expand sideways. Ignore any dialogue boxes asking about height by cancelling them for now.

Now set the clear for this box to ‘both’. This is the text container. Give it a padding value of 20px or whatever is appropriate, and make it white. Insert your text and click the double headed arrow next to the height measurement. This expands the box to fit the text.

The other box underneath will contain a bottom corner graphic, so make this box expand sideways, set the clear to ‘both’ and click inside it. Insert a graphic item, size to fit, and make it white. Give the lower two corners a radius.

Now select the main box containing the others and make that auto expand for height by using the double headed height arrow as before.

I’m doing this from memory at the moment, so I hope it works!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options