부유하는 사이드바 배너 2개에 대한 코드가 필요합니다

[steelmaiden]

데스크톱 버전 포럼의 사이드바에 두 개의 플로팅 배너를 추가하는 코드를 작성해 줄 사람이 필요합니다.

이 작업에 대해 50달러를 지불할 수 있습니다.

[anon48433008]

제가 작업해 온 내용을 공유해 보겠습니다.

조각조각 모여 있고, 완성되지 않았으며, 이미지 배너용으로 만들어졌지만

텍스트용으로 변경할 수도 있습니다.

현재 가장 큰 문제는 화면 크기입니다. @media screen and (max-width: 1800px)
에서 화면이 작아지면 이미지가 축소되는 것을 볼 수 있습니다.

그것만으로는 충분하지 않으며, 더 작은 화면을 위해 추가해야 하거나, 더 가능성이 높은 것은 완전 자동화 코드를 통해 크게 개선할 수 있을 것입니다.

부디 작동하도록 만들어 주시고, 그 $50으로 누군가의 휴가 행복에 보태 주시길 바랍니다.

솔직히 말씀드리면, 저는 TV에서 컴퓨터 프로그래머 역할을 하는 사람이 아니며, 지난밤에 Holiday Inn에 머물렀던 것도 아닙니다. 이것은 바로 이것입니다, 플러그인을 설치할 수 없는 사이트의 컴포넌트로 사용하려고 했던 기본 템플릿과 보증 없이 도움을 드리는 제안입니다.

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

행운을 빕니다.