Converting a Fixed-Height Website to Fluid-Height
Written by Lisa | 09.12.09
Here at EMC23, we have recently experienced an upsurge in Joomla website design demand (hurray!) and as a result, we have had the sometimes challenging task of converting existing static html websites into Joomla 1.5 templates.
This process can range from a direct conversion of the static aspect into dynamic (essentially by enabling the CMS to run “inside” the current html design) to a complete overhaul in design and content (usually introducing current best practices such as tableless layouts and fluid design).
For clients who have either a smaller budget, or who perhaps (at the moment) have less inclination towards Joomla in so far as updating their content ie they use their CMS as if it were static, we introduce them slowly to their new system by matching the design of their current site with their new dynamic site. That way, the only visible change is the addition of a backend administrator area.
A recent EMC23 job was to convert The Gourmet Offensive website from a static html design to Joomla 1.5. Although we decided to remove the Flash menu and slideshow, we liked the Flash animation and the overall look, as did the client.
The first task was to replicate the table-based design in a div layout. We decided to retain the fixed width but, in order to remove the necessity of the vertical scroll bar from within the content area, we opted for a fluid height.
This is where I come in. The website's main area is gradiated from dark to light with a rather varied texture, as well as having unique edges separating the side columns from the content area. In order to retain these details, I had to come up with a clever way to create a repeatable background that could seamlessly expand downwards, as module were added to the side columns and as the content length increased. Because the site was designed initially to wrap around the content, I needed also to have the footer blend into the columns at any given length.
I began with the graphics, by taking the content area with the adjoining sides, merging them, and creating a copy which I flipped horizontally to mirror the entire area. I then assigned this jpg to the background of the main wrapper in the template's CSS file and set it to repeat along the y axis. That took care of the first issue of the vertically expanding columns.
I was lucky to have come across Kamil Menhec's website through the Joomla Community Showcase a few days previous, and I recalled his use of transparent pngs so the fixed position footer would appear to stay ontop of the scrolling content. I'd been hesitant to use transparencies due to Internet Explorer issues but I thought I had a good chance of achieving the same affect here if I forgot all about my IE nightmares.
Using a collection of rough brushes in Photoshop, I created a textured and semi-opaque top edge to the footer that would mesh with the side columns at whatever point they met. The result was more than satisfying. Until we checked it in IE6...
Explorer 6 does not handle transparency and the output is displayed as grey which completely defeats the purpose. Fortunately this issue has been dealt with by the Joomla community, along with the web developer community at large.For Joomla we use a handy plugin by JoomlaWorks creaters of the much useddby use Ultimate Content Display called Ultimate PNG Fix
Add your comment
