Code für zwei schwebende Seitenleisten-Banner benötigt

Marktplatz
1

Ich brauche jemanden, der einen Code erstellt, der die beiden schwebenden Banner in den Seitenleisten der Desktop-Version meines Forums hinzufügt.

Screenshot_6
Screenshot_61919×955 177 KB

Ich kann 50 $ für diese Arbeit zahlen.

3 „Gefällt mir“
2

Ich biete an, was ich bisher ausgearbeitet habe,

es ist stückweise, unvollständig und für Bildbannern gedacht.

PNG
PNG932×484 191 KB

lässt sich aber auch für Text anpassen.

Das größte Problem im Moment ist die Bildschirmgröße; ihr seht @media screen and (max-width: 1800px),
wobei die Bilder für kleinere Bildschirme verkleinert werden.

Das reicht nicht aus und muss entweder für noch kleinere Bildschirme erweitert oder, was wahrscheinlicher ist, mit einem vollständigen automatischen Code erheblich verbessert werden.

Hoffentlich könnt ihr es zum Laufen bringen und euer 50 $ in die Urlaubsfreude von jemandem investieren.

Volle Offenlegung: Ich spiele keinen Programmierer im Fernsehen und war letzte Nacht auch nicht in einem Holiday Inn. So ist es nun einmal: eine Grundvorlage und ein Angebot zur Hilfe ohne Garantien. Ich habe das als Komponente für eine Website erstellt, auf der ich kein Plugin installieren kann.

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;}
}

Viel Erfolg.

5 „Gefällt mir“
3

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