Hostbaby
“Scenic Overflow” Design Theme
{back to the main page for Hostbaby}
The "Scenic Overflow" designs were an extention of the original “Overflow” series and were named as such due to the use of the overflow function of CSS, which allows the automatic creation of scrollbars on a CSS block container. It provides some of the benefits of frames without any of the negative impact.
The series is made up of two distinct looks, one appropriately called “bog” and the other called “country road”. What follows are just a small sampling of design layouts that were created around the overall structure. Again, the entire look is controlled by the stylesheet as the designer has no control over the actual XHTML code of the individual pages.
{click on images for a larger view}
 "Scenic Overflow - Bog design sample page for Hostbaby.")
Horizontal navigation allowing for the main photo, which is chosen by the member as they customize their site, to appear on the right or left side of the page.
 "Scenic Overflow - Bog design sample page for Hostbaby.")
Subtle differences can be created off the main color scheme just through different page backgrounds.
 "Scenic Overflow - Bog design sample page for Hostbaby.")
Vertical navigation layouts were also created for each of the designs and color schemes. While the base design is similar to the above, different color scheme, graphics, placement of the band name, and other details create intricately unique looks.
 "Scenic Overflow - Bog design sample page for Hostbaby.")
 "Scenic Overflow - Country Road design sample page for Hostbaby.")
Still building off the same framework, the shift from bog to country road makes for a completely different feel to the site.
 "Scenic Overflow - Country Road design sample page for Hostbaby.")
 "Scenic Overflow - Country Road design sample page for Hostbaby.")
The layouts also allowed for shorter images to be used, or a maximum size that would extend from the top of the header down to the bottom of the "content" box.
 "Scenic Overflow - Country Road design sample page for Hostbaby.")
All graphic, link, and hover effects for navigation are controlled through the cascading stylesheets. No javascript effects or on page graphics are possible.
