آشنایی با CSS Layout — آموزش CSS (بخش بیست و پنجم)

در این مقاله به جمع‌بندی برخی قابلیت‌های CSS برای لی‌آوت صفحه‌های وب که در چند بخش اخیر از این سری مقالات آموزشی مطرح شدند، خواهیم پرداخت. این موارد شامل مقادیر مختلف Display و معرفی برخی مفاهیم مهم مطرح‌شده مرتبط با CSS Layout است. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:

• فونت وب در CSS — آموزش CSS (بخش بیست و چهارم)

تکنیک‌های لی‌آوت صفحه در CSS به ما امکان می‌دهند که عناصر موجود در یک صفحه وب را انتخاب کرده محل قرارگیری آن‌ها را در رابطه با گردش نرمال لی‌آوت، دیگر عناصر پیرامونی، کانتینر والد یا ویوپورت/پنجره اصلی تعیین کنیم. در این مقاله به تفصیل در مورد تکنیک‌های لی‌آوت صفحه به شرح زیر صحبت خواهیم کرد:

• گردش نرمال
• مشخصه display
• Flexbox
• Grid
• Floats
• موقعیت‌یابی
• لی‌آوت جدول
• لی‌آوت چندستونی

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

• آموزش CSS Grid — گام به گام، کاربردی و پروژه محور

گردش نرمال

گردش نرمال به شیوه قرارگیری پیش‌فرض اجزای صفحه HTML از سوی مرورگر در صورت عدم وجود لی‌آوت برای کنترل صفحه گفته می‌شود.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

به مثال HTML زیر توجه کنید:

1<p>I love my cat.</p>
2    
3<ul>
4  <li>Buy cat food</li>
5  <li>Exercise</li>
6  <li>Cheer up friend</li>
7</ul>
8    
9<p>The end!</p>

به صورت پیش‌فرض، مرورگر این کد را به صورت زیر نمایش خواهد داد:

توجه داشته باشید که HTML دقیقاً همان طور که در سورس کد بود نمایش یافته است و عناصر روی همدیگر قرار گرفته‌اند. ابتدا پاراگراف اول و سپس لیست نامرتب و در ادامه پاراگراف دوم آمده است.

این عناصر که یکی پس از دیگری در صفحه نمایش می‌یابند، به عنوان «عناصر بلوکی» (Block Elements) خوانده می‌شوند. در سوی دیگر «عناصر درون‌خطی» (Inline Elements) قرار دارند که همانند کلمات در یک پاراگراف، ‌در کنار هم قرار می‌گیرند‌.

نکته: جهت قرارگیری محتوای عناصر بلوکی به صورت «جهت بلوک» (Block Direction) توصیف می‌شود. جهت بلوک در زبان‌هایی مانند انگلیسی که روش نگارش افقی دارند، به صورت عمودی است. اما در زبان‌هایی مانند ژاپنی که شیوه نگارش عمودی دارند، ‌جهت بلوک به صورت افقی است. «جهت درون‌خطی» (Inline Direction) متناظر نیز به توصیف شیوه قرارگیری محتوای درون‌خطی گفته می‌شود.

زمانی که از CSS برای ایجاد یک لی‌آوت استفاده می‌کنیم، ‌عناصر دیگر دارای گردش نرمال نیستند، اما گردش نرمال برای اغلب عناصر صفحه دقیقاً مطابق نیاز ما خواهد بود. به همین جهت است که کار خود را با درک مناسبی از سند HTML خوش-ترکیب آغاز می‌کنیم، چون به این ترتیب می‌توانیم به جای جنگیدن با روش طرح‌بندی پیش‌فرض، آن را به خدمت بگیریم.

متدهایی که می‌توانند شیوه قرارگیری عناصر را در CSS تغییر دهند، به شرح زیر هستند:

