تهران، سعادت آباد، خیابان کوهستان،
مجتمع کوهستان، سرو ۴، طبقه ۳ واحد ۲
۲۲۱۳۴۴۹۶ ۰۲۱
۳۶۶۶۸۳۲۸ ۰۲۶
info[at]web-city.ir
support[at]web-city.ir

چگونه با display:table-cell اسکرول افقی ایجاد نماییم

چگونه با display:table-cell اسکرول افقی ایجاد نماییم

از زمانی که اسکرول افقی را در برخی از وب سایت ها میبینیم, بسیاری از بازدیدکنندگان وب سایت و حتی طراحان وبسایت شگفت زده شده اند. خودمان هم شاید دقیقا ندانیم که چرا مجذوب چنین وب سایت هایی میشویم. شاید بیشتر ماها بگوییم که امروزه صفحات وب سایتی که اسکرول افقی دارند منسوخ و از رده خارج شده است.

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

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

کدهای مورد نیاز

<div class=“horizontal”>

<div class=“table”>

<article> <h3>Project Title</h3>

</article>

<!– Repeat this part as many times as necessary. –>

</div>

</div>

 

 

// table-layout: fixed does a lot of the magic, here. It makes sure that the “table cells” retain the pixel dimensions you want.
.table {
display: table;
table-layout: fixed;
width: 100%;
}

// Arranging your content inside the “cells” is as simple as using the vertical-align and text-align properties. Floats work, too.
article {
width: 400px;
height: 400px;
display: table-cell;
background: #e3e3e3;
vertical-align: middle;
text-align: center;
}

// Some styling for contrast.
article:nth-child(2n+2)
{
background: #d1d1d1;
}

آن را full screen نمایید

<div class=“horizontal”>

<div class=“table”>

<section>

<h1>Full-Screen Horizontal Layouts</h1>

<p>Made with <code>display: table-cell;</code></p>

<p>By Ezequiel Bruni</p>

</section>

<!– Repeat this part as necessary. –>

</div>

 htmlbody</div>

 

.Dont touch this part. It helps//

{ width: 100%;

height: 100%;

overflow: hidden; }

// In this case, I didnt want a scrollbar, so I used overflow: hidden. The container element is more essential than ever, though. The body element will not do. div.horizontal

{ display: block;

width: 100%;

height: 100%;

overflow: hidden;

position: static; }

} table.

display: table;

table-layout: fixed;

width: 100%;

height: 100%;

}

.table > section }

width: 1600px; // The width is based on my monitor. It’s replaced by jQuery anyway. Percentage widths do not work.

height: 100%;

display: table-cell;

background: #e3e3e3;

vertical-align: middle;

text-align: center;

} ()(window).load(function()$

;()var vWidth = $(window).width

;()var vHeight = $(window).height

;(‘.table > section’).css(‘width’, vWidth).css(‘height’, vHeight)$

;{(

} (window).resize(function()$

;()var vWidth = $(window).width

;()var vHeight = $(window).height

;(‘.table > section’).css(‘width’, vWidth).css(‘height’, vHeight)$

;({

اشتراک

مجید احدی

مجید احدی هستم‌،توسعه دهنده سایت،قبلا در زمینه دوربین های مداربسته فعالیت داشتم مدتی به کار در حوضه فناوری اطلاعات علاقه مند شدم در حال حاضر به عنوان توسعه دهنده سایت فعالیت میکنم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هفده + 9 =