آموزش مقدماتی HTML و CSS (جلسه نه: تعیین موقعیت محتوا-بخش۱)
1398/02/23 15:54 , میلاد صاحب نظر

آموزش مقدماتی HTML و CSS (جلسه نه: تعیین موقعیت محتوا-بخش۱)

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

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد قسمت اول
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم ۲۴-نوشتن بهترین کد قسمت دوم

چند نوع مختلف تعیین موقعیت در CSS وجود دارند و هر کدام کاربرد مخصوص به خودشان را دارند.

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

تعیین موقعیت با floatها

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

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

برای مثال، یک عنصر <img> که به کناره چند پاراگراف از متن float شده است، به پاراگراف‌ها این امکان را می‌دهد که در صورت لزوم، اطراف تصویر را بپوشانند.

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

ویژگی float چند مقدار می‌پذیرد. دو مورد از مرسوم‌ترین آن‌ها مقادیر left و right هستند که برای عنصرها امکان float شدن به سمت چپ یا راست عنصر والد خود را فراهم می‌کنند.

img {
  float: left;
}
تمرینی برای floatها

می‌خواهیم یک layout صفحه معمولی که دارای یک هدر در بالا، دو ستون در مرکز و یک فوتر در پایین صفحه است ایجاد کنیم. حالت ایده آل این است که این صفحه با استفاده از عنصرهای <aside>، <section>، <header> و <footer> که در جلسات سوم و چهارم در مورد آن‌ها صحبت کردیم علامت‌گذاری شوند.

درون عنصر <body> کد HTML باید شبیه به این باشد:

<header>...</header>
<section>...</section>
<aside>...</aside>
<footer>...</footer>

در اینجا عنصرهای <section> و <aside> به عنوان عنصرهای سطح block به صورت پیش‌فرض به صورت پشته‌ای روی یکدیگر قرار می‌گیرند. به هر حال، ما می‌خواهیم این عنصرها در کنار یکدیگر قرار بگیرند.

با float کردن عنصر <section> به سمت چپ و عنصر <aside> به سمت راست، می‌توانیم آن‌ها را به صورت دو ستون که در مقابل یکدیگر قرار گرفته‌اند، تعیین موقعیت کنیم. کد CSS به شکل زیر خواهد بود:

section {
  float: left;
}
aside {
  float: right;
}

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

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

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

در کد زیر، block کد قبلی را گسترش می‌دهیم، همچنین یک margin و width به هر ستون اضافه می‌کنیم تا نتیجه مطلوب ما را بهتر شکل دهند.

section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

Floatها ممکن است مقدار Display یک عنصر را تغییر دهند

وقتی یک عنصر را float می‌کنیم، بسیار مهم است که متوجه باشیم که یک عنصر از جریان نرمال یک صفحه حذف شده است و این امر ممکن است مقدار پیش‌فرض display یک عنصر را تغییر دهد. ویژگی float به این بستگی دارد که یک عنصر دارای مقدار block برای display باشد.

اگر این مقدار  از قبل به عنوان یک عنصر سطح block نمایش داده نشده باشد، آنگاه ممکن است مقدار پیش‌فرض ویژگی display عنصر تغییر کند.

برای مثال، یک عنصر با مقدار inline برای display (مانند<span> که یک عنصر سطح inline است)، هر گونه مقادیر مربوط به ویژگی‌ height یا width را نادیده می‌گیرد. به هر حال، اگر آن عنصر سطح inline زمانی float شود، آنگاه مقدار display آن باید به block تغییر کند تا شاید بتواند مقادیر ویژگی height یا width‌را بپذیرد.

در هنگام float کردن عنصرها باید مراقب چگونگی و میزان تأثیرپذیری مقادیر ویژگی display آن‌ها باشیم.

وقتی دو ستون داشته باشیم می‌توانیم یک ستون را به سمت چپ و دیگری را به سمت راست float کنیم، اما اگر ستون‌های بیشتری داشته باشیم باید روشمان را عوض کنیم. فرض کنید برای مثال، می‌خواهیم یک ردیف شامل سه ستون بین عنصرهای <header> و <footer> داشته باشیم.

اگر عنصر <aside> را کنار بگذاریم و از سه عنصر <section> استفاده کنیم، آنگاه کد HTML ما به شکل زیر خواهد بود:

