Need code for two floating sidebar banners

I need someone to create a code which ads the two floating banners in sidebars of the desktop version of my forum.

I can pay $50 for this job.

2 Likes

I’ll offer up what I’ve been working on,

its piecemeal, incomplete and being made for image banners

but can be changed for text

the biggest issue at the moment is screen size, you’ll see @media screen and (max-width: 1800px)
where the images shrink for a smaller screen

That’s not enough and will need to be either added to for even smaller screens or more likely can be vastly improved with a full auto code,

hopefully you can make it work and put your $50 towards someones holiday happiness

Full disclosure I do not play a computer programmer on TV and I did not stay at a Holiday Inn last night, this is what it is, a base template and an offer to help with no guarantees , I was doing this as a component for a site I can not do a plug-in on

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

<style>


</style>
</head>
<body>
<!-- left banner -->
<div class="sidenav1">
  <a href=
  "left banner link"
  target="_blank"><img width="270" height="648px" src=
  "left banner image"
  ></a>
</div>



<!-- right banner -->
<div class="sidenav2">
  <a href=
  "right banner link"
  target="_blank"><img width="270" height="648px" src=
  "right banner img"
 ></a>
</div>


</body>
Desktop CSS
/* left sidebar  */
.sidenav1 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px;
  position: fixed; 
  z-index: 1; 
  top: 100px; 
  left: 2em;
  background-color: transparent; 
  overflow-x: hidden; /* Disable horizontal scroll */
  //padding-top: 20px;
}

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

/* When you mouse over the navigation links, change their color */
.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;}
}




//////////



/* The sidebar menu */
.sidenav2 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px; 
  position: fixed; 
  z-index: 1;
  top: 100px;
  right: 2em;
  background-color: transparent;
  overflow-x: hidden; /* Disable horizontal scroll */
  //padding-top: 20px;
}

/* The navigation menu links */
.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;}
}

Good luck.

3 Likes