initial commit

3 files changed, 362 insertions, 0 deletions

diff --git a/files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html b/files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html
new file mode 100644
index 0000000000..252f90b530
--- /dev/null
+++ b/files/de/web/css/css_lists_and_counters/css_zähler_verwenden/index.html
@@ -0,0 +1,126 @@
+---
+title: CSS Zähler verwenden
+slug: Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden
+tags:
+  - Anleitung
+  - CSS
+  - CSS Listen
+  - CSS Wert
+  - Fortgeschrittene
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen.</span> CSS Zähler sind eine Implementierung von <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1.</p>
+
+<p>Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der <code>counter()</code> oder <code>counters()</code> Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.</p>
+
+<h2 id="Zähler_verwenden">Zähler verwenden</h2>
+
+<p>Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die <code>counter()</code> Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt &lt;der Wert des Zählers&gt;:" ein.</p>
+
+<pre class="brush: css">body {
+  counter-reset: section;                      /* Setzt den Abschnittszähler auf 0 */
+}
+
+h3::before {
+  counter-increment: section;                  /* Erhöht den Abschnittszähler */
+  content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */
+}
+</pre>
+
+<p>Beispiel:</p>
+
+<pre class="brush: html">&lt;h3&gt;Einführung&lt;/h3&gt;
+&lt;h3&gt;Inhalt&lt;/h3&gt;
+&lt;h3&gt;Zusammenfassung&lt;/h3&gt;</pre>
+
+<p>{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}</p>
+
+<h2 id="Zähler_verschachteln">Zähler verschachteln</h2>
+
+<p>Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die <code>counters()</code> Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:</p>
+
+<pre class="brush: css">ol {
+  counter-reset: section;                /* Erstellt mit jedem ol Element
+                                            eine neue Instanz des
+                                            Abschnittszählers. */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* Inkrementiert nur diese Instanz
+                                            des Abschnittszählers. */
+  content: counters(section,".") " ";    /* Fügt den Wert aller Instanzen
+                                            des Abschnittszählers durch "."
+                                            getrennt hinzu. */
+                                         /* Falls &lt; IE8 unterstützt werden soll,
+                                            sollte sichergestellt werden, dass
+                                            kein Leerzeichen nach dem ',' steht. */
+}
+</pre>
+
+<p>Kombiniert mit dem folgenden HTML:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;Eintrag               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;Eintrag           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<p>Erzeugt dieses Ergebnis:</p>
+
+<p>{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
+
+<p><em>Es gibt ein zusätzliches Beispiel unter <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.</em></p>
diff --git a/files/de/web/css/css_lists_and_counters/index.html b/files/de/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..e616ac7735
--- /dev/null
+++ b/files/de/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,132 @@
+---
+title: CSS Lists and Counters
+slug: Web/CSS/CSS_Lists_and_Counters
+tags:
+  - CSS
+  - CSS Listen und Zähler
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Lists and Counters</strong> ist ein CSS Modul, das definiert, wie Listen dargestellt werden, wie Aufzählungspunkte gestylt werden können und wie Autoren neue Zähler erstellen können.</p>
+
+<h2 id="Referenz">Referenz</h2>
+
+<h3 id="Eigenschaften">Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
+</div>
+
+<h3 id="-Regeln">@-Regeln</h3>
+
+<dl>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@counter-style/system","system")}}</li>
+  <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li>
+  <li>{{cssxref("@counter-style/negative", "negative")}}</li>
+  <li>{{cssxref("@counter-style/prefix", "prefix")}}</li>
+  <li>{{cssxref("@counter-style/suffix", "suffix")}}</li>
+  <li>{{cssxref("@counter-style/range", "range")}}</li>
+  <li>{{cssxref("@counter-style/pad", "pad")}}</li>
+  <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li>
+  <li>{{cssxref("@counter-style/fallback", "fallback")}}</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Anleitungen">Anleitungen</h2>
+
+<dl>
+ <dt><a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung">Konsistente Listeneinrückung</a></dt>
+ <dd>Erklärt, wie eine konsistente Einrückung zwischen verschiedenen Browsern erreicht werden kann.</dd>
+ <dt><a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden">CSS Zähler verwenden</a></dt>
+ <dd>Beschreibt, wie Zähler verwendet werden, um Aufzählungen außerhalb der traditionellen Listenelemente verwenden zu können oder um komplexe Zählungen durchzuführen.</dd>
+</dl>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Merkmal</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Grundlegende Unterstützung</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html b/files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html
new file mode 100644
index 0000000000..b2309f5e82
--- /dev/null
+++ b/files/de/web/css/css_lists_and_counters/konsistente_listeneinrückung/index.html
@@ -0,0 +1,104 @@
+---
+title: Konsistente Listeneinrückung
+slug: Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung
+tags:
+  - Anleitung
+  - CSS
+  - Intermediate
+  - NeedsUpdate
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Eine der häufigsten Stiländerungen, die auf Listen angewendet werden, ist eine Änderung der Einrückungsweite — d. h. wie weit die Listeneinträge nach rechts verschoben sind.</span> Dies führt oft zu Frustration, da das, was in einem Browser funktioniert, in einem anderen oft nicht denselben Effekt hat. Wenn zum Beispiel angegeben wird, dass Listen keinen linken Außenabstand haben, verschieben sie sich im Internet Explorer, bleiben jedoch hartnäckig am selben Platz in Gecko-basierten Browsern. <span class="seoSummary">Dieser Artikel hilft, die Probleme zu verstehen, die auftreten können, und wie man diese verhindert.</span></p>
+
+<p>Um zu verstehen, warum dies der Fall ist, und noch wichtiger, wie das Problem generell vermieden werden kann, ist es notwendig, die Details der Listenerstellung zu untersuchen.</p>
+
+<h2 id="Eine_Liste_erstellen">Eine Liste erstellen</h2>
+
+<p>Zunächst betrachten wir einen einzelnen Listeneintrag. Dieser Listeneintrag hat kein Aufzählungszeichen (auch bekannt als "Bullet") und ist noch nicht Teil einer Liste. Er hängt allein in der Leere, schlicht und einfach, wie in Abbildung 1 gezeigt.</p>
+
+<p><img alt="Abbildung 1" class="internal" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p>
+
+<p>Der gepunktete rote Rahmen repräsentiert die äußeren Ränder des Inhaltsbereichs des Listeneintrags. Erinnere dich, dass der Listeneintrag zu diesem Zeitpunkt weder einen Innenabstand noch Ränder besitzt. Falls wir zwei oder mehr Listeneinträge hinzufügen, erhalten wir als Ergebnis etwas wie in Abbildung 2.</p>
+
+<p><img alt="Abbildung 2" class="internal" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p>
+
+<p>Jetzt umschließen wir diese durch ein Elternelement; in diesem Fall, umschließen wir sie durch eine ungeordnete Liste (d. h. <code>&lt;ul&gt;</code>). Laut dem CSS Boxmodell müssen die Boxen von Listeneinträgen innerhalb des Inhaltsbereichs des Elternelements dargestellt werden. Da das Elternelement aktuell weder Innen- noch Außenabstände hat, erhalten wir als Ergebnis das in Abbildung 3 Gezeigte.</p>
+
+<p><img alt="Abbildung 3" class="internal" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p>
+
+<p>Hier zeigt uns der gepunktete blaue Rahmen die Ränder des Inhaltsbereichs des <code>&lt;ul&gt;</code> Elements. Da wir keinen Innenabstand für das <code>&lt;ul&gt;</code> Element haben, umschließt sein Inhalt die drei Listeneinträge passend.</p>
+
+<p>Nun fügen wir Listenaufzählungszeichen hinzu. Da es sich hierbei um eine ungeordnete Liste handelt, fügen wir gewöhnliche gefüllte Kreis-"Bullets" hinzu, wie in Abbildung 4 dargestellt.</p>
+
+<p><img alt="Abbildung 4" class="internal" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p>
+
+<p>Visuell sind die Aufzählungszeichen <em>außerhalb</em> des Inhaltsbereichs des <code>&lt;ul&gt;</code>, jedoch spielt dies hier keine Rolle. Der Hauptpunkt ist, dass die Aufzählungszeichen außerhalb der "Hauptbox" des <code>&lt;li&gt;</code> Elements platziert sind, nicht des <code>&lt;ul&gt;</code>. Sie sind sozusagen Anhängsel der Listeneinträge, die außerhalb des Inhaltsbereichs des <code>&lt;li&gt;</code> liegen, jedoch trotzdem am <code>&lt;li&gt;</code> hängen.</p>
+
+<p>Dies ist der Grund, warum in allen Browsern außer dem Internet Explorer für Windows die Aufzählungszeichen außerhalb der Rahmen eines <code>&lt;li&gt;</code> Elements liegen, vorausgesetzt, der Wert von <code>list-style-position</code> ist <code>outside</code>. Falls er zu <code>inside</code> geändert wird, werden die Aufzählungszeichen innerhalb des Inhalts des <code>&lt;li&gt;</code>s gezogen, obwohl sie eine Inlinebox sind, die am Anfang des <code>&lt;li&gt;</code> platziert ist.</p>
+
+<h2 id="Doppelt_einrücken">Doppelt einrücken</h2>
+
+<p>Wie wird all dies nun im Dokument dargestellt? Im Moment haben wir eine Situation analog zu diesen Stilen:</p>
+
+<pre class="brush:css">ul, li {margin-left: 0; padding-left: 0;}</pre>
+
+<p>Falls diese Liste so wie sie ist in ein Dokument eingebunden würde, gäbe es keine sichtbare Einrückung und die Aufzählungszeichen liefen Gefahr, am linken Rand des Browserfensters herauszufallen.</p>
+
+<p>Um dies zu vermeiden und eine Einrückung zu erhalten, gibt es nur drei Möglichkeiten für Browserhersteller.</p>
+
+<ol>
+ <li>Gib jedem <code>&lt;li&gt;</code> Element einen linken Außenabstand.</li>
+ <li>Gib dem <code>&lt;ul&gt;</code> Element einen linken Außenabstand.</li>
+ <li>Gib dem <code>&lt;ul&gt;</code> Element einen linken Innenabstand.</li>
+</ol>
+
+<p>Wie sich herausstellt, hat niemand auf die erste Option zurückgegriffen. Die zweite Option wurde von Internet Explorer für Windows und Macintosh und Opera gewählt. Die dritte wird von Gecko und allen darauf basierenden Browsern verwendet.</p>
+
+<p>Lass uns die beiden Herangehensweisen genauer betrachten. Im Internet Explorer und Opera werden die Listen durch das Setzen eines linken Außenabstands von 40 Pixeln für das <code>&lt;ul&gt;</code> Element gesetzt. Falls wir dem <code>&lt;ul&gt;</code> Element eine Hintergrundfarbe zuweisen und die Rahmen der Listeneinträge und <code>&lt;ul&gt;</code> unverändert lassen, erhalten wir das Ergebnis, das in Abbildung 5 gezeigt wird.</p>
+
+<p><img alt="Abbildung 5" class="internal" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p>
+
+<p>Im Gegensatz dazu setzt Gecko einen linken <em>Innenabstand</em> von 40 Pixeln für das <code>&lt;ul&gt;</code> Element. Werden die exakt gleichen Stile benutzt, die zur Erzeugung von Abbildung 5 verwendet wurden, erhalten wir beim Laden des Beispiels in Gecko-basierten Browsern Abbildung 6.</p>
+
+<p><img alt="Abbildung 6" class="internal" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif"></p>
+
+<p>Wie wir sehen können, bleiben die Aufzählungszeichen an den <code>&lt;li&gt;</code> Elementen hängen, unabhängig davon, wo sie sind. Der Unterschied liegt ausschließlich in der Darstellung des <code>&lt;ul&gt;</code>. Wir können den Unterschied nur sehen, wenn wir versuchen, einen Hintergrund oder einen Rahmen für das <code>&lt;ul&gt;</code> Element zu setzen.</p>
+
+<h2 id="Konsistenz_finden">Konsistenz finden</h2>
+
+<p>Zusammenfassend kann man sagen: Falls eine konsistente Darstellung von Listen zwischen Gecko, Internet Explorer und Opera gewünscht ist, müssen <strong>beide</strong> linken Abstände des <code>&lt;ul&gt;</code> Elements gesetzt werden, Innen- und Außenabstand. Wir können <code>&lt;li&gt;</code> für diesen Zweck komplett ignorieren. Zur Erstellung der Standardanzeige in Netscape 6.x schreibt man folgendes:</p>
+
+<pre class="brush:css">ul {margin-left: 0; padding-left: 40px;}</pre>
+
+<p>Falls lieber das Internet Explorer/Opera Modell gewünscht ist, dann:</p>
+
+<pre class="brush:css">ul {margin-left: 40px; padding-left: 0;}</pre>
+
+<p>Natürlich können die eigenen bevorzugten Werte angegeben werden. Wenn gewünscht, können beide auf <code>1.25em</code> gesetzt werden -- es gibt keinen Grund, bei pixelbasierter Einrückung zu bleiben. Falls Listen zurückgesetzt werden sollen, sodass sie keine Einrückung haben, müssen sowohl Innen- als auch Außenabstand auf null gesetzt werden:</p>
+
+<pre class="brush:css">ul {margin-left: 0; padding-left: 0;}</pre>
+
+<p>Beachte hierbei jedoch, dass dadurch die Bullets außerhalb der Liste und deren Elternelement hängen. Falls das Elternelement das <code>body</code> Element ist, sind die Bullets höchstwahrscheinlich außerhalb des Browserfensters, und sind daher nicht sichtbar.</p>
+
+<h2 id="Zusammenfassung">Zusammenfassung</h2>
+
+<p>Am Ende sehen wir, dass keiner der in diesem Artikel genannten Browser Listen richtig oder falsch darstellt. Sie verwenden verschiedene Standardstile und dadurch entstehen die Probleme. Wenn sichergestellt wird, dass sowohl linker Innen- als auch Außenabstand gesetzt sind, kann wesentlich größere browserübergreifende Konsistenz bei der Einrückung von Listen erzielt werden.</p>
+
+<h2 id="Empfehlungen">Empfehlungen</h2>
+
+<ul>
+ <li>Wenn die Einrückung von Listen geändert werden soll, stelle sicher, dass Innen- und Außenabstand gesetzt sind.</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Originaldokumentinformation">Originaldokumentinformation</h2>
+
+<ul>
+ <li>Autor(en): Eric A. Meyer, Netscape Communications</li>
+ <li>Zuletzt aktualisiert: Published 30 Aug 2002</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. Alle Rechte vorbehalten.</li>
+ <li>Hinweis: Dieser nachgedruckte Artikel war ursprünglich Teil der DevEdge Seite.</li>
+</ul>
+</div>