Besoin de code pour deux bannières latérales flottantes

Marché
1

J’ai besoin que quelqu’un crée un code qui ajoute deux bannières flottantes dans les barres latérales de la version bureau de mon forum.

Screenshot_6
Screenshot_61919×955 177 KB

Je peux payer 50 $ pour ce travail.

3 « J'aime »
2

Je vous propose ce sur quoi je travaille,

C’est fragmenté, incomplet et conçu pour des bannières d’images

PNG
PNG932×484 191 KB

mais peut être adapté pour du texte

Le plus gros problème actuellement est la taille de l’écran, vous verrez @media screen and (max-width: 1800px)
où les images rétrécissent pour les petits écrans

Ce n’est pas suffisant et il faudra soit ajouter des règles pour des écrans encore plus petits, ou plus probablement, l’améliorer considérablement avec un code entièrement automatique,

J’espère que vous pourrez le faire fonctionner et mettre vos 50 $ au service du bonheur des vacances de quelqu’un

Pour être tout à fait honnête, je ne joue pas à un informaticien à la télévision et je n’ai pas séjourné à un Holiday Inn hier soir, c’est ce que c’est, un modèle de base et une offre d’aide sans garanties, je faisais cela comme un composant pour un site sur lequel je ne peux pas installer un plug-in

HTML 
<!DOCTYPE html>
<html>
<head>

<style>


</style>
</head>
<body>
<!-- bannière gauche -->
<div class="sidenav1">
  <a href=
  "lien bannière gauche"
  target="_blank"><img width="270" height="648px" src=
  "image bannière gauche"
  ></a>
</div>



<!-- bannière droite -->
<div class="sidenav2">
  <a href=
  "lien bannière droite"
  target="_blank"><img width="270" height="648px" src=
  "image bannière droite"
 ></a>
</div>


</body>
CSS Bureau 
/* barre latérale gauche  */
.sidenav1 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px;
  position: fixed; 
  z-index: 1; 
  top: 100px; 
  left: 2em;
  background-color: transparent; 
  overflow-x: hidden; /* Désactiver le défilement horizontal */
  //padding-top: 20px;
}

/* Liens du menu de navigation */
.sidenav1 a {
  //padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
  cursor:url("my custom"), default;
}

/* Lorsque vous survolez les liens de navigation, changez leur couleur */
.sidenav1 a:hover {
  color: #f1f1f1;
}






@media screen and (max-width: 1800px) {
  .sidenav1 {left: 3.5em;}
  .sidenav1 a {font-size: 18px;}
  .sidenav1 img {width: 70%;}
  .sidenav1 img {height: auto;}
}




//////////



/* Le menu de la barre latérale */
.sidenav2 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px; 
  position: fixed; 
  z-index: 1;
  top: 100px;
  right: 2em;
  background-color: transparent;
  overflow-x: hidden; /* Désactiver le défilement horizontal */
  //padding-top: 20px;
}

/* Liens du menu de navigation */
.sidenav2 a {
  //padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
  cursor:url("my custom"), default;
}


.sidenav2 a:hover {
  color: #f1f1f1;
}




@media screen and (max-width: 1800px) {
  .sidenav2 {right: -2em;}
  .sidenav2 a {font-size: 18px;}
  .sidenav2 img {width: 70%;}
  .sidenav2 img {height: auto;}
}

Bonne chance.

5 « J'aime »
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.