2 つのフローティングサイドバーバナーのコードが必要です

マーケットプレイス
1

フォーラムのデスクトップ版のサイドバーに、2 つのフローティングバナーを追加するコードを作成してくれる方を探しています。

Screenshot_6
Screenshot_61919×955 177 KB

この作業に対して 50 ドルのお支払いが可能です。

「いいね！」 3
2

私が取り組んでいるものを提案させていただきます。

これは断片的で未完成であり、画像バナー用に作成されています。

PNG
PNG932×484 191 KB

ただし、テキスト用に変更することも可能です。

現時点での最大の課題は画面サイズです。@media screen and (max-width: 1800px)をご覧いただければわかるように、画像はより小さな画面に合わせて縮小されます。

これだけでは不十分であり、さらに小さな画面に対応するために追加が必要か、あるいはフルオートコードによって大幅に改善できるでしょう。

うまく機能させて、あなたの50ドルを誰かの休暇の幸せに役立てていただければ幸いです。

完全な開示として、私はテレビでコンピュータプログラマーを演じているわけでも、昨夜ホリデイ・インに泊まったわけでもありません。これはそのものです。ベーステンプレートであり、保証なしにサポートを提供する提案です。これは、プラグインとして機能しないサイトのコンポーネントとして作成したものです。

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

幸運を祈ります。

「いいね！」 5
3

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