• مشخصه display – مقادیر استاندارد از قبیل block ،inline یا inline-block می‌توانند شیوه رفتار عناصر را در گردش نرمال تغییر دهند. همچنین متدهای لی‌آوت کلی را داریم که از طریق یک مقدار display برای مثال برای CSS Grid و Flexbox فعال می‌شوند.
• Floats – اعمال یک مقدار Float مانند left ممکن است موجب شود که عناصر سطح بلوکی در راستای یک سمت عنصر قرار گیرند. این وضعیت را گاهی اوقات در چیدمان صفحه‌های مجلات در زمان حروف‌چینی کلمات پیرامون تصاویر می‌بینیم.
• مشخصه position – این مشخصه به ما امکان می‌دهد که قرارگیری کادرها را درون کادرهای دیگر به دقت کنترل کنیم. موقعیت‌یابی static در گردش نرمال حالت پیش‌فرض دارد، اما می‌توانیم کاری کنیم که عناصر با استفاده از مقادیر دیگر به شیوه متفاوتی قرار گیرند. برای نمونه همواره در گوشه بالا-چپ ویوپورت مرورگر قرار گیرند.
• لی‌آوت جدول – این قابلیت‌ها برای استایل‌بندی به بخش‌های جدول HTML طراحی شده‌اند و می‌توانند برای عناصر غیر جدولی نیز با استفاده از display: table و مشخصه‌های مرتبط استفاده شوند.
• لی‌آوت چندستونی – مشخصه‌های لی‌آوت چندستونی می‌توانند تقسیم محتوای یک بلوک به چند ستون شوند. این وضعیتی است که معمولاً در روزنامه‌ها می‌بینیم.

مشخصه display

متدهای اصلی برای دست‌یابی به لی‌آوت صفحه در CSS شامل همه مقادیر ممکن برای مشخصه display هستند. این مشخصه به ما امکان می‌دهد که روش پیش‌فرض نمایش موارد مختلف را تغییر دهیم. همه مواردی که در گردش نرمال قرار دارند، این مشخصه display را ارائه می‌کنند و به عنوان روش پیش‌فرض تعیین رفتار عناصر مورد استفاده قرار می‌گیرد. برای نمونه این واقعیت که پاراگراف‌ها در زبان انگلیسی زیر همدیگر نمایش می‌یابند ناشی از این واقعیت است که با استفاده از مشخصه display: block تنظیم می‌شوند. اگر یک لینک پیرامون متنی درون پاراگراف ایجاد کنید، این لینک به همراه بقیه متن به صورت درون‌خطی خواهد بود و به خط جدیدی نمی‌‌رود. دلیل این امر آن است که عنصر <a> به صورت پیش‌فرض دارای مشخصه display: inline است.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

البته این رفتار نمایش پیش‌فرض را می‌توان تغییر داد. برای نمونه عنصر <li> به صورت پیش‌فرض دارای مشخصه display: block است، یعنی آیتم‌های لیست زیر همدیگر در یک سند به زبان انگلیسی قرار می‌گیرند. اگر مقدار این مشخصه را به inline تغییر دهیم، این موارد در کنار همدیگر نمایش می‌یابند، یعنی مانند کلمات یک جمله قرار خواهند گرفت. این واقعیت که می‌توانید مقدار display را روی هر عنصر تغییر دهید، به این معنی است که می‌توانید عناصر HTML را برای مفهوم معناشناختی‌شان انتخاب کنید و دیگر لازم نیست در مورد طرز کار آن‌ها نگران باشید. شما فقط شیوه نمایش آن‌ها را تغییر می‌دهید.

علاوه بر این که می‌توانیم ارائه پیش‌فرض را با تبدیل از حالت بلوکی به درون‌خطی عوض کنیم، برخی متدهای لی‌آوت بزرگ‌تر نیز وجود دارند که با تعیین مقدار display آغاز می‌شوند. با این حال، در زمان استفاده از این متدها احتمالاً باید برخی مشخصه‌های اضافی را فراخوانی کنید. دو مقدار display: flex و display: grid برای بررسی لی‌آوت‌ها مهم هستند.

Flexbox

Flexbox نام اختصاری برای ماژول Flexible Box Layout است که به منظور تسهیل لی‌آوت تک‌بعدی عناصر چه به صورت ردیفی یا ستونی طراحی شده است. برای استفاده از Flexible باید مشخصه display: flex را روی عنصر والد یا عناصری که می‌خواهید لی‌آوت‌بندی کنید و همه فرزندان آن استفاده کنید تا به آیتم‌های flex تبدیل شوند. این وضعیت را با یک مثال ساده بررسی می‌کنیم.

فیلم آموزش طراحی واکنش گرا با گرید و فلکس باکس Grid و Flexbox در CSS در فرادرس

کلیک کنید

نشانه‌گذاری HTML زیر یک عنصر محیط با کلاس wrapper در اختیار ما قرار می‌دهد که درون آن سه عنصر <div> قرار دارند. به صورت پیش‌فرض این عناصر در زبان انگلیسی به صورت عناصر بلوکی و زیر همدیگر هستند.

با این حال، اگر مشخصه display: flex را به والد اضافه کنیم، این سه آیتم به صورت ستونی درمی‌آیند. دلیل این مسئله آن است که به آیتم‌های flex تبدیل می‌شوند که تحت تأثیر برخی مقادیر اولیه‌ی مجموعه‌های flexbox هستند که روی کانتینر اعمال شده است. این عناصر در یک ردیف نمایش می‌یابند، زیرا مقدار اولیه flex-direction که روی والد تعیین شده به صورت row است. همه این موارد طوری کشیده می‌شوند که ارتفاع آن‌ها به اندازه طولانی آیتم باشد، زیرا مقدار اولیه مشخصه align-items روی والدشان به صورت stretch تعیین شده است. این بدان معنی است که آیتم‌ها تا ارتفاع کانتینر flex کشیده می‌شوند که در این مورد بر اساس ارتفاع بلندترین آیتم تعریف شده است. این آیتم‌ها همگی در ابتدای کانتینر به خط می‌شوند و فضای اضافی در انتهای ردیف پدید می‌آید.

1.wrapper {
2  display: flex;
3}

1<div class="wrapper">
2  <div class="box1">One</div>
3  <div class="box2">Two</div>
4  <div class="box3">Three</div>
5</div>

علاوه بر مشخصه‌های فوق که می‌توانند روی کانتینر flex اعمال شود، برخی مشخصه‌ها نیز هستند که می‌توانند روی آیتم‌های flex اعمال شوند. این مشخصه‌ها علاوه بر موارد دیگر می‌توانند روش نمایش آیتم‌های flex را تغییر دهند و به آن‌ها امکان بسط یافتن و یا فشرده شدن در فضای موجود را می‌دهند.

به عنوان یک مثال ساده از این وضعیت، می‌توانیم مشخصه flex را به همه آیتم‌های فرزند با مقدار 1 اضافه کنیم. این امر موجب خواهد شد که همه آیتم‌ها بزرگ شوند و کانتینر را اشغال کنند و دیگر فضایی در انتهای آن باقی نمی‌ماند. به علاوه، اگر عنصر دیگری به markup اضافه کنید، آیتم‌ها نازک‌تر ‌می‌شوند. همچنین اگر عنصر دیگری به markup اضافه کنید، آیتم‌ها کوچک‌تر می‌شوند تا فضا برای آن ایجاد شود. در هر صورت آن‌ها طوری تنظیم می‌شوند که فضای یکسانی برای همه عنصر وجود داشته باشد.

1.wrapper {
2    display: flex;
3}
4
5.wrapper > div {
6    flex: 1;
7}

1<div class="wrapper">
2    <div class="box1">One</div>
3    <div class="box2">Two</div>
4    <div class="box3">Three</div>
5</div>

توجه کنید که این توضیحات در مورد Flexbox بسیار مختصر بود. برای کسب اطلاعات بیشتر پیشنهاد می‌کنیم به مطلب زیر مراجعه کنید:

• آموزش طراحی واکنش‌گرا با Grid و Flexbox در CSS

لی‌آوت شبکه‌ای

Flexbox برای لی‌آوت یک‌بعدی طراحی شده است، اما «لی‌آوت شبکه‌ای» (Grid Layout) برای دو بُعد طراحی شده است تا همه چیز در ردیف‌ها و ستون‌ها قرار گیرد.

