باکس با ارتفاع ثابت و رپانسیو

[نگار صادقی 1,025]

سلام. ببخشید از طرف یکتانت بهم پیام دادن که چون تبلیغات بعد از لود شدن مطالب سایت ، لود میشه باعث میشه که بعد از لود تبلیغات به یکباره  مطلب پایین میاد . حالا بهم پیام دادن که یه باکس ثابت درست کن که جای تبلیغات ، ثابت بمونه و دیگه بعد از لود تبلیغات ، مطلب یه دفه پایین نیاد و دست کاربر اتفاقی بخوره به تبلیغات.

حالا میشه کدی css بهم بدید که تبلیغات رو توی باکس با ارتفاع ثابت بزارم و توی نمایشگرهای مختلف هم به یه شکل نمایش داده بشه.

من این باکس رو به شکل زیر درست کردم ولی رسپانسیو نیست چون از صفت height استفاده کردم و ارتفاع توی کامیپوتر و موبایل فرق میکنه و به هم میریزه

  .yektanet { 
border: 1px solid green;
	height:450px;
	Padding: 10px;
	margin: 25px 
  } 

 

[b.soshiant 43]

سلام

ارتفاع رو باید درصدی بذارید

  .yektanet { 
	border: 1px solid green;
    width:100%;
	height:auto;
	Padding: 10px;
	margin: 25px;
  } 

 

[نگار صادقی 1,025]

ممنون اما از درصد استفاده میکنم ارتفاع ثابت نمیمونه

[b.soshiant 43]

در 3 ساعت قبل، نگار صادقی گفته است :

ممنون اما از درصد استفاده میکنم ارتفاع ثابت نمیمونه

اینم تست کنید:

  .yektanet { 
	border: 1px solid green;
    width:auto !important;
	height:auto !important;
	Padding: 10px;
	margin: 25px;
  } 

 

[نگار صادقی 1,025]

بابت راهنماییتون واقعا ممنون. اما انگار با باکس نمیشه انجام داد. من پیام دادم به یکتانت گفت برای رفع این مشکل یک placeholder قرار دهید.

اینو میتونید شما انجام بدید؟

[Feri 37]

در در ۱۴۰۱/۴/۲۹ در 18:16، نگار صادقی گفته است :

سلام. ببخشید از طرف یکتانت بهم پیام دادن که چون تبلیغات بعد از لود شدن مطالب سایت ، لود میشه باعث میشه که بعد از لود تبلیغات به یکباره  مطلب پایین میاد . حالا بهم پیام دادن که یه باکس ثابت درست کن که جای تبلیغات ، ثابت بمونه و دیگه بعد از لود تبلیغات ، مطلب یه دفه پایین نیاد و دست کاربر اتفاقی بخوره به تبلیغات.

حالا میشه کدی css بهم بدید که تبلیغات رو توی باکس با ارتفاع ثابت بزارم و توی نمایشگرهای مختلف هم به یه شکل نمایش داده بشه.

من این باکس رو به شکل زیر درست کردم ولی رسپانسیو نیست چون از صفت height استفاده کردم و ارتفاع توی کامیپوتر و موبایل فرق میکنه و به هم میریزه

  .yektanet { 
border: 1px solid green;
	height:450px;
	Padding: 10px;
	margin: 25px 
  } 

 

 

دوتا راه داره یا میتونید یه placeholder مستقل بزارید یا روی خود کد یکتانت اعمال کنید.

راه اول پیشنهادی: اعمال روی خود یکتانت:

تا جایی که من بررسی کردم جایگاه های تبلیغات بنری یکتانت با کلاس yn-bnr هست و وقتی بنرشون لود میشه یه کلاس اضافه میشه processed پس به این صورت css رو اعمال کنید. (بجای 90px ارتفاع مد نظر بنری که قراره لود بشه رو بزارید بنده پلیس هولدر رو 728-90 در نظر گرفتم)
اگرم از جایگاه همسان استفاده میکنید بررسی کنید با چه کلاسی هست و کد زیر رو تغییر بدید.

.yn-bnr {
    min-height: 90px !important;
}

.yn-bnr:not(.processed) {
    background-color: #f9f9f9;
    position: relative;
	max-width: 728px;
    min-height: 90px;
    margin: 5px auto !important;
    border-radius: 3px;
}
.yn-bnr:not(.processed):after {
    position: absolute;
    content: "جایگاه تبلیغات";
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(-50%);
    font-size: 18px;
    color: #adb2be;
}

 

راه دوم: (کد های یکتانت(جایگاه) رو درون یک div بزارید) و css اش به این صورت:(عدد 90 رو تغییر بدید با توجه به اندازه بنر)

<div class="ad-wrap">
  <div class="yn-bnr"></div>
</div> 

.ad-wrap {	
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.ad-wrap>div {
    display:inline-block!important;
    margin:1px !important;
    min-height: 90px;
    width:auto !important;
}

 

ویرایش شده 1 مرداد توسط Feri

[asadiy4n 2,767]

سلام @نگار صادقی

آدرس سایتتون رو به همراه یه اسکرین هم از بخش مربوطه قرار بدید