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

#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #CCC;
 padding: 5px;
}
.floated_box {
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #990000;
 margin: 10px;
}
<div id="main_container">
 <p>Some content.</p>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
</div>

DIVهایی با کلاس floated_box درون یک DIV والد با شناسه main_container قرار دارند، اما همانطور که در تصویر زیر مشاهده می‌کنید، تصور می‌شود که DIVهای با کلاس floated_box خارج از عنصر والد خود قرار دارند.

 

برای برطرف کردن این مشکل یک راهکار ساده وجود دارد و آن هم استفاده از ویژگی clear در CSS است. این DIV خالی را بعد از آخرین عنصر شناور خود قرار دهید:

<div style="clear: both;"></div>

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

برخی از دوستان این سوال را داشتند که چگونه می‌شود از طریق گوشی همراه خود به لوکال هاست رایانه متصل شویم؟! در این آموزش کوتاه این کار بصورت کاملا ساده بیان می شود.

نصب وب سرور مجازی

ابتدا برای اینکه یک وب سرور مجازی بر روی رایانه‌ی خود داشته باشید یکی از نرم افزارهای مربوطه مانند XAMPP را نصب کنید. پس از اتمام مراحل نصب و فعالسازی، در محل نصب این نرم افزار به پوشه htdocs رفته و محتویات داخل این پوشه را با محتویات دلخواه پر کنید. اگر میخواهید صرفا اتصال به موبایل را امتحان کنید از این مرحله بگذرید.

یافتن IP سیستم

برای اینکار از طریق منوی استارت رایانه CMD را جستجو کنید. پس از باز شدن پنجره CMD با نوشتن ipconfig اطلاعات مربوط به IP نمایش داده می‌شود. شما به اعدادی که روبروی  IPv4 Address نوشته شده است نیاز دارید.

اتصال به گوشی همراه

ابتدا مطمئن شوید که گوشی شما به شبکه‌ای که رایانه در آن مشغول بکار هست متصل شده باشد.(از طریق wifi) سپس مرورگر گوشی را باز کرده و IP بدست آمده را در آن بنویسید. مشاهده می‌کنید که گوشی به راحتی به لوکال هاست شما متصل شده است.

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

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

  1. details
  2. summary

برچسب details

برچسب دوطرفه details در برگیرنده محتوای مخفی شده است.

برچسب summary

برچسب summary موجود در detail امکان نمایش عنوان عنصر مخفی شده را برعهده می گیرد.

مثال: برای اینکار ابتدا برچسب دوطرفه details، سپس عنوان عنصر برای نمایش یا مخفی کردن محتوا را در برچسب دوطرفه summary نوشته و در انتها محتوای مورد نظر خود را اضافه می کنیم.

<details> <summary> برای نمایش محتوا کلیک کنید. </summary> <p> معرفی برچسبهای details و summary در html </p> </details>

خروجی:

با کلیک بر روی عنوان، محتوای مخفی شده نمایش پیدا می کند.

ویژگی open در details

بصورت پیشفرض محتوای درون برچسب details مخفی است. برای تغییر وضعیت آن به نمایش محتوا می توان از ویژگی open در برچسب details بهره برد.

<details open> <summary> برای نمایش محتوا کلیک کنید. </summary> <p> معرفی برچسبهای details و summary در html </p> </details>

نکته: محتوای درون details صرفا متن نیست! بلکه میتوانید برچسبهای دیگر را نیز مورد استفاده قرار دهید. مانند فرم، تصویر و… حتی میتوانید از details های تودرتو نیز استفاده کنید.

 

در ادامه مباحث آموزش طراحی تحت وب با جلسه دهم همراه شما عزیزان خواهیم بود. دو جلسه قبلی اختصاص یافت به آموزش CSS و ویژگی های آن. این جلسه نیز ادامه آن مباحث خواهد بود.

ویژگی شناوری چیست

float یا ویژگی شناوری خاصیتی در CSS است که مشخص می کند عنصر مورد نظر در کدام جهت (چپ یا راست) قرار بگیرد.

برای ساده سازی این تعریف به این مثال توجه کنید: فرض کنید برای طراحی دو ستون در یک صفحه نیاز دارید که هر کدام را در سمتی از صفحه قرار دهید. یکی در سمت چپ و دیگری در سمت راست. برای اینکه ستونهای مورد نظر در یکی از این جهت ها قرار بگیرد CSS ویژگی float را در دسترس طراح قرار داده تا با مقداردهی به آن جهت قرارگیری عنصر را تعیین کند.

float دارای مقادیری همچون:

  • none : عنصر مورد نظر شناوری ندارد.
  • left : عنصر در سمت چپ شناور است.
  • right : عنصر در سمت راست شناور است.
  • initial : شناوری پیشفرض.
  • inherit : دریافت شناوری از عنصر والد.

مثال:

برای اینکه ستون های تصویر زیر را در جهت مناسبی که برایش تعیین شده قرار دهیم باید به صورت زیر عمل کنیم:

در سند html به این صورت عمل می کنیم:

<html>
<body>
<div class="left-block"></div>
<div class="right-block"></div>
</body>
</html>

در سند CSS بصورت زیر عمل می کنیم:

.left-block{
	float:left;
	border: 2px solid red;
	width:200px;
	height:400px;
}
.right-block{
	float:right;
	border: 2px solid red;
	width:200px;
	height:400px;
}

در سند HTML چه خبر؟!

در سند html از دو برچسب div استفاده شد یکی برای ستون سمت راست و دیگری برای ستون سمت چپ. به هرکدام یک کلاس اختصاص دادیم تا بتوانیم از طریق ویزگی های CSS تغییرات را بر روی آنها اعمال کنیم.

برای ایجاد عناصر مورد نظر می توان از برچسب دوطرفه div استفاده کرد.

در سند CSS چه خبر؟!

در سند CSS چون از کلاس برای برچسب ها استفاده کردیم پس ابتدا یک نقطه قرار داده و سپس نام کلاس را نوشتیم. در ابتدای ویزگی ها مشخص کردیم که هریک از ستون در کدام سمت قرار بگیرد. برای همین از ویزگی شناوری با مقداردهی left و right استفاده کردیم. در خط دوم از ویژگی border برای قرار دادن یک مرز و تفکیک ستون ها از یکدیگر استفاده شد. که قطر آن برابر شد با ۲px و مقدار برابر با solid (در جلسات بعدی توضیح داده خواهد شد) قرار گرفت و در انتها رنگ border مشخص شد. همچنین برای هریک از ستون ها عرض و ارتفاع در نظر گرفته شد که با ویزگی های height و width مشخص هستند. بدین صورت توانستیم با یادگیری ویژگی شناوری عناصر خود را در سمت راست یا چپ ثابت کنیم.