در این مورد نیز می‌توانید با تعیین یک مقدار خاص برای مشخصه display به صورت display: grid آن را فعال کنید. در مثال زیر از markup مشابه مثال Flex فوق استفاده کرده‌ایم و یک کانتینر با برخی عناصر فرزند وجود دارند. به علاوه برای استفاده از display: grid اقدام به تعریف برخی ردیف‌ها و ستون‌ها در والد به ترتیب با استفاده از مشخصه‌های grid-template-rows و grid-template-columns می‌کنیم. این سه ستون هر کدام با 1fr و دو ردیف با 100px تعریف شده‌اند. نیازی به درج هیچ قاعده‌ای برای عناصر فرزند وجود ندارد، چون آن‌ها به صورت خودکار در سلول‌های شبکه‌ای که ایجاد کرده‌ایم، قرار می‌گیرند.

1.wrapper {
2    display: grid;
3    grid-template-columns: 1fr 1fr 1fr;
4    grid-template-rows: 100px 100px;
5    grid-gap: 10px;
6}

1<div class="wrapper">
2    <div class="box1">One</div>
3    <div class="box2">Two</div>
4    <div class="box3">Three</div>
5    <div class="box4">Four</div>
6    <div class="box5">Five</div>
7    <div class="box6">Six</div>
8</div>

زمانی که یک شبکه به دست آوردیم، می‌توانیم آیتم‌ها را به صورت صریح در آن قرار دهیم و دیگر نیازی به استفاده از رفتار قرارگیری خودکار که در بخش قبل دیدیم وجود ندارد. در مثال دوم زیر همان شبکه را تعریف کرده‌ایم، اما این بار سه آیتم فرزند داریم. آغاز و پایان خط هر آیتم را با استفاده از مشخصه‌های grid-column و grid-row تعیین می‌کنیم. این امر موجب می‌شود که آیتم‌ها چندین track را اشغال کنند.

1.wrapper {
2    display: grid;
3    grid-template-columns: 1fr 1fr 1fr;
4    grid-template-rows: 100px 100px;
5    grid-gap: 10px;
6}
7
8.box1 {
9    grid-column: 2 / 4;
10    grid-row: 1;
11}
12
13.box2 {
14    grid-column: 1;
15    grid-row: 1 / 3;
16}
17
18.box3 {
19    grid-row: 2;
20    grid-column: 3;
21}

1<div class="wrapper">
2    <div class="box1">One</div>
3    <div class="box2">Two</div>
4    <div class="box3">Three</div>
5</div>

این دو مثال که در این بخش ارائه کردیم، صرفاً بخش کوچکی از امکانات لی‌آوت شبکه‌ای را نشان می‌دهند. برای کسب اطلاعات بیشتر در این خصوص پیشنهاد می‌کنیم به آموزش زیر مراجعه کنید:

• آموزش طراحی واکنش‌گرا با Grid و Flexbox در CSS

در ادامه این راهنما به بررسی روش‌های دیگر لی‌آوت می‌پردازیم که اهمیت کمتری برای ساختارهای لی‌آوت اصلی صفحه دارند، اما همچنان برای دستیابی به نتایج خاص ضروری هستند. با درک ماهیت هر وظیفه لی‌آوت، به زودی متوجه می‌شوید که وقتی مشغول بررسی یک کامپوننت خاص طراحی هستید، می‌توانید بهترین لی‌آوت را برای آن به راحتی پیدا کنید.

Float-ها

«شناور» (Float) کردن یک عنصر موجب تغییر یافتن رفتار آن عنصر و عناصر سطح بلوکی پس از آن در گردش نرمال می‌شود. به این ترتیب عنصر به سمت چپ یا راست گردش نرمال جابجا می‌شود و محتوای پیرامونی در کنار آیتم Float-شده شناور می‌شود.

فیلم آموزش طراحی وب با سی اس اس CSS3 – تکمیلی در فرادرس

کلیک کنید

مشخصه Float دارای چهار مقدار ممکن است:

• Left – عنصر را در سمت چپ شناور می‌کند.
• right – عنصر را در سمت راست شناور می‌کند.
• None – عدم شناوری را مشخص می‌کند و مقدار پیش‌فرض است.
• inherit – مشخص می‌کند که مقدار مشخصه float باید از عنصر والد آن عنصر به ارث برسد.

در مثال زیر یک <div> را در سمت چپ شناور می‌کنیم و یک margin در سمت راست آن قرار می‌دهیم تا متن از عنصر دور شود. بدین ترتیب جلوه خاصی به صورت قرارگیری متن در پیرامون کار حاصل می‌شود و اغلب مواردی که باید در مورد float-ها در طراحی وب مدرن بدانید را شامل می‌شود.

