321
Bearbeitungen
AMP Anzeigenkennzeichnung: Unterschied zwischen den Versionen
keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung Markierung: visualeditor-switched |
Keine Bearbeitungszusammenfassung Markierung: visualeditor-switched |
||
| Zeile 12: | Zeile 12: | ||
*Der umliegende ''div-Container'' "iqampcenter" bekommt zusätzlich das CSS-Styling: | *Der umliegende ''div-Container'' "iqampcenter" bekommt zusätzlich das CSS-Styling: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
display: flex; flex-direction: column; | display: flex; | ||
flex-direction: column; | |||
</syntaxhighlight> | </syntaxhighlight> | ||
*Das "iqadmarker"-''div'' bekommt das CSS-Styling: | *Das "iqadmarker"-''div'' bekommt das CSS-Styling: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
order: -1;display:none; | order: -1; | ||
display:none; | |||
</syntaxhighlight> | </syntaxhighlight> | ||
:Dadurch rutscht es vor das ''amp-ad'' und ist erst mal nicht sichtbar. | :Dadurch rutscht es vor das ''amp-ad'' und ist erst mal nicht sichtbar. | ||
| Zeile 25: | Zeile 27: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
'''iqampcenter''' und '''iqadmarker''' sind natürlich nur Beispielnamen, die gerne durch bessere Bezeichnungen ersetzt werden können. | '''iqampcenter''' und '''iqadmarker''' sind natürlich nur Beispielnamen, die gerne durch bessere Bezeichnungen ersetzt werden können. | ||
==Zusammenfassung== | |||
===HTML-Struktur=== | |||
<div class="iqampcenter" > | |||
<amp-ad … </amp-ad> | |||
<div class="iqadmarker">Anzeige</div> | |||
</div> | |||
===CSS=== | |||
<syntaxhighlight lang="css"> | |||
.iqampcenter { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.iqadmarker { | |||
order: -1; | |||
display:none; | |||
} | |||
.iqampcenter > amp-ad:not([hidden]) + .iqadmarker { | |||
display: table; | |||
} | |||
</syntaxhighlight> | |||