4.8.1 Draft Layout "2col_advanced"
This first layout draft with the name 2col_advanced meets the following requirements:
- Two-column layout (navigation left in #col3 and main content right in #col1)
- Flexible layout with flexible column widths (25% | 75%)
- Further division of the main content area in two columns after the first paragraph
- Vertical 1 pixel wide separator between the columns with a vertical spacing of 1em to both header and footer.
- Horizontal main navigation "Shiny Buttons"
- Print layout: only the main content from #col1.
/examples/06_layouts_advanced/2col_advanced.html
Layout Draft in Detail
The central stylesheet layout_2col_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_2col_advanced.css);
@import url(screen/content.css);
/* import print layout | Druck-Layout einbinden */
@import url(../../../print/print_001.css);
First, the base stylesheet base.css from the yaml/core/ folder is loaded, as well as the unmodified navigation nav_shinybuttons.css.
Then, the basic version of the screen layout basemod.css is imported, which forms the basis of the layout. The modifications for the requirements of the desired two-column layout are found in the basemod_2col_advanced.css file.
/* #col1 becomes the main content column | #col1 wird zur Hauptinhaltsspalte */
#col1 { width: 75%; float:right}
#col1_content { padding: 10px 20px 10px 10px; }
/* hide #col2 | #col2 abschalten */
#col2 { display:none; }
/* #col3 becomes the left column | #col3 wird zur linken Spalte */
#col3 { margin-left: 0; margin-right: 75%; }
#col3_content { padding: 10px 10px 10px 20px; }
/* graphic-free column separators between #col1 and #col3 | Grafikfreier Spaltentrenner zw. #col1 und #col3*/
#col3 {border-right: 1px #ddd solid;}
#main {padding: 1em 0}
2 Columns: with the first declaration, #col1 receives 75 percent of the available width and is floated to the right, becoming the main content column. The container #col2 is not needed and is hidden. Finally, #col3 is moved to the left side by adjusting its margins.
Column separators: in addition, this example uses a 1 pixel wide dotted line as a vertical column separator. This is created by using the CSS border property for the static #col3. The top and bottom margins of the #main container determine the spacing of the line from the header and footer.
Adjustments for Internet Explorer
The adjustments for Internet Explorer are collected in the file patch_2col_advanced.css in the css/patches folder. As the graphic-free column separators are used, the 3 Pixel Bug cannot be fixed in this layout.
/* LAYOUT-INDEPENDENT ADJUSTMENTS ----------------------------- */
@import url(../../../../yaml/core/iehacks.css);
/* LAYOUT-DEPENDENT ADJUSTMENTS ------------------------------- */
@media screen, projection
{
/* min-width / max-width for IE
* html .page_margins {
width: 80em;
width: expression( ... );
}
First, the stylesheet integrates the global adjustment file iehacks.css from the yaml/core/ folder. (Do not be distracted by the relative paths in this example - they are only due to the folder structure of the sample folder.)
Next, we incorporate the IE expressions to simulate min-width and max-width in IE 5.x and 6.
Note: If you look at this example in IE5.01, you will notice that some paddings collapse. The corrections are not demonstrated in this example, as they are not necessary for understanding YAML.
