How can I centre an HTML/graphic box on the page

Freeway
1

Hello
I am building my first Freeway Pro site.
I inputted the page measurements, then I used the Align box to ‘Centre’ the page in the browser. I then created an HTML box on the page, ready to insert text. But I cant see how to centre the HTML box item on the page, in the same way I centred the page itself. Is there an ‘Align Box’ so that I can align the HTML box in the centre of the page? - I Notice that there is no vertical centre line to indicate when an item is in the centre of the page.
Grateful for any help with this.

cheers.

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

2

Others might be able to chime in with other ways to achieve this, but I would handle this by creating two HTML boxes: one inside the other.

  1. Draw your first box and give it a width of 100%

  2. Double-click inside the box to get a flashing cursor, as if you were going to enter text in the box. But instead of typing, go up to the Insert Menu and choose HTML Item. You’ll see a new HTML box appear inside the first item.

If you look at the sidebar, you’ll see the second box is indented to indicate it sits “inline” inside the first box.

  1. Select the second box and in the Inspector > General Settings, choose Align > Center. Size the box as you like, and you’ll see that it always centers itself!

BTW, this is a fundamental part of creating the popular “box model” type of site.

Hope that helps. Regards,

Derek

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

3

On 8 Feb 2014, 10:49 am, toymaker1 wrote:

Hello
I am building my first Freeway Pro site.
I inputted the page measurements, then I used the Align box to ‘Centre’ the page in the browser. I then created an HTML box on the page, ready to insert text. But I cant see how to centre the HTML box item on the page, in the same way I centred the page itself. Is there an ‘Align Box’ so that I can align the HTML box in the centre of the page? - I Notice that there is no vertical centre line to indicate when an item is in the centre of the page.
Grateful for any help with this.

cheers.

On 8 Feb 2014, 11:33 am, derekzinger wrote:

Others might be able to chime in with other ways to achieve this, but I would handle this by creating two HTML boxes: one inside the other.

  1. Draw your first box and give it a width of 100%

  2. Double-click inside the box to get a flashing cursor, as if you were going to enter text in the box. But instead of typing, go up to the Insert Menu and choose HTML Item. You’ll see a new HTML box appear inside the first item.

If you look at the sidebar, you’ll see the second box is indented to indicate it sits “inline” inside the first box.

  1. Select the second box and in the Inspector > General Settings, choose Align > Center. Size the box as you like, and you’ll see that it always centers itself!

BTW, this is a fundamental part of creating the popular “box model” type of site.

Hope that helps. Regards,

Derek
Thanks Derek.
When you say ’ give it a width of !-00%’, do you mean select ‘fixed’ as the width?

I have done as you suggested, but I might be doing something wrong. - I find that, as you say, the second box always centres itself within the first box, but the problem I have is that I don’t know how to centre the first box (on the page) I know I can measure it carefully etc. to position it on the page, but I was wondering if there is a quick way to centre an item without needing to use measurements I can centre items very easily in other programs I use, e.g. Pixelmator or Photoshop or Illustrator.

Cheers

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

4

If you’re on FW6, you should choose Width > Fixed (%) from the pop-up menu in the Inspector. Then, under Dimensions, make sure you put 100% under Size > Width. Make sure you add it to “Width” and not to “Minimum Width” or “Maximum Width”.

What’s happening here is that the first box is stretching to fill the width of the browser window, and the second box is centered within that.

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

5

Bear in mind that FW is limited by the constraints of HTML code, unlike Pixelmator, Illustrator, Photoshop, etc. Browser windows are not fixed width like a PSD canvas, and so sometimes FW needs a bit of extra info to display what you have in mind.

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

6

Thanks Derek.
I have now managed to centre the box, following your directions. - It does seem a complicated method though.

Cheers.

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

7

Yeah, it’s definitely a little tricky at first, but after a while you get the hang of it. :slight_smile:

Centering content regardless of the browser width is pretty standard these days. I’m sure you’ve noticed that many many sites have a central area of fixed pixel width where the content lives, and which is is centered in the browser window. This is usually (perhaps always) achieved via the “box model” construction. When you’re ready for more information, check out Thomas Kimmich’s screencasts:

http://freewaycast.com/screencasts/view/105-the-freeway-box-in-box-modelpro-version6-chapter1

Regards
Derek

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

8

BTW, I prefer to create box models manually, but the Relative Page Layout action will automate the process to a large degree. You might look into it as well.

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