[Pro] items overlap when resizing browser window

ok sorry, was frustrated.
Can`t post a sample right now, but basically i have 3 html objects besides each other and they hold a left, middle and right column.

The middle one has text, the left one contains my site links, and the right one pictures. I would very much like my pages to “shrink” gracefully, like for instance appleinsider`s site does, where when shrinking a page in a browser, the right column "eats away at the text middle column, but does not move on top of the left column.

thanks…


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

Sometime around 26/5/10 (at 18:51 -0400) Odd Hˆ*kon Byberg said:

ok sorry, was frustrated.

Dude,

You post a question in the morning and claim that
the forum has no patience for newcomers by the
end of the same day - and then go on to say
“Seldom have I seen this level of ignorance and
arrogance in a software forum”?

I have to say that seldom have I seen such
impatience anywhere, on-line or off-line. This
forum is possibly the MOST helpful and
newbie-friendly tech forum I’ve seen in 20 years
of interacting on forums. (Yeah, I started on
bulletin boards and Compuserve.)

If a response to a question isn’t posted within a
day (i.e. 24 hours) the reason is generally going
to be one of two things: either the people with
answers happen to be busy and haven’t seen the
post (we have lives, remember), or the question
wasn’t clear enough. Oh, a third option: it is
also possible for a post to be missed. This is
real life, remember. Ask again, rephrase the
question, post a link to your efforts, and be
patient. We’re all users, and we all were
beginners once.

Okay, it is time for me to stop being a nag and
see if I can offer some practical help.

Setting up a page and HTML items to flex is quite
simple, as I think you’ve already found. You
don’t have to group or nest things, just set the
left item to be positioned relative to the left
(the default), the middle item to be positioned
relative to both the left and the right, and the
right item to be positioned relative to the
right. This is done using the Dimensions panel of
the Inspector. Again, as you have already done, I
think.

The AppleInsider example you mention uses two
main boxes (to use Freeway parlance), with the
left-hand one having another container placed
inline. The text that is also inside this box
flows around the inserted item as the enclosing
box grows wider or narrower. Separately, the
right-hand item is set to move relative to the
browser window’s right edge.

To recreate this in Freeway…

Draw an HTML box on the left and another box
(graphic or HTML, doesn’t matter) on the right.

Click inside the left-hand HTML box and choose
Insert > HTML item. Resize this new 100px-square
box, use the Inspector to set it to Float: Left,
and then give it the content you want.

Add your text to the enclosing (left-hand) HTML box.

Set the left-hand box’s dimensions so it is
positioned relative to the left and right, so it
will grow and shrink with the browser window.

Set the right-hand box so it is positioned
relative to the right of the page (and hence the
browser window).

That’s it for the main behaviour; your page
elements will stretch and shrink in the manner
you described. However, the page WILL shrink down
to a ridiculous width if the visitor plays with
their browser window width. Frankly, this is
generally not a problem.

But if it is you can set a minimum width for any
div in a web page. Okay, Internet Explorer 6
won’t obey, but that’s life. Setting a minimum
width property for an object isn’t something
that’s offered as part of Freeway’s regular
feature set, but it can be added quite easily.
Here’s one way to do this:

Copy the following text:

<style type="text/css">
<!--
#PageDiv { min-width:500px }
-->
</style>

(NOTE: if you see ~ characters surrounding the
above code ignore them, that’s just to render the
code properly in the forum’s web page view.)

Choose Page > HTML Markup, and paste this into
the "Before " part of this window.

This will set the PageDiv (Freeway’s enclosing
page-level div that surrounds everything) to have
a minimum width of 500 pixels. Adjust this value
as you require. There are hacks to make this work
in IE6, but they’re a little more fiddly and,
frankly, I don’t care enough about that browser
to bother. :slight_smile:

I hope this helps. Please note that this is
normal Freewaytalk stuff; we ARE a friendly
bunch. Even when we’ve been insulted. So,
welcome. Seriously.

k


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