Tween

برای طراحی یک وب‌سایت سرگرمی، عبارت joke رو در Google Images جستجو کردم تا به عکسی با عنوان Ill Never Get It رسیدم. ایده‌ی اولیه، ساخت قالبی است که بشود افقی پیمایشش کرد. منتهی این تصویر باید به پایین پنجره مرورگر می‌چسبید (پایین صفحه مرورگر صخره و بالا، آسمان). تکنیک‌ استفاده شده به این صورت هست:

[html]
<div id="wrapper">

<div id="content">
<div class="content first">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content last">
</div>
</div> <!– #content –>

</div><!– #wrapper –>
[/html]

و شیوه‌نامه:

[css]
#wrapper {
position: absolute;
right: 0; bottom: 0;
height: 767px; width: 100%;
}

#content {
background: url(images/bg.png) repeat-x right center;
width: 4000px; height: 767px;
text-align: justify;
color: #d1c9a9;
}
[/css]

#wrapper با position:absolute و bottom:0 به پایین صفحه می‌چسبونیم. با width:100% طولش رو به اندازه عرض پنجره مرورگر تنظیم می‌کنیم. درون این یه div دیگه با شناسه #content هست. طول این با width: 4000px به اندازه مورد نیاز تنظیم شده و اون تصویر اولیه به عنوان تصویر پس‌زمینه به این یکی داده می‌شه. الان هم به پایین صفحه چسبیده و هم می‌شه افقی پیمایش کرد. این شیوه در هر سه مرورگر Opera, FF, IE بدون مشکل کار می‌کنه، در کروم (من از نسخه ۰٫۴ استفاده می‌کنم، شاید در نسخه‌های جدید اصلاح شده باشه) اگه تگ html خاصیت dir=rtl داشته باشه (یعنی سند راست به چپ باشه) خود نوار پیمایش حذف می‌شه ولی اگه چپ به راست باشه این مشکل وجود نداره.
من در این‌جا برای تنظیم مکان جعبه‌هایی که قراره محتوا رو نگه‌دارند (.content) از float استفاده کردم ولی می‌شه مکان اون‌ها رو با position:absolute و یا relative در مکان دلخواه قرار داد.

مشاهده دمو - دریافت فایل