2.4 Structure of the XHTML Source Code
The goal of the YAML framework is to deliver a universally applicable, cross-browser consistent and fully functional layout with all the necessary XHTML structures, independent of any content. In particular, page creators have been given the freedom to choose fixed or flexible layouts and column widths. Furthermore, a certain level of comfort is provided with the predefined commonly needed elements and the usual design requirements built into the structure. The result is a universal source code structure, which offers a multitude of easy modifications via CSS without changing the basic markup. The source code structure is in the download package as an empty HTML file.
Doctype Choice
The doctype XHTML 1.0 Transitional was chosen for the source code structure. You may certainly change it if you wish: Strict XHTML or perhaps HTML 4.01 are completely compatible with the framework should your content require them.
- Standard Mode
In this mode, the browser interprets (X)HTML as it is defined by the W3C. Mistakes in the (X)HTML code can cause major display errors. However, this mode offers the greatest possible assurance that a website will be consistent in all browsers.
- Quirks Mode
This mode lets the browser tolerate much more invalid code and will always attempt to produce a usable web page. This mode is used automatically when the HTML document specifies no doctype, an outdated doctype, or a misspelled one. Internet Explorer 5.x can use no other mode than this.
The chosen doctype's display mode is thus crucial for a correct display of the layout -- particularly in Internet Explorer. All the YAML CSS components, including the CSS hacks for Internet Explorer, are based on the browser's using the standard-conform Standard Mode.
The Structure in Detail
Time to look at the fundaments of the YAML framework. Here is an excerpt from the file markup_draft.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head> ... </head>
<body>
<div class="page_margins">
<div class="page">
<div id="header"> ... </div>
<div id="nav"> ...</div>
<!-- begin mainpart -->
<div id="main">
<!-- left column -->
<div id="col1">
<div id="col1_content" class="clearfix">
...
</div>
</div>
<!-- right column -->
<div id="col2">
<div id="col2_content" class="clearfix">
...
</div>
</div>
<!-- middle column -->
<div id="col3">
<div id="col3_content" class="clearfix">
...
</div>
<!--
IE Column Clearing -->
<div id="ie_clearing"> </div>
</div>
<!-- end mainpart -->
</div>
<!-- footer -->
<div id="footer"> ... </div>
</div>
</div>
</body>
</html>
The outermost DIV container .page_margins controls the width of the layout as a whole. It contains all the following containers, and its parameters determine the maximum and minimum widths of a flexible layout as well as the width of a fixed design.
In addition, this container together with the container .page can be used to create border visuals for the layout - more on that later. Both containers are given the IE proprietary property hasLayout, in order to avoid various CSS bugs, such as the Escaping Floats Bug when using horizontal menus on a float basis. For more information, see Section 3.5: CSS Adjustments for Internet Explorer
Next are the containers for the #header, the main navigation #nav, as well as the main content area #main with its three columns. The end of the file is: the #footer.
The red section of code labeled IE Column Clearings is one of YAML's special features. The meaning and function of this container is thoroughly explained in Section 2.7: The Clearing of #col3.
The following layout example demonstrates the resulting 3-column-layout:
examples/01_layouts_basics/3col_standard.html
Important: starting with version 3.1 of the YAML frameworks, .page_margins became a CSS class in order to allow its use more than once on a page. All earlier versions used the id #page_margins, which could only be used one time.
Variations of the Markup
As demonstrated, the two CSS classes .page_margins and .page control the basic appearance of the layout, by setting the total width as well as margins, borders, or backgrounds if necessary.
In the source code described above, the outermost DIV container .page_margins surrounds all the other elements of the webpage. This results in a layout which in its simplest form is a rectangular box against the background of the <body> element. This effect is not always desirable.
Alternatively, the classes .page_margins and .page can be used multiple times within a layout to allow a background color or image to stretch horizontally across the entire viewport with only the actual content within a rectangle of defined width. The following layout example demonstrates the effect:
examples/07_layouts_advanced_2/fullpage_3col.html
To create this design, the nesting hierarchy of the code had to be changed. Here is an excerpt of the header markup:
<div id="header">
<div class="page_margins">
<div class="page">
...
</div>
</div>
</div>
(Kopie 2)
While in the standard version the container .page_margins contains all other elements, this example changes the hierarchy so that #header becomes the outermost container and .page_margins merely contains its contents -- its width definitions thus only influence its contents. The container #header itself, if not specifically restricted, will automatically stretch to fill the entire viewport width and can be used to design the header area.
You can use this modification on any basic element of your layout (header, navigation, main, footer) or just on specific areas, simply by having a common parent container of .page_margins surround all the other elements, as in the standard layout. And of course you need only set the width for .page_margins to set the width for the entire layout. As you have probably noticed, the (X)HTML framework is extremely flexible.
Design Freedom with the Combination Model
The Box Model, which has existed since CSS 1, is clearly intended for use when working with fixed measurements (i.e. pixels). The total width of a container is determined by the addition of the individual components of the box: width, padding, and border.
When mixing units of measurement within a container (for example width:25%; padding: 0 10px;), it is no longer possible to calculate the total width of the container in advance. Design freedom in composing flexible layouts is thus severely reduced.
Internet Explorer has a further problem with flexible column widths. When using Quirks Mode, it interprets the CSS Box Model incorrectly. IE 6 can be set to present content in a standards-conform manner with the use of the correct Doctype. However, YAML has always been designed to completely support version 5.x of Internet Explorer, which only works in quirks mode.
In order to yet persuade IE to present the correct width, the Box Model Hack was developed -- along with countless other variations of the hack. All variations have in common that they exploit the parser bug to give IE a separate width, taking into account the false calculation, which then results in a column with the correct width. Unfortunately, this method cannot correct for mixed units of measurements, because of the problems described above. It is thus a further restriction on design freedom.
The solution for all these problems lies in YAML's combination model for the basic layout - with two nested DIV containers in each column.
<!-- begin: #col1 - first float column -->
<div id="col1">
<div id="col1_content" class="clearfix">
...
</div>
</div>
The total width of the column is assigned to the outer container #colx. The padding and optional border go to the inner container colx_content, which has no defined width, but only width:auto.
This means that the total width of the container #colx can always be determined. Any number of combinations of various units of measurements are possible, which frees the design for flexible layouts and simultaneously entirely avoids the IE box model bug.
