Differences

This shows you the differences between two versions of the page.

--- code-schnipsel:html:mehrspaltig [2011/10/07 11:06] – tietz
+++ code-schnipsel:html:mehrspaltig [2024/01/05 13:07] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
+===Mehrspaltige Inhaltselemente===
+\\
+Informationen zu HTHL und CSS sind unter [[http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html]] zu finden
+==HTML==
+Für 2 Spalten (z.B. 50% / 50%):
+<code>
+<!-- Subtemplate: 2 Spalten mit 50/50 Teilung -->
+<div class="subcolumns">
+  <div class="c50l">
+    <div class="subcl">
+      <!-- Inhalt linker Block -->
+    </div>
+  </div>
+  <div class="c50r">
+    <div class="subcr">
+      <!-- Inhalt rechter Block -->
+    </div>
+  </div>
+</div>
+</code>
+und für drei Spalten (z,B. 33% / 33% / 33%):
+<code>
+<!-- Subtemplate: 3 Spalten mit 33/33/33 Teilung -->
+<div class="subcolumns">
+  <div class="c33l">
+    <div class="subcl">
+      <!-- Inhalt linker Block -->
+    </div>
+  </div>
+  <div class="c33l">
+    <div class="subc">
+      <!-- Inhalt mittlerer (linker) Block -->
+    </div>
+  </div>
+  <div class="c33r">
+    <div class="subcr">
+      <!-- Inhalt rechter Block -->
+    </div>
+  </div>
+</div>
+</code>
+Die möglichen Spaltenteilungen dem CSS entnehmen (Summe immer 100 ... logisch)
+<note important>Wichtig: Damit der Ausgleich von Rundungsfehlern fehlerfrei funktioniert, muss sich innerhalb eines Subtemplates immer exakt **ein** rechts-floatender Container befinden.</note>
+\\
+==CSS:==
+<code>
+@media all
+{
+ /**
+  * @section subtemplates
+  * @see     http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html
+  */
+  .subcolumns { display:table; width:100%; table-layout:fixed; }
+  .subcolumns_oldgecko { width: 100%; float:left; }
+  .c20l, .c25l, .c33l, .c40l, .c38l, .c50l, .c60l, .c62l, .c66l, .c75l, .c80l { float:left; }
+  .c20r, .c25r, .c33r, .c40r, .c38r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r { float:right; margin-left:-5px; }
+  .c20l, .c20r { width:20%; }
+  .c40l, .c40r { width:40%; }
+  .c60l, .c60r { width:60%; }
+  .c80l, .c80r { width:80%; }
+  .c25l, .c25r { width:25%; }
+  .c33l, .c33r { width:33.333%; }
+  .c50l, .c50r { width:50%; }
+  .c66l, .c66r { width:66.666%; }
+  .c75l, .c75r { width:75%; }
+  .c38l, .c38r { width:38.2%; }
+  .c62l, .c62r { width:61.8%; }
+  .subc  { padding:0 0.5em; }
+  .subcl { padding:0 1em 0 0; }
+  .subcr { padding:0 0 0 1em; }
+  .equalize, .equalize .subcolumns { table-layout:fixed; }
+  .equalize > div {
+    display:table-cell;
+    float:none;
+    margin:0;
+    overflow:hidden;
+    vertical-align:top;
+  }
+}
+@media print
+{
+ /**
+  * (en) float clearing for subtemplates. Uses display:table to avoid bugs in FF & IE
+  * (de) Float Clearing für Subtemplates. Verwendet display:table, um Darstellungsprobleme im FF & IE zu vermeiden
+  */
+  .subcolumns,
+  .subcolumns > div {
+    overflow:visible;
+    display:table;
+  }
+}
+</code>
+Und wie üblich die IE CSS-Anpassungen:
+(einzubinden mit <!--[if lte IE 7]><link href="LinkzurPatchDatei.css" rel="stylesheet" type="text/css" /><![endif]-->)
+<code>
+@media screen, projection
+{
+  /**
+   * (en) IE-Adjustments for subtemplates
+   * (de) IE-Anpassung für Subtemplates
+   *
+   * Doubled Float-Margin Bug
+   * @see        http://positioniseverything.net/explorer/doubled-margin.html
+   *
+   * @bugfix
+   * @affected   IE 5.x/Win, IE6
+   * @css-for    IE 5.x/Win, IE6, IE7
+   * @valid      yes
+   */
+  .c20l, .c25l, .c33l, .c38l, .c40l, .c50l, .c60l, .c62l, .c66l, .c75l, .c80l,
+  .c20r, .c25r, .c33r, .c38r, .c40r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r { display:inline; }
+  /* Fix for:"Linking to anchors in elements within the containing block" Problem in IE5.x & IE 6.0 */
+  * html .equalize, * html .equalize .subcolumns { overflow:visible; display:block; }
+  .equalize, .equalize .subcolumns { overflow:hidden; display:block; }
+  /* transform CSS tables back into floats */
+  .equalize .c20l,.equalize .c40l,.equalize .c60l,.equalize .c80l,
+  .equalize .c25l,.equalize .c33l,.equalize .c38l,.equalize .c50l,
+  .equalize .c62l,.equalize .c66l,.equalize .c75l {
+    float:left; display:inline;
+    padding-bottom:32767px;
+    margin-bottom:-32767px;
+  }
+  .equalize .c20r,.equalize .c40r,.equalize .c60r,.equalize .c80r,
+  .equalize .c25r,.equalize .c33r,.equalize .c38r,.equalize .c50r,
+  .equalize .c62r,.equalize .c66r,.equalize .c75r {
+    float:right; margin-left:-5px; display:inline;
+    padding-bottom:32767px;
+    margin-bottom:-32767px;
+  }
+  .no-ie-padding .c20l,.no-ie-padding .c40l,.no-ie-padding .c60l,.no-ie-padding .c80l,
+  .no-ie-padding .c20r,.no-ie-padding .c40r,.no-ie-padding .c60r,.no-ie-padding .c80r,
+  .no-ie-padding .c25l,.no-ie-padding .c33l,.no-ie-padding .c38l,.no-ie-padding .c50l,
+  .no-ie-padding .c62l,.no-ie-padding .c66l,.no-ie-padding .c75l,
+  .no-ie-padding .c25r,.no-ie-padding .c33r,.no-ie-padding .c38r,.no-ie-padding .c50r,
+  .no-ie-padding .c62r,.no-ie-padding .c66r,.no-ie-padding .c75r {
+    padding-bottom:0;
+    margin-bottom:0;
+  }
+   /**
+   * Internet Explorer and the Expanding Box Problem
+   * @see http://www.positioniseverything.net/explorer/expandingboxbug.html
+   *
+   * @workaround
+   * @affected   IE 5.x/Win, IE6
+   * @css-for    IE 5.x/Win, IE6
+   * @valid      yes
+   */
+  /* avoid growing widths */
+  * html .subc,
+  * html .subcl,
+  * html .subcr { word-wrap:break-word; o\verflow:hidden; }
+}
+</code>