رفتن به مطلب

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


پست های پیشنهاد شده

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

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

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

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

 

لینک به ارسال

سلام

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

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

 

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

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

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

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

 

لینک به ارسال

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

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

لینک به ارسال
در در ۱۴۰۱/۴/۲۹ در 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;
}

 

ویرایش شده توسط Feri
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...