4.8.2 Layout Draft "3col_advanced"
In this layout draft named 3col_advanced, we meet the following challenges:
- Three-column layout (column order 2-1-3)
- Total width 960 pixels (240 | 480 | 240 columns)
- Further subdivision of the main content area in two columns after the first paragraph
- Column background left: background image with the "Faux Columns" technique.
- Horizontal main navigation "Shiny Buttons"
- Print layout: only the main content from #col1
- Basis for the screen layout is the three-column basic layout of the YAML framework
/examples/06_layouts_advanced/3col_advanced.html
Layout Draft in Detail
The central stylesheet layout_3col_advanced.css contains the following CSS components:
/* import core styles | Basis-Stylesheets einbinden*/
@import url(../../../yaml/core/base.css);
/* import screen layout | Screen-Layout einbinden */
@import url(../../../yaml/navigation/nav_shinybuttons.css);
@import url(screen/basemod.css);
@import url(screen/basemod_3col_advanced.css);
@import url(screen/content.css);
/* import print layout | Druck-Layout einbinden */
@import url(../../../print/print_100_draft.css);
First, we link the basic stylesheet base.css from the yaml/core/ folder as well as the unmodified navigation nav_shinybuttons.css.
Then we import the basic version of the screen layout basemod.css, which forms the basis of the layout. The modifications for our current requirements are in the file basemod_3col_advanced.css.
Fixed Width and Centered Layout: the fixed layout width of 960 pixels is set at the outermost container .page_margins. Setting the side margins to auto can then center this container. The minimum and maximum widths are turned off, as they are useless in a fixed layout.
/* Setting the layout width and centering | Festlegung der Layoutbreite und Zentrierung*/
.page_margins {
width: 960px;
min-width:inherit;
max-width:none
}
Column order 2-1-3: I described the technique for resorting the columns in Section 4.4: Variable Column Order. Now it will be used to arrange the content within the source code according to its relevance.
/* #col1 becomes the middle column | #col1 wird zur mittleren Spalte */
#main { width:100%; float:left; }
#col1 { width: 480px; float:left; margin-left: 240px; }
#col1_content {padding-left: 10px; padding-right: 10px}
/* #col2 becomes the left colum |#col2 wird zur linken Spalte */
#col2 { width: 240px; float:left; margin-left: -720px; }
#col2_content {padding-left: 20px; padding-right: 10px}
/* #col3 becomes the right column | #col3 wird zur rechten Spalte */
#col3 { margin-left: -5px; margin-right: 0; width: 240px; float:right; }
#col3_content {padding-left: 10px; padding-right: 20px}
Note the declaration of #col3: it is now floated. With this trick, we can completely avoid the IE 5.x and IE 6 3 Pixel Bug. The web designer's freedom is not at all limited by this step, as the column order 2-1-3 is inherently only compatible with pure pixel- or percent-based layouts - see Section 4.4.
Faux Columns Background: the floated #col2 on the left side needs a continuous column background. The Faux Columns Technique is perfect. The container #main is assigned the graphic as a left-aligned and vertically-repeating background image.
/* Background image for the left column - width 240 pixels | Hintergrundgrafik für linke Spalte - Grafikbreite 240 Pixel */
#main {
background-color: transparent;
background-image: url(../../images/bg_pattern.png);
background-repeat:repeat-y;
background-position:left;
}
Now the layout is complete. Only Internet Explorer left to manage.
Adjustments for Internet Explorer
The adjustments for Internet Explorer are collected in the file patch_3col_advanced.css in the css/patches folder. In the first step, the global adjustment file iehacks.css is linked.
/* Layout-independent adjustments | Layout-unabhängige Anpassungen ------------------- */
@import url(../../../../yaml/core/iehacks.css);
/* Layout-dependent adjustments --------------------- */
@media screen, projection
{
/* No layout-dependent adjustments necessary */
}
Thanks to the care taken with iehacks.css, IE causes relatively little trouble with this rather complex layout. There is no need for any further adjustments.
Alternative Solution for Centering Fixed Layouts (IE5.x Compatible)
The centering method used in this layout draft works in all modern browsers, no matter if with a fixed or a flexible layout. Internet Explorer 5.x, an exception, will display the layout on the left.
For fixed layouts, there is alternative method for centering that will also work in the outdated Internet Explorer 5.x.
body { padding: 0em; }
.page_margins {
width: 960px;
min-width:inherit;
max-width:none
position:absolute;
top: 0;
left: 50%;
margin-left: -480px;
}
.page { width: 960px; margin: 1em; }
Note: the web page is centered here with a negative margin. This variant is accordingly incompatible with flexible layouts.
