dynamicinternet Wir machen Ihr Web dynamisch!

Neue Layouts mit YAML 3.1

geschrieben von Micha am 26. Januar 2009 | kein Kommentar

So ganz stimmt die Überschrift nicht. Die nachfolgenden Beispiele waren schon vorher möglich. Durch die Umstellung der Container page_margins und page auf Klassen ist nun die Mehrfachverwendung dieser Container möglich. Die Arbeit für den Webseitenersteller hat sich damit um ein Vielfaches reduziert, was ja Sinn und Zweck eines Frameworks sein sollte.

Anhand von einigen Beispielen werde ich die verschiedenen Layouts gegenüberstellen. Fangen wir bei einem einfachen, zentrierten Layout an.

Einfachverwendung von page_margins/page

Die beiden Container page_margins und page umschließen die anderen Container und steuern so die minimale und maximale Breite der gesamten Seite. Hier der HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12

<div class="page_margins">
  <div class="page">
    <div id="header">...</div>
    <div id="nav">...</div>
    <div id="main">
      <div id="col1">...</div>
      <div id="col2">...</div>
      <div id="col3">...</div>
    </div>
    <div id="footer">...</div>
  </div>
</div>

Das CSS sieht folgendermaßen aus:

.page_margins { min-width: 740px; max-width: 80em; }
.page { padding: 10px; }

Der Patch für die Internet Explorer (auf die ellenlange JS-Expression verzichte ich hier, die kann jeder bei den YAML Beispielen nachlesen):

* html .page_margins {
  /* Fallback if JavaScript is disabled */
  width: 80em;
  /* JS-Expression */
}

Mehrfachverwendung von page_margins/page

Hier sitzen die Container page_margins und page innerhalb der Elemente, die sich über das ganze Browserfenster erstrecken sollen und steuern auch wieder die minimale und maximale Breite des Inhalts. In diesem Fall innerhalb von #header, #nav, #main und #footer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div id="header">
  <div class="page_margins">
    <div class="page">...</div>
  </div>
</div>
<div id="nav">
  <div class="page_margins">
    <div class="page">...</div>
  </div>
</div>
<div id="main">
  <div class="page_margins">
    <div class="page">
      <div id="col1">...</div>
      <div id="col2">...</div>
      <div id="col3">...</div>
    </div>
  </div>
</div>
<div id="footer">
  <div class="page_margins">
    <div class="page">...</div>
  </div>
</div>

Im Gegensatz zum 1. Beispiel ist hier der Container page_margins nur für die maximale Breite zuständig, die minimale Breite wird an #header, #nav, #main, #footer vergeben.

.page_margins { max-width: 80em; }
#header, #nav, #main, #footer { overflow:hidden; min-width: 740px; }

Der Patch für die Explorer sieht hier ein wenig anders aus:

 * html div.page_margins {
    /* Fallback if JavaScript is disabled */
    width: auto;
  /* JS-Expression */
 } 
* html #header,
* html #nav,
* html #main,
* html #footer {
  /* Fallback if JavaScript is disabled */
  width: auto;
  /* JS-Expression */
 }

Man muß aber nicht page_margins und page in jedes Element packen. Entscheidend ist, wie das Layout aussehen soll. Genau so gut kann man nur den Header über das volle Browserfenster laufen lassen und die anderen Container innerhalb von page_margins/page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="header">
  <div class="page_margins">
    <div class="page">...</div>
  </div>
</div>
<div class="page_margins">
  <div class="page">
    <div id="nav">...</div>
    <div id="main">
      <div id="col1">...</div>
      <div id="col2">...</div>
      <div id="col3">...</div>
    </div>
    <div id="footer">...</div>
  </div>
</div>

Somit sind viele verschiedene Kombinationen möglich. Das schöne an diesen Techniken ist, das sich bei entsprechender Auszeichnung der Maßeinheiten in em oder % die Container proportional vergrößern, ohne das etwas kaputt geht.