<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>

برای قرار دادن این سه عنصر <section> در یک ردیف سه ستونه، به جای اینکه یک ستون را به سمت چپ و یک ستون را به سمت راست float کنید، در عوض هر سه عنصر <section> را به سمت چپ float می‌کنیم. همچنین باید عرض عنصرهای <section> را با در نظر گرفتن ستون‌های اضافی و کنار هم قرار گرفتن آن‌ها، تنظیم کنیم.

section {
  float: left;
  margin: 0 1.5%;
  width: 30%;
}

در این کد ما سه ستون داریم که همه دارای مقادیر width و margin برابر هستند و همه به سمت چپ float شده‌اند.

پاک و محدود کردن floatها

ویژگی float در کل برای این طراحی شد تا امکان دهد که محتوا در اطراف تصویر قرار بگیرد. یک تصویر می‌تواند float شود و تمام محتوای نزدیک آن تصویر طبیعتاً می‌توانند در اطراف آن قرار بگیرند.

اگرچه این ویژگی برای تصاویر خیلی عالی عمل می‌کند، اما ویژگی float هیچ‌وقت با هدف استفاده در اهداف مرتبط با layout و تعیین موقعیت طراحی نشده است و بنابراین در این موارد دارای نقطه ضعف‌هایی است.

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

گاهی مقادیر ویژگی‌های margin و padding به صورت صحیح تفسیر نمی‌شوند، این امر باعث می‌شود که با عنصر float شده اشتباه گرفته شوند. ویژگی‌های دیگر نیز ممکن است تأثیر بپذیرند.

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

در مثال دو ستونه قبلی، بعد از اینکه عنصرهای <section> و <aside> را float کردیم و قبل از اینکه یک مقدار ویژگی width برای هر کدام از آن‌ها تنظیم کنیم، محتوای درون عنصر <footer> در بین دو عنصر float شده بالای سرش قرار گرفت و همه فضای خالی را اشغال کرد.

در نتیجه، عنصر <footer> در حفره بین عنصرهای <section> و <aside> قرار گرفت و فضای موجود را پر کرد.

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

پاک کردن floatها

Clear کردن floatها با استفاده از ویژگی clear انجام می‌شود که این ویژگی چند مقدار مختلف می‌پذیرد: مرسوم‌ترین مقادیر مورد استفاده برای آن عبارت‌اند از right، left و both.

div {
  clear: left;
}

مقدار float،  leftهای سمت چپ را پاک یا clear می‌کند، در حالی که مقدار float، rightهای سمت راست را پاک می‌کند.

از طرفی، مقدار both هر دو floatهای سمت راست و چپ را پاک می‌کند و گاهی بهترین مقدار همین است.

برگردیم به سراغ مثال قبلی خودمان، اگر از ویژگی clear با مقدار both برای عنصر <footer> استفاده کنیم، می‌توانیم floatها را پاک کنیم. بسیار مهم است که این clear برای یک عنصر که بعد از عنصرهای float شده قرار دارد اعمال شود، نه قبل از آن‌ها. در این صورت صفحه به جریان نرمال بازمی‌گردد.

footer {
  clear: both;
}
محدود کردن floatها

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

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

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}

در این کد اتفاقات زیادی در حال افتادن است، اما نکته مورد نظر ما این است که CSS در این کد در حال پاک کردن تمام عنصرهای float شده‌ای است که درون عنصر دارای کلاس group قرار گرفته‌اند و در نتیجه جریان سند را به حالت نرمال بازمی‌گرداند.

به طور دقیق‌تر، عنصرهای سودو before: و after: (همان‌طور که در جلسه هشت  گفته شد) به صورت پویا عنصرها را در بالا و پایین عنصر دارای کلاس group‌ ایجاد کرده‌اند. آن عنصرها شامل هیچ محتوایی نیستند و به عنوان عنصرهای سطح table نمایش داده می‌شوند، که بسیار شبیه به عنصرهای سطح block هستند.

عنصر ایجاد شده به صورت پویا که بعد از عنصر دارای کلاس group قرار گرفته است، در حال پاک کردن floatهای داخل عنصر دارای کلاس group است، بسیار شبیه به کاری که ویژگی clear انجام می‌داد.

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