1<h1>Simple float example</h1>
2    
3<div class="box">Float</div>
4    
5<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

1.box {
2    float: left;
3    width: 150px;
4    height: 150px;
5    margin-right: 30px;
6}

تکنیک‌های موقعیت‌یابی

«موقعیت‌یابی» (Positioning) به ما امکان می‌دهد که یک عنصر را از محلی که در گردش نرمال باید قرار گیرد، به محل دیگری جابجا کنیم. موقعیت‌یابی روشی برای ایجاد لی‌آوت‌های اصلی صفحه نیست، بلکه در وب مدرن برای مدیریت و تنظیم دقیق موقعیت آیتم‌های خاص روی صفحه استفاده می‌شود.

با این حال، تکنیک‌های مفیدی برای الگوهای لی‌آوت خاص وجود دارد که از مشخصه position استفاده می‌کنند. درک موقعیت‌یابی به درک بهتر گردش نرمال و این که چرا باید برخی آیتم‌ها را از گردش نرمال خارج کنیم، نیز کمک می‌کند.

پنج نوع موقعیت‌یابی وجود دارند که باید بشناسیم:

• موقعیت‌یابی استاتیک (Static positioning) – نوع پیش‌فرض است که هر عنصر دارد. این نوع موقعیت‌یابی صرفاً به این معنی است که عنصر باید در موقعیت نرمال روی صفحه قرار گیرد و نکته خاصی ندارد.
• موقعیت‌یابی نسبی (Relative positioning)‌ – امکان تغییر دادن موقعیت عنصر را روی صفحه فراهم می‌سازد. در این روش، عنصر نسبت به موقعیتش در گردش نرمال جابجا می‌شود که شامل ایجاد همپوشانی با دیگر عناصر روی صفحه است.
• موقعیت‌یابی مطلق (Absolute positioning) – عنصر را به صورت کامل خارج از گردش نرمال صفحه جابجا می‌کند. برای مثال با استفاده از این روش می‌توان یک عنصر را در لایه مجزایی قرار داد. بدین ترتیب می‌توان آن را در یک موقعیت نسبی، نسبت به لبه‌های عنصر <html> صفحه، ثابت کرد. این شیوه موقعیت‌یابی برای ایجاد جلوه‌های لی‌آوت پیچیده، مانند کادرهای زبانه‌دار که بخش‌های مختلف محتوایی روی همدیگر قرار می‌گیرند و بنا به تقاضا پنهان یا نمایان می‌شوند، یا بخش‌های اطلاعاتی که به صورت پیش‌فرض خارج از صفحه قرار می‌گیرند، اما می‌توانند با استفاده از یک دکمه به درون صفحه بلغزند، استفاده کرد.
• موقعیت‌یابی ثابت (Fixed positioning) – بسیار مشابه موقعیت‌یابی مطلق است، به جز این که یک عنصر را نسبت به ویوپورت مرورگر ثابت می‌کند و نه عنصر خاص. این موقعیت‌یابی برای ایجاد جلوه‌هایی مانند یک منوی ناوبری دائمی که علی‌رغم جابجایی همه عناصر و اسکرول محتوا، همواره در مکان ثابتی روی صفحه قرار می‌گیرد، مفید است.
• موقعیت‌یابی چسبان (Sticky positioning) – یک روش موقعیت‌یابی جدید است که موجب می‌شود عنصر مانند position: static عمل کند، تا این که به یک فاصله از ویوپورت برسد که در آن به صورت position: fixed درمی‌آید.

بررسی یک مثال ساده موقعیت‌یابی

در این بخش برای این که با این تکنیک‌های لی‌آوت صفحه بیشتر آشنا شوید، چند مثال کوچک را بررسی می‌کنیم. مثال‌های ما همیشه نشان‌دهنده HTML زیر هستند:

1<h1>Positioning</h1>
2
3<p>I am a basic block level element.</p>
4<p class="positioned">I am a basic block level element.</p>
5<p>I am a basic block level element.</p>

این HTML به صورت پیش‌فرض با استفاده از CSS زیر استایل‌بندی می‌شود:

1body {
2  width: 500px;
3  margin: 0 auto;
4}
5
6p {
7    background-color: rgb(207,232,220);
8    border: 2px solid rgb(79,185,227);
9    padding: 10px;
10    margin: 10px;
11    border-radius: 5px;
12}

خروجی رندر شده به صورت تصویر زیر است:

موقعیت‌یابی نسبی

موقعیت‌یابی نسبی امکان تعیین یک آفست برای آیتم از گردش نرمال فراهم می‌کند که به صورت پیش‌فرض خواهد داشت. این بدان معنی است که می‌توانید وظیفه‌ای مانند جابجایی اندک یک آیکون به سمت پایین برای همتزار شدن با برچسب متنی را به سادگی انجام دهید. به این منظور می‌توانید قاعده زیر را برای افزودن موقعیت‌یابی نسبی اضافه کنید:

1.positioned {
2  position: relative;
3  top: 30px;
4  left: 30px;
5}

در کد فوق، پاراگراف میانی یک مقدار relative برای مشخصه position دارد که خودش کار خاصی انجام نمی‌دهد، بنابراین مشخصه‌های left و right را اضافه می‌کنیم. بدین ترتیب عنصر متأثر به سمت پایین و راست جابجا می‌شود، هر چند این وضعیت باشد برخلاف انتظار باشد. اما باید این وضعیت را به این صورت تصور کنید که عنصر از سمت بالا و چپ هل داده می‌شود و در نتیجه به سمت پایین و راست حرکت می‌کند. افزودن کد فوق نتیجه زیر را ایجاد می‌کند:

1.positioned {
2  position: relative;
3  background: rgba(255,84,104,.3);
4  border: 2px solid rgb(255,84,104);
5  top: 30px;
6  left: 30px;
7}

موقعیت‌یابی مطلق

موقعیت‌یابی مطلق برای حذف کامل یک عنصر از گردش نرمال استفاده می‌شود و آن را با استفاده از آفست‌ها در فاصله‌ای از لبه‌های بلوک محیط قرار می‌دهد. اگر به مثال غیر موقعیت‌یابی‌شده اولیه خود بازگردیم، می‌توانیم قاعده CSS زیر را برای پیاده‌سازی موقعیت‌یابی مطلق بنویسیم:

1.positioned {
2  position: absolute;
3  top: 30px;
4  left: 30px;
5}

در اینجا به مشخصه position پاراگراف میانی یک مقدار absolute می‌دهیم و از همان مشخصه‌های top و left قبلی استفاده می‌کنیم. با این حال، با افزودن این کد، نتیجه زیر حاصل می‌شود:

1.positioned {
2    position: absolute;
3    background: rgba(255,84,104,.3);
4    border: 2px solid rgb(255,84,104);
5    top: 30px;
6    left: 30px;
7}

این نتیجه بسیار متفاوت از نتیجه قبلی است! عنصر موقعیت‌یابی‌شده، اکنون کاملاً از بقیه صفحه جدا شده است و روی بقیه عناصر قرار گرفته است. دو پاراگراف دیگر اکنون در صورتی که هم‌نیای آن‌ها وجود نمی‌داشت، در کنار هم قرار می‌گرفتند. مشخصه‌های top و left تأثیر متفاوتی روی عناصر با موقعیت مطلق نسبت به عناصر با موقعیت نسبی دارند. در این حالت، آفست‌ها از سمت بالا و چپ صفحه محاسبه می‌شود. امکان تغییر عنصر والد که موجب ایجاد این کانتینر می‌شود، وجود دارد و در بخش‌های بعدی این سری مقالات این موضوعات را بررسی خواهیم کرد.

موقعیت‌یابی ثابت

موقعیت‌یابی ثابت موجب حذف عنصر از گردش سند به همان روش موقعیت‌یابی مطلق می‌شود. با این حال، به جای این که آفست‌ها روی کانتینر اعمال شو‌ند، مستقیماً روی ویوپورت اعمال می‌شوند. زمانی که آیتم در رابطه با ویوپورت در مکان ثابتی بماند، می‌توانیم جلوه‌هایی مانند یک منو که در زمان اسکرول شدن صفحه در مکان ثابتی روی صفحه باقی می‌ماند بسازیم.

