[Pro] Image wider than text, all inline

I’m stumped by CSS. I’d like to have what I think should be an all inline box, so that text can enlarge and push an image down if necessary. However, I’d like the text column width (I think there’s no such thing in CSS?) to be more narrow than the image…

A Heading

Some text, that i want

to have wrap more or

less like this. Then, an

IMAGE THAT WILL BE WIDER THAN THE TEXT

Then, some more text

that will be the width

of the first text, and less

wide than the image.

I tried to set up an HTML item, with other items in it. First I placed a graphic item to make a heading in a particular font. (I know, not good practice but I’m an old typestyling man from way back.) Then I typed a return and then drew another HTML item. Put text in it. clicked in “parent” item, typed return, drew another HTML item and put a graphic item in that. Added another HTML item in parent box, more text.

If I drag down the bottom of the first text item, the HTML items (image and text) FW pushes down the others. But in Firefox, the image won’t move down. I can make the text size large enough to run into (over or behind) the image.

My source code shows nested DIVs, with relative positions and overflows visible. But the image behaves as if it’s Absolute. Any pointers to how to get the image to react to enlarging text? I’m at a loss!


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

On 29 Aug 2009, at 08:35, Bucky Edgett wrote:

My source code shows nested DIVs, with relative positions and
overflows visible. But the image behaves as if it’s Absolute. Any
pointers to how to get the image to react to enlarging text? I’m at
a loss!

I’m not sure about this, but I suspect that the problem is that, after
hitting Return in the parent box, you drew another HTML item. I
think instead that you should have gone to the menu: Insert>HTML item.
Also, when Freeway asked you if you wanted to set the inserted item to
have undefined height, you should have said yes.

The way I do it (which may not be the best or correct way) is to draw
the first ‘container’ box, then click in it so the cursor’s flashing
in there, then go Insert>HTML item, as many times as I think I need,
say half a dozen. They will all be in a vertical line up against the
left edge of the container. You can then float them left and right and
adjust their position and text inset using Margin and Padding. Dan’s
tutorial is good:

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

best wishes,

Paul Bradforth

http://www.paulbradforth.com


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

Thank you, Paul.

Also, when Freeway asked you if you wanted to set the inserted item to have undefined height, you should have said yes.

Hah! FW never asked me. I’ve just tried your method using the Insert Menu, and FW just blithely draws some square items, stacked on the left as expected.

But with your hints, I’ve solved the problem! I have to deselect the Height attribute for my HTML children items. (Clicking on the icon for height in the Dimensions submenu in the General Tab of the Inspector Palette.) That even makes my first HTML child’s box display red handles top and bottom. Very good!

Now I’ll have to mess with the number of paragraph returns above and below my Graphic child item, which I just managed to delete. But you’ve sloved the immediate problem.

I also have to wait until the wee hours, when my downloading can be free, to get the recommended tutorial. Looking forward to that! Making sense of how CSS works is akin to deciphering Cretan Linear B. Postscript was easy compared to this!

Thanks again!


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

Oh, and as an afterthought, I’m not sure this has anything to do with drawing versus inserting. The immediate answer was merely to turn off the defined height attribute of my first text child. Simple, if one knows one can do it!

Of course this might cause all kinds of other havoc in my final output. A little knowledge is a dangerous thing.


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

On 29 Aug 2009, at 17:21, Bucky Edgett wrote:

But with your hints, I’ve solved the problem! I have to deselect the
Height attribute for my HTML children items. (Clicking on the icon
for height in the Dimensions submenu in the General Tab of the
Inspector Palette.) That even makes my first HTML child’s box
display red handles top and bottom. Very good!

Deselecting the height attribute is the same as saying ‘Yes’ when
Freeway asks you, except that it didn’t :slight_smile:

Now I’ll have to mess with the number of paragraph returns above and
below my Graphic child item, which I just managed to delete. But
you’ve sloved the immediate problem.

Don’t mess with returns, adjust margin and padding in the Inspector
instead. If you apply some margin-bottom to an item, it will push down
the one below it, for example.

best wishes,

Paul Bradforth

http://www.paulbradforth.com


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

Don’t mess with returns, adjust margin and padding in the Inspector
instead. If you apply some margin-bottom to an item, it will push down
the one below it, for example.

Ah, interesting. But that would give a fixed depth between items. To be scrupulously obsessed about it, I’d like the distance between text/image/text to increase or decrease with the text size. As if it were leading.

A fine point, to be sure. But in general, I’ll keep margins in mind. I can see their great utility for enforcing many kinds of layout decisions.


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

On 29 Aug 2009, at 21:12, Bucky Edgett wrote:

Ah, interesting. But that would give a fixed depth between items. To
be scrupulously obsessed about it, I’d like the distance between
text/image/text to increase or decrease with the text size. As if it
were leading.

You could use ems as units, but I’m not sure Freeway will do that;
perhaps someone else does?

best wishes,

Paul Bradforth

http://www.paulbradforth.com


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

Ah, details, details. Of course all this confusion is caused by my basic ignorance of CSS layout. Unfortunately I’m pretty much a learn-only-when-absolutely-necessary kind of person.

But it’s starting to make some sense.


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