البته کدهای دیگری هم به جز ;clear: both وجود دارند، اما این کد ثابت کرده است که خیلی مفید است.

حالا وقتی به layout‌ صفحه دو ستونه که از قبل داشتیم نگاه می‌کنیم، متوجه می‌شویم که می‌توانیم عنصرهای <section> و <aside> را با یک عنصر والد احاطه کرد. سپس آن عنصر والد باید floatها را درون خودش محدود کند. کد چیزی شبیه به کدهای زیر خواهد بود:

HTML

<header>...</header>
<div class="group">
  <section>...</section>
  <aside>...</aside>
</div>
<footer>...</footer>

CSS

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}
section {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
aside {
  float: right;
  margin: 0 1.5%;
  width: 30%;
}

تکنیکی که در اینجا برای محدود کردن عنصرها نشان داده شد، با نام “clearfix” شناخته می‌شود و گاهی می‌توان آن را در وبسایت‌های دیگر همراه با کلاسی به نام clearfix یا cf یافت. ما ترجیح دادیم از نام کلاس group استفاده کنیم، چون این کلاس نشان دهنده گروهی از عنصرها است و این نام بهتر محتوا را توصیف می‌کند.

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

اگر موفق نشوید حساب floatها را نگه دارید، ممکن است به دردسرهای زیادی بیفتید، به خصوص چون صفحات دارای چندین ردیف و چندین ستون هستند.

تمرین

بسیار خب، اجازه دهید برگردیم سراغ وبسایت Styles Conference و سعی کنیم چند محتوا را float کنیم.

  1. اول چیزهای مهم، قبل از اینکه شروع به float کردن عنصرها کنیم، اجازه دهید با اضافه کردن clearfix به کد CSS روشی برای محدود کردن آن floatها فراهم کنیم. درون فایل css، درست در زیر استایل‌های grid، کلاس clearfix را در زیر کلاس با نام group اضافه می‌کنیم، درست مثل قبل.
    /*
      ========================================
      Clearfix
      ========================================
    */
    .group:before,
    .group:after {
      content: "";
      display: table;
    }
    .group:after {
      clear: both;
    }
    .group {
      clear: both;
      *zoom: 1;
    }
    ​
  2. حالا که floatها را محدود کردیم، اجازه دهید عنصر <h1> اصلی درون عنصر <header> را به سمت چپ float کنیم و اجازه دهیم بقیه محتوای موجود در هدر در سمت راست آن جمع شوند.
    برای این منظور، یک کلاس به نام logo به عنصر <h1> اضافه می‌کنیم. سپس درون کد CSS، یک بخش جدید از استایل‌ها برای هدر اصلی اضافه می‌کنیم. در این بخش ما عنصر <h1> دارای کلاس logo را انتخاب کرده و سپس آن را به سمت چپ float می‌کنیم.
    HTML
    <h1 class="logo">
      <a href="index.html">Styles Conference</a>
    </h1>
    ​

    CSS

    /*
      ========================================
      Primary header
      ========================================
    */
    
    .logo {
      float: left;
    }
    ​
  3. حالا که مشغول شدیم، اجازه دهید کمی جزئیات بیشتر به لوگو اضافه کنیم. کارمان را با قرار دادن عنصر <br> (یا خط شکن) در بین واژه “Styles” و واژه “Conference” آغاز می‌کنیم تا کاری کنیم که لوگوی سایتمان در دو خط مجزا قرار گیرد.
    در CSS، یک مرز در بالای لوگو و چند padding عمودی به آن اضافه می‌کنیم تا کمی لوگو فضا داشته باشد.
    HTML
    <h1 class="logo">
      <a href="index.html">Styles <br> Conference</a>
    </h1>
    ​

    CSS

    .logo {
      border-top: 4px solid #648880;
      padding: 40px 0 22px 0;
      float: left;
    }
    ​
  4. چون عنصر <h1> را float کردیم، می‌خواهیم آن float را محدود کنیم. نزدیک‌ترین عنصر والد به عنصر <h1>، عنصر <header> است. بنابراین یک کلاس group به عنصر <header> اضافه می‌کنیم. با این کار، استایل‌های clearfix که قبلاً برای عنصر <header> تدارک دیده بودیم اعمال می‌شوند.
    <header class="container group">
      ...
    </header>
    ​
  5. عنصر <header> در حال شکل گرفتن است، پس اجازه دهید نگاهی به عنصر <footer> داشته باشیم. درست همانند کاری که با عنصر <header> کردیم، حق کپی رایتمان را در داخل عنصر <small> به سمت چپ float می‌کنیم و اجازه می‌دهیم بقیه عنصرها در سمت راست در اطراف آن قرار بگیرند.
    بر خلاف عنصر <header>، برای عنصر float شده مستقیماً از یک کلاس استفاده نمی‌کنیم. این دفعه قصد داریم یک کلاس به والد عنصر float شده اضافه کنیم و از یک selector منحصر به فرد CSS برای انتخاب عنصر استفاده کنیم و سپس آن را float کنیم.
    کار را با افزودن کلاس primary-footer به عنصر <footer> شروع می‌کنیم. چون می‌دانیم که قرار است یک عنصر درون عنصر <footer> را float کنیم، پس همچنین باید کلاس group را هم اضافه کنیم.
    <footer class="primary-footer container group">
      ...
    </footer>​
  6. حالا که کلاس primary-footer در عنصر <footer> قرار گرفت، می‌توانیم از آن کلاس برای پیش‌بینی عنصر <small> توسط CSS استفاده کنیم. قصد داریم عنصر <small> را انتخاب کرده و به سمت چپ float کنیم. نباید فراموش کنیم که لازم است برای این استایل‌های فوتر اصلی، یک بخش جدید درون فایل css ایجاد کنیم.
    /*
      ========================================
      Primary footer
      ========================================
    */
    
    .primary-footer small {
      float: left;
    }​

    برای مثال در کد بالا عنصر <small> را انتخاب کردیم، که باید درون عنصری با مقدار اتریبیوت کلاس primary-footer (مانند عنصر <footer>) باشد.
  7. در آخر، اجازه دهید چند padding در بالا و پایین عنصر <footer> اضافه کنیم تا کمی بیشتر آن را از بقیه صفحه جدا کنیم. می‌توانیم این کار را مستقیماً با استفاده از کلاس primary-footer که دارای یک کلاس Selector‌باشد انجام دهید.
    .primary-footer {
      padding-bottom: 44px;
      padding-top: 44px;
    }
    ​

تغییرات زیادی در عنصرهای <header> و <footer> اعمال کردیم، باید حتماً آن‌ها را در تمام صفحات دیگر هم اعمال کنیم، نه فقط در صفحه index.html.

fig 9.1

شکل ۹.۱. با استفاده از چند float، عنصرهای <header> و <footer> در صفحه خانه Styles Conference در حال نزدیک شدن به هم هستند.

خلاصه

در این جلسه به مبحث تعیین موقعیت محتوا پرداختیم. برای تعیین موقعیت محتوا از مفهومی به نام Float استفاده کردیم. متوجه شدیم که این مفهوم بیشتر برای تصاویر طراحی شده بود نه طراحی layput و تعیین موقعیت محتوا، به همین دلیل نقاط ضعفی داشت که آن‌ها را با روش‌های پاک کردن (clearing) و محدود کردن (containing) آن floatهای ایجاد شده برطرف کردیم.

در جلسه آینده مبحث تعیین موقعیت را تکمیل خواهیم کرد.

با MUG همراه باشید!

منبع: learn.shayhowe

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

۵ قالب رایگان HTML برای ایجاد آسان و سریع وبسایت‌ها!
۵ قالب رایگان HTML برای ایجاد آسان و سریع وبسایت‌ها!

چه مالک یک کسب و کار باشید، چه صرفاً بخواهید برند شخصی خودتان و مهارت‌هایتان را تبلیغ کنید، ...

آموزش جامع SQL Server (جلسه نه: Subquery)
آموزش جامع SQL Server (جلسه نه: Subquery)

در این جلسه در مورد Subquery صحبت می‌کنیم. منظور از Subquery یک query است که درون یک عبارت ...

آموزش مقدماتیHTMLوCSS(جلسه ده:تعیین موقعیت محتوا – بخش۲)
آموزش مقدماتیHTMLوCSS(جلسه ده:تعیین موقعیت محتوا – بخش۲)

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

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات