Annonces collantes avec HTML et CSS.

Aujourd’hui, la publicité numérique se développe à un rythme plus rapide. Par conséquent, de nombreux clients souhaitent vendre des annonces sur le site Web.

Que sont les publicités collantes ?

Les publicités collantes sont des publicités qui restent visibles pendant que l’utilisateur fait défiler le contenu de la page Web. Il existe deux types d’annonces collantes horizontales et verticales.

Annonces horizontales:

Ces annonces ont une vue paysage et sont principalement affichées en haut, au milieu et en bas de la page.

Annonces verticales :

These are portrait view ads and they're placed vertically on the sidebar of the webpage. When the user scrolls through the content, they stick to the webpage in the given position.

Annonces collantes avec HTML et CSS :

Avec l’aide de CSS position: sticky, nous pouvons créer des éléments collants sur une page Web. C’est un CSS très simple et direct.

Voici le code HTML et CSS pour les annonces verticales :

Code CSS :

Voici le lien jsfiddle pour les publicités verticales avec une démo fonctionnelle : https://jsfiddle.net/zkLw8ayd/9/

Parfois, les clients souhaitent que les publicités soient au milieu du contenu, nous devons donc créer des publicités horizontales (vue paysage).

Nous avons ici un code pour les annonces horizontales :

Code CSS pour les annonces horizontales :

Dans le code CSS supérieur, les publicités collantes au milieu du contenu ne fonctionnent pas. En effet, la plupart du temps, les débutants donnent la même hauteur aux éléments parent et enfant. Il n’y a donc plus de place pour la position collante. Ainsi, chaque fois que nous utilisons la position collante sur l’élément enfant, assurez-vous que le parent de l’enfant est plus grand que l’enfant. De sorte que cela donne à l’élément enfant la possibilité d’être collant à son parent.

CSS pour l’élément enfant imbriqué collant :

.p-static{
  position: static;
  padding: 100px 0;
  height:1000px;
}

Voici le lien CSS jsfiddle pour les annonces collantes de contenu d’élément Nested Child : https://jsfiddle.net/sdkf1qro/1/

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE

Aujourd’hui, la publicité numérique se développe à un rythme plus rapide. Par conséquent, de nombreux clients souhaitent vendre des annonces sur le site Web.

Que sont les publicités collantes ?

Les publicités collantes sont des publicités qui restent visibles pendant que l’utilisateur fait défiler le contenu de la page Web. Il existe deux types d’annonces collantes horizontales et verticales.

Annonces horizontales:

Ces annonces ont une vue paysage et sont principalement affichées en haut, au milieu et en bas de la page.

Annonces verticales :

These are portrait view ads and they're placed vertically on the sidebar of the webpage. When the user scrolls through the content, they stick to the webpage in the given position.

Annonces collantes avec HTML et CSS :

Avec l’aide de CSS position: sticky, nous pouvons créer des éléments collants sur une page Web. C’est un CSS très simple et direct.

Voici le code HTML et CSS pour les annonces verticales :

Code CSS :

Voici le lien jsfiddle pour les publicités verticales avec une démo fonctionnelle : https://jsfiddle.net/zkLw8ayd/9/

Parfois, les clients souhaitent que les publicités soient au milieu du contenu, nous devons donc créer des publicités horizontales (vue paysage).

Nous avons ici un code pour les annonces horizontales :

Code CSS pour les annonces horizontales :

Dans le code CSS supérieur, les publicités collantes au milieu du contenu ne fonctionnent pas. En effet, la plupart du temps, les débutants donnent la même hauteur aux éléments parent et enfant. Il n’y a donc plus de place pour la position collante. Ainsi, chaque fois que nous utilisons la position collante sur l’élément enfant, assurez-vous que le parent de l’enfant est plus grand que l’enfant. De sorte que cela donne à l’élément enfant la possibilité d’être collant à son parent.

CSS pour l’élément enfant imbriqué collant :

.p-static{
  position: static;
  padding: 100px 0;
  height:1000px;
}

Voici le lien CSS jsfiddle pour les annonces collantes de contenu d’élément Nested Child : https://jsfiddle.net/sdkf1qro/1/

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE