أحتاج إلى كود لشريطين جانبيين عائم

السوق
1

أحتاج إلى شخص لإنشاء كود يضيف شريطين عائمين في القوائم الجانبية للنسخة المكتبية من منتداي.

Screenshot_6
Screenshot_61919×955 177 KB

يمكنني دفع 50 دولارًا مقابل هذه المهمة.

3 إعجابات
2

سأعرض ما أعمل عليه،

إنه غير مكتمل ومجزأ، ومصمم لشعارات الصور

PNG
PNG932×484 191 KB

لكن يمكن تعديله ليناسب النصوص

أكبر مشكلة في الوقت الحالي هي حجم الشاشة، ستلاحظ @media screen and (max-width: 1800px)
حيث تتقلص الصور للشاشات الأصغر

هذا غير كافٍ وسيحتاج إما إلى إضافة دعم للشاشات الأصغر، أو الأرجح يمكن تحسينه بشكل كبير باستخدام كود تلقائي كامل،

آمل أن تتمكن من جعله يعمل وأن تذهب بمبلغ 50 دولارًا لدعم سعادة عطلة شخص ما

كشف كامل: أنا لا ألعب دور مبرمج كمبيوتر في التلفاز، ولم أقم بإقامة في فندق هوليداي إن الليلة الماضية. هذا ما هو عليه: قالب أساسي مع عرض للمساعدة دون ضمانات. كنت أقوم بذلك كعنصر لموقع لا يمكنني إضافة إضافة (plugin) إليه

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

<style>


</style>
</head>
<body>
<!-- left banner -->
<div class="sidenav1">
  <a href=
  "رابط الشريط الجانبي الأيسر"
  target="_blank"><img width="270" height="648px" src=
  "صورة الشريط الجانبي الأيسر"
  ></a>
</div>



<!-- right banner -->
<div class="sidenav2">
  <a href=
  "رابط الشريط الجانبي الأيمن"
  target="_blank"><img width="270" height="648px" src=
  "صورة الشريط الجانبي الأيمن"
 ></a>
</div>


</body>
CSS سطح المكتب 
/* الشريط الجانبي الأيسر  */
.sidenav1 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px;
  position: fixed; 
  z-index: 1; 
  top: 100px; 
  left: 2em;
  background-color: transparent; 
  overflow-x: hidden; /* تعطيل التمرير الأفقي */
  //padding-top: 20px;
}

/* روابط قائمة التنقل */
.sidenav1 a {
  //padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
  cursor:url("my custom"), default;
}

/* عند تمرير الماوس فوق روابط التنقل، تغيير لونها */
.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;}
}



//////////



/* قائمة الشريط الجانبي */
.sidenav2 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px; 
  position: fixed; 
  z-index: 1;
  top: 100px;
  right: 2em;
  background-color: transparent;
  overflow-x: hidden; /* تعطيل التمرير الأفقي */
  //padding-top: 20px;
}

/* روابط قائمة التنقل */
.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.