AMP Anzeigenkennzeichnung: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen
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>

Navigationsmenü