[Pro] Text/Graphics Alignment

Freeway
1

I’ve run into this problem before, but I’ve yet to fix it. In this page, I have the Q&A contained in a single text box. I’ve included the paw prints as separate graphics, but to make them align properly I have to move them way out of position in FW to make them show up where I wan after uploading. Also, to make the text flow better and increased size, I’ve applied RPL to this page.

Is this just the way it is in FW, or am I doing something in my creation of the page incorrectly?

Thanks, everyone!

Doty

http://invertministries.com/faq.html

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

2

Wow, that’s kinda dangerous layout-wise. Try zooming the page with Zoom Text Only selected in the View menu. Your text is going to run away from the paw prints. I would do this another way entirely. Make one paragraph style for the questions, and another paragraph style for the answers. Select all of the text and choose Remove Styles from the Styles palette. Then go through the text and apply your styles. Go back into the Edit Styles dialog and select your question style. Set the paw print as the background image in that style. Be sure you set it to not repeat, and align left and center vertically. Use the Extended dialog to add some padding, so the paw doesn’t slip behind the type. Try this:

padding: 8px 0 8px 36px

Then in your answer style, use a bunch of left padding to simulate the indent. About 80px ought to do it.

Here’s how it looks hand-coded with CSS.

http://scripty.walterdavisstudio.com/puppies.html

You’ll need to view source and reverse-engineer the styles a bit to get them into Freeway, but once you do you’ll have a clean layout without a bunch of extra markup to hold the images. (Fragile markup that won’t look the same in two different browsers, I might add.)

Walter

On Nov 21, 2012, at 5:47 PM, Doty wrote:

I’ve run into this problem before, but I’ve yet to fix it. In this page, I have the Q&A contained in a single text box. I’ve included the paw prints as separate graphics, but to make them align properly I have to move them way out of position in FW to make them show up where I wan after uploading. Also, to make the text flow better and increased size, I’ve applied RPL to this page.

Is this just the way it is in FW, or am I doing something in my creation of the page incorrectly?

Thanks, everyone!

Doty

http://invertministries.com/faq.html

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

3

I hear you Walter. I did the text zoom in the browser before I posted this question. I had a feeling I was wading into dangerous territory. I’m glad there is still a way to do it that is smarter and will play well with browsers. It will also be easier to update.

At the moment, I have two paragraph styles as you suggested. But I have both contained in the same html box. Is that okay? I tried doing it with separate html boxes, but vertical alignment was a real pain that way.

I’m not sure how to “set the paw print as the background image” in my question style. I went into Edit > Styles. If I click the “select” button at the bottom center of that window I see a toggle for background image. But when I click it nothing seems to happen. I set the toggle to “on” and then checked for a place to add the background image, but I’m not seeing it. Can you tell me where to look?

Thanks for your time, Walter.

Doty

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

4

Okay, after digging deeper into the styles menu than ever before, I have found the place to add the background image (under “character”). I see “align” as a paragraph style.

However, I still am not seeing how to “center vertically”

Doty

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

5

Walter,

Take a look at the page now: http://invertministries.com/faq.html

I never did find center vertically, but it’s not looking too bad. Thanks for your help! Let me know if you think I should tweak it further.

Doty

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

6

That’s perfect! Nicely done!

Walter

On Nov 21, 2012, at 11:43 PM, Doty wrote:

Walter,

Take a look at the page now: http://invertministries.com/faq.html

I never did find center vertically, but it’s not looking too bad. Thanks for your help! Let me know if you think I should tweak it further.

Doty

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

7

Thanks Walt! Couldn’t have done it without you!

I’m concerned about this page also: http://invertministries.com/aboutus.html

Eventually, I will have pics for each of the dogs, so four. If I have more, I’ll probably contain them in a grouped lightbox. I’m wondering if I should use a table layout? I’m so used to CSS I’m not familiar with table.

When I’m done, I need to text to stay with the appropriate dog! At the moment I’m waiting for pics from my client, but I could make adjustments to the layout now.

Thanks so much for the help!

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

8

Try putting the dogs in as inline images, at the beginning of the line of the headline. Then set them to align-right, and the text will wrap around them. But given the way you have these two aligned at the moment, though, you may just want to use a table layout for this. Just set the border to none, and you should be good.

Walter

On Nov 22, 2012, at 12:36 PM, Doty wrote:

Thanks Walt! Couldn’t have done it without you!

I’m concerned about this page also: http://invertministries.com/aboutus.html

Eventually, I will have pics for each of the dogs, so four. If I have more, I’ll probably contain them in a grouped lightbox. I’m wondering if I should use a table layout? I’m so used to CSS I’m not familiar with table.

When I’m done, I need to text to stay with the appropriate dog! At the moment I’m waiting for pics from my client, but I could make adjustments to the layout now.

Thanks so much for the help!

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

9

Walter,

I decided to dig into the FW templates to see if I could find an example of what I want to do. “Charcoal” has images with text next to them. If you increase the size of the text, the images stay oriented with the appropriate paragraph.

Is the “Charcoal” template an example of inline layout? I think I’ve done inline before, but I’m not sure I knew to call it that!

Thanks,

Doty

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

10

There is also the Image Captions action that you could use to ‘add captions’ that would stay with your images

http://www.actionsforge.com/projects/view/58-image-captions

D

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