در این مثال، HTML شامل سه پاراگراف متنی است تا امکان اسکرول صفحه فراهم شود. همچنین یک کادر وجود دارد که مشخصه position: fixed روی آن تنظیم شده است:

1<h1>Fixed positioning</h1>
2
3<div class="positioned">Fixed</div>
4
5<p>Paragraph 1.</p>
6<p>Paragraph 2.</p>
7<p>Paragraph 3.</p>

1.positioned {
2    position: fixed;
3    top: 30px;
4    left: 30px;
5}

موقعیت‌یابی چسبان

موقعیت‌یابی چسبان آخرین روش موقعیت‌یابی است که بررسی می‌کنیم. این روش ترکیبی از موقعیت‌یابی استاتیک و ثابت است. زمانی که آیتمی دارای مشخصه position: sticky باشد، در گردش نرمال، اسکرول می‌شود تا این که به یک آفست تعیین‌شده از ویوپورت برسد. در این نقطه عنصر به محل تعیین شده می‌چسبد، طوری که گویی مشخصه position: fixed اعمال شده است.

1.positioned {
2  position: sticky;
3  top: 30px;
4  left: 30px;
5}

لی‌آوت جدول

جدول‌های HTML برای نمایش داده‌های جدولی مناسب هستند، اما سال‌ها پیش و قبل از آن که حتی قواعد مقدماتی CSS روی مرورگرهای مختلف پشتیبانی شوند، توسعه‌دهندگان وب از جدول‌ها برای طراحی لی‌آوت کل صفحه استفاده می‌کردند و هدرها، فوترها، ستون‌های مختلف و موارد دیگر را درون جدول و در ردیف‌ها و ستون‌ها مختلف قرار می‌دادند. این کار در آن زمان بد نبود، اما اینک مشکلات زیادی را موجب می‌شود. لی‌آوت‌های جدولی انعطاف‌پذیر نیستند، روی markup بسیار سنگین هستند، دیباگ آن‌ها دشوار است و از نظر معناشناختی نادرست هستند، یعنی نرم‌افزارهای قرائت صفحه در زمان حرکت روی لی‌آوت‌های جدولی با مشکل مواجه می‌شوند.

روش نمایش یک جدول روی صفحه در زمان استفاده از markup جدول، به دلیل وجود برخی قواعد CSS است که لی‌آوت جدولی را تعریف می‌کنند. از این مشخصه‌ها می‌توان برای چیدمان عناصری که در جدول نیستند استفاده کرد. این کاربرد گاهی اوقات به نام «استفاده از جدول‌های CSS» خوانده می‌شود.

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

به مثال زیر توجه کنید. ابتدا مقداری markup ساده داریم که یک فرم HTML ساده ایجاد می‌کند. هر عنصر ورودی دارای یک برچسب است و یک کپشن نیز درون یک پاراگراف قرار گرفته است. هر جفت برچسب/ورودی درون یک <div> قرار گرفته است تا امکان تعیین لی‌آوت آن وجود داشته باشد.

1<form>
2  <p>First of all, tell us your name and age.</p>
3  <div>
4    <label for="fname">First name:</label>
5    <input type="text" id="fname">
6  </div>
7  <div>
8    <label for="lname">Last name:</label>
9    <input type="text" id="lname">
10  </div>
11  <div>
12    <label for="age">Age:</label>
13    <input type="text" id="age">
14  </div>
15</form>

اکنون به بررسی CSS مثال خود می‌پردازیم. اغلب بخش‌های CSS کاملاً معمولی هستند، به جز این که از مشخصه display استفاده کرده‌ایم. <form>، <div> و <label> و <input> طوری تنظیم شده‌اند که به ترتیب مانند جدول، ردیف‌های جدول و سلول‌های جدول به نظر برسند. در واقع آن‌ها مانند یک markup جدول HTML عمل می‌کنند و موجب می‌شوند که برچسب‌ها و ورودی‌ها به صورت پیش‌فرض به شیوه مناسبی نمایش یابند. در ادامه تنها کاری که باید بکنیم، این است که کمی اندازه‌بندی، تنظیم حاشیه و مواردی از این دست انجام دهیم تا همه چیز زیباتر به نظر بیاید.

