Center in Browser Question

Got Fusion 8 questions? Discuss them here.
colinc
Posts: 4
Joined: Thu Dec 06, 2007 7:21 am

Center in Browser Question

Postby colinc » Thu Dec 06, 2007 12:16 pm

Hi,

There's probably a very simple answer to this question, but I can't seem to find it.

With the advent of wide screen monitors and TFT screens with largely different resolutions, in common with many other simple web sites, I want a web site that is created at a fixed pixel width and which is centered in the middle of the browser screen. This is very simple to do by checking the "Center in Browser" check box in the layout properties box.

However, many websites that I look at have a background which is a different color to the web page, in other words, the spare pixels either side of the page are a different color to the web page. If I attempt to change the background color in Fusion, it changes the color of the web page AND the spare pixels area at either side.

Is there a simple way to make those spare pixels a different color to the web page?

Thanks,

Colin

User avatar
admin
Site Admin
Posts: 1303
Joined: Mon Oct 24, 2005 2:07 am
Location: Stuart, FL
Contact:

Re: Center in Browser Question

Postby admin » Thu Dec 06, 2007 2:06 pm

Hi,

There's probably a very simple answer to this question, but I can't seem to find it.

With the advent of wide screen monitors and TFT screens with largely different resolutions, in common with many other simple web sites, I want a web site that is created at a fixed pixel width and which is centered in the middle of the browser screen. This is very simple to do by checking the "Center in Browser" check box in the layout properties box.

However, many websites that I look at have a background which is a different color to the web page, in other words, the spare pixels either side of the page are a different color to the web page. If I attempt to change the background color in Fusion, it changes the color of the web page AND the spare pixels area at either side.

Is there a simple way to make those spare pixels a different color to the web page?

Thanks,

Colin
You mean like the main site at BeyondFusion?

The site uses a top and a bottom master border.

Both of those and the layout contents are contained in text boxes within a layout region embedded in each one.

The text boxes, in our case, have borders. The top master border text box has top and side borders, the bottom master border has side and bottom borders and the Layout text box has just side borders.

The individual Layout Region background colors are all set to white. The Layout itself has the background you see surrounding the centered content.

This is because the site was created originally in Fusion 7.5. In Fusion 10, you can skip the text boxes and apply borders to the layout regions using CSS.

Admin Chuck
Last edited by admin on Fri Dec 07, 2007 9:39 am, edited 1 time in total.

colinc
Posts: 4
Joined: Thu Dec 06, 2007 7:21 am

Re: Center in Browser Question

Postby colinc » Thu Dec 06, 2007 4:56 pm


You mean like the main site at BeyondFusion?

The site uses a top and a bottom master border.

Both of those and the layout contents are contained in text boxes with a layout region embedded in each one.

The text boxes, in our case, have borders. The top master border text box has top and side borders, the bottom master border has side and bottom borders and the Layout text box has just side borders.

The individual Layout Region background colors are all set to white. The Layout itself has the background you see surrounding the centered content.

This is because the site was created originally in Fusion 7.5. In Fusion 10, you can skip the text boxes and apply borders to the layout regions using CSS.

Admin Chuck
Yes, exactly like the main site at Beyond Fusion.

I was hoping it was going to be simple but it seems a little like it's going to levels that I wasn't aware I could go to .... borders within borders within text boxes.

Thanks for the reply ... do you know of a tutorial that can explain the intricacies of doing this sort of thing, by any chance?

Colin

User avatar
admin
Site Admin
Posts: 1303
Joined: Mon Oct 24, 2005 2:07 am
Location: Stuart, FL
Contact:

Re: Center in Browser Question

Postby admin » Thu Dec 06, 2007 6:10 pm


You mean like the main site at BeyondFusion?

The site uses a top and a bottom master border.

Both of those and the layout contents are contained in text boxes with a layout region embedded in each one.

The text boxes, in our case, have borders. The top master border text box has top and side borders, the bottom master border has side and bottom borders and the Layout text box has just side borders.

The individual Layout Region background colors are all set to white. The Layout itself has the background you see surrounding the centered content.

This is because the site was created originally in Fusion 7.5. In Fusion 10, you can skip the text boxes and apply borders to the layout regions using CSS.

Admin Chuck
Yes, exactly like the main site at Beyond Fusion.

I was hoping it was going to be simple but it seems a little like it's going to levels that I wasn't aware I could go to .... borders within borders within text boxes.

