[Pro] Centered Website

Hey guys,

I’m trying to make a site about 400px high, which is center aligned both vertically and horizontally.

The actual site content will all be contained in a single strip about 400px high and 100% width. Above and below this strip should be a background fill. I need the background colour to be able to stretch and grow with different browser windows, but the main content strip remains at 400px and always remains centered in the browser.

Here is an example of such a site:

www.religionmusic.com

Thanks guys,
Colm


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

I thought I might clarify that I know the religion music site is a flash application, Im not looking to build that. I just want to know how to get my site centered vertically and horinzontally.

So far I have a black background and page alignment on none. Then I made a 1px html box filled with yellow, I set this to 100% width and set it positioned 50% from the top. This is fine, however, I need my yellow html box to be 350px high and when I do that its not right. The reason is, freeway is measuring the top of my html box 50% down the page…I need to the measure the 50% from the centre of my html.

Any way around this?

Cheers,
Colm


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

You can use the inspector panel to centre the page horizontally and down the vertical alignment action for centering vertically.
http://actionsforge.com/projects/view/22-vertical-align

Nathan Garner

http://www.austinwellsdesign.co.uk

FW5 Pro | MacBook Pro | Snow Leopard

On 18 Aug 2010, at 11:17, Colm Tuite wrote:

I thought I might clarify that I know the religion music site is a flash application, Im not looking to build that. I just want to know how to get my site centered vertically and horinzontally.

So far I have a black background and page alignment on none. Then I made a 1px html box filled with yellow, I set this to 100% width and set it positioned 50% from the top. This is fine, however, I need my yellow html box to be 350px high and when I do that its not right. The reason is, freeway is measuring the top of my html box 50% down the page…I need to the measure the 50% from the centre of my html.

Any way around this?

Cheers,
Colm


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

Thanks for the reply,

I downloaded that action, I’m having trouble figuring out what it does though? I applied it my page, but I’m still having trouble.

I need my horizontal alignment to be at none, so I can stretch html boxes to full width.

But how do I get a 350px high html box centered vertically? What sizes do I use for the page background and the html boxes?

Colm


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

Something like this? http://www.deltadesign.co/centred.html

David


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

I have this up and running so far

http://mortgageloanscalculator.net/

However, I tried it on a 10" laptop and the logo is getting chopped off halfway. Also, on some screens set to 1280 x 800 the logo is almost touching the top of the browser window.

Is this unavoidable for a design like this?


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

What screen res is the 10"?

But on a 1280 x 800 screen you shouldn’t have any problems - your content is only 450px high!

David


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

Yeah I made it less than 500 high so even people on 800 x 600 would get the effect of the centered site, but Id say 2/10 people are having problems viewing it.

I don’t understand it at all, is there some other factor that contributes to whether it will work or not?

Have I got it built correctly for a start yeah?

Colm


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

Have I got it built correctly for a start

Not sure without seeing the FW file but there may be things that you can do to help.

1 being setting the initial, max and min scale amounts in File>Document Setup>iPhone - that should take care of the iphone/ipad users.

It looks OK in IE8 - haven’t tried lesser versions but have a look with NetRenderer Moved

I think that you are going to have to make your navigation Tab wider to accommodate the sub menus over single lines rather than being split over 2. And the Services bit seems to have slipped down.

David


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

What should I be setting them values to?

Looks ok in all versions of IE apart from 5.5. That doesnt bother me though, anyone with a browser that old doesn’t deserve to see my site! :slight_smile:

Yeah I have everything looking better now, but I have had to plac the services HTML box out of line with the others in Freeway…so that when I preview it, it looks in line. Why is this?


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

What should I be setting them values to?

That I am not sure but I will experiment with the page I did to see.

D


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

Try setting Viewport Height - Other and then the size of your page (450?)

Initial Scale 50% - that is a guess but once you have done it I will have a look at it on my iPhone/iPad.

David


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

Ok man,

I have changed the settings you suggested. How does she look?


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