Centered Layout on a Two-toned Background Image in Net Objects Fusion
Description:
This page and its background image are aligned to center in all browsers with displays over 910 pixels wide. The background image uses a contrast color in the left navigation area that extends the full length of the page.
This method uses a 910 pixel wide background image and a total page width of 910 pixels. Feel free to adjust sizes to suit your needs, but for this to work your total page width must equal the width of your background image in pixels.
Tutorial:
- Open a new blank site in Net Objects Fusion
- In Site View, name your page Centered.html and set Master Border to Default Master Border.
- In Page Design view, select Tools menu, Options, Current Site and use the following settings:
- For this tutorial, I made a single background image in Photoshop™ that is 910 pixels wide by 20 pixels in height.
- Since my navigation area is 250 pixels, that portion of my background image is in a contrasting Blue/Black gradient fill. This leaves 660 pixels for my page layout area and I chose to make that white. Use whichever colors you like. Use the Hexadecimal Color Chart or Web Color Assist Tool to help you with color choices.
- In Style view, apply this background image to your site.
- Click inside your master border area and on the properties box, set your left margin to 250 pixels and right margin to 0. Top and bottom margins can be whatever you choose.
- Click the HTML button on the Master Border Properties box above and insert the following code in the Beginning of Body tab: <div align="center"> and this code in the End of Body tab: </div> . Click OK.
- Place a 250 pixel wide image in the top left corner of your page. This can be your logo or a clearpixel or transparent gif placeholder.
- Place a 660 pixel wide image in the top master border (above your page content area.) This can be your banner image or a transparent gif. These placeholders help keep your page margins constant while you work on the rest of your page.
- In Page Design view, select Text from the toolbar > Edit Text Styles/Manage Text Styles/Manage Styles (depending on which NOF version you are using). This brings up a properties box for editing CSS styles. Select Body, Edit.
 |
- On the Background tab, set your page background color to something other than white. This color shows up on either side of your centered web page. I used #4B5D71 but you can choose any color you wish. Use this Hex Color Chart or Web Color Assist Tool to help you with color choices.
- Set background image to Automatic. Repeat: Vertical. Image Position Horizontal: Center; Vertical: Top. This allows your background image to tile down your page but not across the page on wider displays. Click OK and Close.
- Finally, use images or text within tables or layout regions in your left navigation area. Text (even pixel perfect text) can be scaled up or down in most browsers which could throw your page off center.
That's all there is to it. We hope you found this tutorial informative and helpful. If you like the layout, be sure to save it and Export as Template
 Printer Friendly Version
|