Thanks for the reply ... do you know of a tutorial that can explain the intricacies of doing this sort of thing, by any chance?

Colin
Well... I pretty much just gave you one. :wink:

Do you want to have the same arrangement? Top and bottom master borders?

Do you want an outline or just a different color background for the content area?

It's not a complex as you may think at first blush.

Chuck

colinc
Posts: 4
Joined: Thu Dec 06, 2007 7:21 am

Postby colinc » Fri Dec 07, 2007 6:10 am

Thanks for your time, Chuck

>>The site uses a top and a bottom master border. Both of those and the layout contents are contained in text boxes with a layout region embedded in each one.<<

This is the bit that confuses me. I was under the impression that:

a) You create a page with master borders as required.
b) You put text boxes or graphics inside those master borders or in the layout area.

In other words, the page is first created with a layout and master borders and text and graphics are laid on to that framework.

But you seem to be saying that master borders, layout contents and embedded layout regions exist INSIDE text boxes? How do you create a master border and embedded layer regions inside text boxes? And how do you create a text box with no layout to put it into.

All I really want to do is create an 800 pixels wide white page which centers in any browser and have a different color for the screen area either side of the web page, so that the web page stands out from the unused screen area. I've worked out how to put lines / graphics down the side of the web page, it's just the color change that is confusing me.

I think I must be missing something fundamental here.

Thanks,

Colin

User avatar
admin
Site Admin
Posts: 1303
Joined: Mon Oct 24, 2005 2:07 am
Location: Stuart, FL
Contact:

Postby admin » Fri Dec 07, 2007 9:36 am

Thanks for your time, Chuck

>>The site uses a top and a bottom master border. Both of those and the layout contents are contained in text boxes with a layout region embedded in each one.<<

This is the bit that confuses me. I was under the impression that:

a) You create a page with master borders as required.
b) You put text boxes or graphics inside those master borders or in the layout area.

In other words, the page is first created with a layout and master borders and text and graphics are laid on to that framework.

But you seem to be saying that master borders, layout contents and embedded layout regions exist INSIDE text boxes? How do you create a master border and embedded layer regions inside text boxes? And how do you create a text box with no layout to put it into.

All I really want to do is create an 800 pixels wide white page which centers in any browser and have a different color for the screen area either side of the web page, so that the web page stands out from the unused screen area. I've worked out how to put lines / graphics down the side of the web page, it's just the color change that is confusing me.

I think I must be missing something fundamental here.

Thanks,

Colin
I didn't say to place the master borders in text boxes. I said to place the contents in a layout region in a text box.

Make sure you have CSS turned on in Site Settings.

You create your page with a top and bottom master border with the layout in the center.

Set the layout background color to whatever you want the overall background color to be (you can also use a background image, if you wish).

Place a text box in each of them and make the text boxes the full width of the area you want in white. (If you're designing for 800x600 displays without horizontal-scrolling, make your page 775px wide.)

Change the background color of the text boxes to white.

Place a Layout Region inside of each text box (full width) and stretch it to whatever height you want. You can leave the background color of the Layout Region "automatic" and the text box background color will show through. Or you can set it to white also. Either way works.

Personally, I add 4px of padding to the text boxes (before inserting the Layout Regions) to keep the Layout Region edges from being right on top of the text box edges. That way you can easily grab the handles of the Layout Region to resize it.

Then place your content inside the Layout Regions.

Chuck

colinc
Posts: 4
Joined: Thu Dec 06, 2007 7:21 am

Postby colinc » Fri Dec 07, 2007 11:21 am

Ah, now I see.

I humbly admit to never having discovered Layout Regions before.

Many thanks for your time and knowledge.

Colin

NJG252
Posts: 20
Joined: Thu Oct 18, 2007 11:50 am
Location: Pennsylvania
Contact:

Just chiming in here...

Postby NJG252 » Sat Jan 05, 2008 9:43 am

I thank you as well. You just saved me a whole new post ! This explains it all.

And...if anyone's looking for a good simple to understand HTML & you type guide .....I ran across "HTML, Your visual blueprint for designing effective Web pages" ISBN # 0 7645 3471 8 (most book searches respond to ISBN). It had step by step guidance and some pictures to trigger the light in my brain to come on !! Excellent quick look up guide I keep nearby years after the classes !!
Going from bookkeeping to website building & computer repair - I've done a lot of classes and reading !! LOL

Nanci G.


Return to “Fusion 8”

Who is online

Users browsing this forum: No registered users and 1 guest

cron