Build Table-less CSS Layouts with eZ Publish
Monday 25 April 2005 1:46:00 am
To demonstrate how we can change the overall layout simply by altering the CSS files, let's float the toolbars in a different way. Here's the result of this section's experimentation:
We could start with the header, which is divided into two parts: the logo on the left, and the toolbar with search box on the right.
To float the header to the right, we need to add the following CSS fragment to site-colors.css. You can add these at the bottom of the CSS file.
div#header-design
{
float: right;
}Then we float the top toolbar to the left to change the element's position. This is done by adding the following CSS codes to the site-colors.css file.
div#toolbar-top
{
float: left;
}
div#toolbar-top ul
{
float: left;
}Now, that was simple. We've already customized the layout in a way that would have been impossible if the HTML had been tagged with a table structure that specified the layout.
Let's continue with the right menu, which contains the latest news toolbar, and move it to the left. This is done in a similar way as the previous example: we add the CSS code shown below to site-colors.css. Note that we need to add some more padding on the left to create a space between the toolbar and the edge of the main layout.
div#rightmenu
{
float: left;
}
div#rightmenu-design
{
padding-left: 10px;
}You can see that the main content appears under the right menu. This occurs because the browser breaks the flow, as there's not enough room. To avoid breaking the design, we need to change the margins of the main content. If we add a 16em margin on the left, and 10px on the right, we have a CSS setting that works. For that reason, we need to change the CSS settings in site-colors.css as shown below.
div.maincontent-noleftmenu
{
margin-left: 16em;
margin-right: 10px;
}