Vertical & Horizontal Centering in NetObjects Fusion
Description:
This gets asked a lot in the NOF newsgroups. "How do I center my page horizontally and vertically?" In fact, this poses a challenge for most web designers because there are no valid Vertical Center tags in HTML or CSS. So we have to trick browsers into doing what we want.
At first we tried doing this with tables nested inside tables. This can give the illusion of padding on the top, bottom and sides of pages but it fails the litmus test for true vertical & horizontal alignment.
Next, we created a liquid layout on a zero margins border. Then by adding one absolutely positioned division with a little CSS code inside the middle table cell, we got a box that appears Horiz/Vert centered on the page. Not ideal for an entire web site but it could be useful as an intro page, business card or form, View Sample
Tutorial:
- Create a new page with zero margins.
- Place a text box on the page.
- Add a 3 x 3 table to the text box.
- Stretch the text box to the width of your page layout.
- Set text box properties to "Size layout to text" and "Contents wrap to browser width."
- Set table properties height and width to 100%.
- Set cell padding, cell spacing and borders to 0.
- Deselect "Generate Non-Breaking Spaces"
- Double click inside the middle table cell as if to type text.
- Hit Ctrl+T to bring up an HTML insertion box.
- Copy the following code and paste it into the the HTML box.
<div style="border: solid 2px #99CCFF; background-color: #FFCC99; height: 50%; width: 50%; position: absolute; left: 25%; top: 25%; color: #660000; overflow: auto; padding:10px;">
<h1>Your Heading goes here</h1>
Normal text goes here. <br><br>
Set *overflow* to auto in case content exceeds the height or width of user's viewport. <br><br>
This is dummy text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sagittis. Nulla dictum, dui vitae egestas estibulum, tellus eros tincidunt lorem, ac commodo arcu nisi ac libero. Suspendisse interdum laoreet libero. Etiam auctor neque at libero. The end.
</div>
- For best results use the same or matching color settings for page background, text box and table background.
- Finally, adjust the Hexidecimal # Color Codes inside your division box to match your site's color scheme. Or use this handy Color Picker Tool to help with color selection.
That's all there is to it. We hope you found this tutorial fun and helpful.
|
