< the staples are individual images placed on the page >
The how of this site
I thought it would help if you could take a little peek under the hood and see how the pages on the site are set up. The red dashed lines are the borders of the zones I used to create the layout. There are slider arrows at the top of the zones that you can use to adjust the widths.
The header, navigation and footer are turned off (page properties).
This is the only table added to the page, with an image as the background, it is floated right. It gives me a way to bring attention to this text. |
As you can see, the header is actually just a zone with an image and some text links. I slid the zone in so my text and logo would align better.
For the page background, I used a small cork image and had it tile. I used css code to use the same cork image as the site background (it blends nicely) Another small image is the background of this zone, which repeats to give the lined paper look.
The orange note paper with the right navigation is another bg image, a little css code to place it as the bg of zone 3. I also increased the padding of that zone so the navigation wouldn't be right up against the edge.
The right navigation menu is a custom navigation module. You can use the module and just place it anywhere on the page and it will look and work just as the OL navigation does. Any color changes or css code that would apply to the regular navigation will also apply to the module.
The send a link is an image placed above the navigation module and my 'milk, eggs' is just a little image placed underneath it, as is the donate button (a real working donate button, you can use your own image with PayPal to have custom buttons, the code they provide goes into the PayPal module).
Most of the css code I use is on the css code page. Once you get your page set up you can save it as a template and use it to create new pages, which makes it much easier. You need to activate the advanced design features to turn off the header, footer and navigation and to use css code. That can be done in the Page Manager under the site actions drop down menu.
I hope it helps to see how the pages are arranged and you get some creative ideas of things you can do with your own site.
here is an image of Zip, my dog >
just images of ants : ) 
here is that staple again