Disguising XSite Pro's Footprint
This XSite Pro template shows a nifty way to create different "headers" for each page in your XSite Pro Web site. While XSite Pro doesn't allow you to use different headers at the top of each page, you can create a narrow top template with no photos in it and then create a table at the top of each page and place a photo and the page title in the table. This table then blends into the main header and makes it appear as though each page has a unique header (you can think of it as a sub-header).
If I had wanted to extend this illusion even further, I could have put an image or text in the top part of the left hand panel and started the navigation below that. If I had chosen to do this, I probably would have made the elements that make up the page header narrower so the navigation wouldn't be pushed down too far.
This design lends itself to top navigation links, so if you don't mind losing XSitePro's automated navigation, you could create a top navigation bar under the main header and remove both right and left panels.
The tricky part was dealing with the small "gutter" that XSitePro leaves around the table even though the table's border and cellspacing are set to zero and the main panel's padding is set to zero. I dealt with this by incorporating the gutter into the design of the site. I added white borders on the left panel to match the gutter on the main panel. And I also added a white strip to the top and sides of my main header graphic when I created it in Photoshop. To complement the site colours and to set off the white gutter, I added a thick dark blue border to the outside of the page itself. |
|
I used JavaScript to pre-load the images for the sub-headers so they load immediately as you click to each new page.
The navigation has a rollover effect. I used CSS to accomplish this and for other effects, too. Here is the CSS that I used:
<style type="text/css">
TABLE.XSP_OUTLINE
{
HEIGHT: 100%;
WIDTH: 750px;
border: 10px solid #0a1771;
}
td.XSP_LEFT_PANEL_SPC
{
border-top: solid 2px white;
border-left: solid 2px white;
border-right: solid 0px black;
}
td.XSP_LEFT_PANEL
{
border-left: solid 2px white;
border-right: solid 0px black;
border-bottom: solid 2px white;
}
TD.XSP_FOOTER_PANEL
{
border-left: 2px solid white;
border-bottom: 2px solid white;
border-right: 2px solid white;
border-top: 2px solid white;
}
A.NAVBAR_LEFT:hover {background-color: #adb6f5;}
.nav {border: 1px solid #0a1771;
padding: 10px;}
.special {font-size: 14pt; color: #0a1771; margin-left: 10px;}
.copyright {margin-top: 5px;}
</style> |