پاراگراف کپشن دارای مشخصه display: table-caption;‎ است که موجب می‌شود مانند یک <caption> جدول عمل کند. این کار به این جهت انجام می‌گیرد که به کپشن اعلام کنیم که به منظور استایل‌بندی در انتهای جدول قرار گیرد، هر چند markup پیش از عناصر <input> قرار دارد. به این ترتیب انعطاف‌پذیری خوبی ایجاد می‌شود:

1html {
2  font-family: sans-serif;
3}
4
5form {
6  display: table;
7  margin: 0 auto;
8}
9
10form div {
11  display: table-row;
12}
13
14form label, form input {
15  display: table-cell;
16  margin-bottom: 10px;
17}
18
19form label {
20  width: 200px;
21  padding-right: 5%;
22  text-align: right;
23}
24
25form input {
26  width: 300px;
27}
28
29form p {
30  display: table-caption;
31  caption-side: bottom;
32  width: 300px;
33  color: #999;
34  font-style: italic;
35}

بدین ترتیب خروجی زیر ایجاد می‌شود:

سورس کد کامل آن به صورت زیر است:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>CSS tables example</title>
6    <style>
7    html {
8      font-family: sans-serif;
9    }
10
11    form {
12      display: table;
13      margin: 0 auto;
14    }
15
16    form div {
17      display: table-row;
18    }
19
20    form label, form input {
21      display: table-cell;
22      margin-bottom: 10px;
23    }
24
25    form label {
26      width: 200px;
27      padding-right: 5%;
28      text-align: right;
29    }
30
31    form input {
32      width: 300px;
33    }
34
35    form p {
36      display: table-caption;
37      caption-side: bottom;
38      width: 300px;
39      color: #999;
40      font-style: italic;
41    }
42    </style>
43  </head>
44  <body>
45    <form>
46    <p>First of all, tell us your name and age.</p>
47      <div>
48        <label for="fname">First name:</label>
49        <input type="text" id="fname">
50      </div>
51      <div>
52        <label for="lname">Last name:</label>
53        <input type="text" id="lname">
54      </div>
55      <div>
56        <label for="age">Age:</label>
57        <input type="text" id="age">
58      </div>
59    </form>
60  </body>
61</html>

لی‌آوت چندستونی

ماژول لی‌آوت چندستونی یک روش برای چیدمان محتوا در ستون‌ها ارائه می‌کند که مشابه شیوه صفحه‌بندی ستون‌های روزنامه‌ها است. با این که خواندن ستون‌های طولانی در محیط وب چندان مفید نیست، چون موجب می‌شود کاربران به طور مداوم به سمت پایین و بالا اسکرول کنند، اما چیدمان محتوا در ستون‌ها در برخی موارد می‌تواند تکنیک مفیدی باشد.

برای این که یک بلوک به کانتینر چندستونی تبدیل شود، می‌توانیم یا از مشخصه column-count استفاده کنیم که به مرورگر اعلام می‌کند چند ستون باید داشته باشد و یا از مشخصه column-width استفاده می‌کنیم که به مرورگر اعلام می‌کند کانتینر با هر تعداد ستون را از ستون‌هایی با دست کم عرض مشخص‌شده پر کند.

در مثال زیر کار را با بلوک HTML درون یک عنصر <div> محیط با یک کلاس container آغاز کرده‌ایم:

1<div class="container">
2    <h1>Multi-column layout</h1>
3    
4    <p>Paragraph 1.</p>
5    <p>Paragraph 2.</p>
6
7</div>

ما از یک مشخصه column-width با مقدار 200 پیکسل روی کانتینر استفاده می‌کنیم که موجب می‌شود مرورگر آن قدر ستون‌های 200 پیکسلی ایجاد کند که کانتینر را پر کنند و سپس بقیه فضا بین ستون‌های ایجادشده پخش می‌شود.

1    .container {
2        column-width: 200px;
3    }

سخن پایانی

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

• گردش نرمال در CSS --- آموزش CSS (بخش بیست و ششم)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های طراحی سایت با HTML و CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش طراحی وب با CSS
• مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)
• ۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی
• آموزش CSS Grid — گام به گام، کاربردی و پروژه محور

==