AMP Anzeigenkennzeichnung: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied

@@ Zeile 2: / Zeile 2: @@
 ==Beispiel-Aufbau einer Anzeigenkennzeichnung==
+<syntaxhighlight lang="html">
+<div class="iqampcenter">
+    <amp-ad> … </amp-ad>
+    <div class="iqadmarker">Anzeige</div>
+</div>
+</syntaxhighlight>
+*Das "iqadmarker"-''div'' kommt im HTML-Code hinter das ''amp-ad''-Tag
+*Der umliegende ''div-Container'' "iqampcenter" bekommt zusätzlich das CSS-Styling:
+<syntaxhighlight lang="css">
+display: flex;
+flex-direction: column;
+</syntaxhighlight>
+*Das "iqadmarker"-''div'' bekommt das CSS-Styling:
+<syntaxhighlight lang="css">
+order: -1;
+display:none;
+</syntaxhighlight>
+:Dadurch rutscht es vor das ''amp-ad'' und ist erst mal nicht sichtbar.
+*Wenn eine Werbung gebucht, ausgeliefert und das ''amp-ad'' dadurch angezeigt wird, so erscheint mit folgendem Code auch die Anzeigenkennzeichnung:
+<syntaxhighlight lang="css">
+.iqampcenter > amp-ad:not([hidden]) + .iqadmarker {
+    display: table;
+}
+</syntaxhighlight>
+'''iqampcenter''' und '''iqadmarker''' sind natürlich nur Beispielnamen, die gerne durch bessere Bezeichnungen ersetzt werden können.
+==Zusammenfassung==
+Zur schnellen Übersicht hier noch einmal die verwendeten Code-Blöcke:
+===HTML-Struktur===
 <syntaxhighlight lang="html">
 <div class="iqampcenter" >
@@ Zeile 8: / Zeile 38: @@
 </div>
 </syntaxhighlight>
-*Das "iqadmarker"-<div> kommt im HTML-Code hinter das <amp-ad>-Tag
+===CSS===
-*Der umliegende <div>-Container "iqampcenter" bekommt zusätzlich das CSS "display: flex; flex-direction: column;"
+<syntaxhighlight lang="css">
-- Das "iqadmarker"-div bekommt den Stil "order: -1;display:none;" und rutscht dadurch vor das amp-ad, und ist erst mal nicht sichtbar.
+.iqampcenter {
-- Wenn eine Werbung gebucht wird und das amp-ad angezeigt wird, so wird mit folgendem Code auch die Anzeigenkennzeichnung sichtbar:
+    display: flex;
-.iqampcenter > amp-ad:not([hidden]) + .iqadmarker { display: table; }
+    flex-direction: column;
+}
-iqampcenter und iqadmarker sind natürlich nur Beispielnamen, die Ihr gerne durch bessere Bezeichnungen ersetzen könnt.
+.iqadmarker {
+    order: -1;
+    display:none;
+}
+.iqampcenter > amp-ad:not([hidden]) + .iqadmarker {
+    display: table;
+}
+</syntaxhighlight>
+[[Kategorie:Ad Technology]][[Kategorie:AMP]]
+[[en:AMP Ad labelling]]