آموزش چیدمان عناصر در صفحهLayout به صورت شفافClear و شناورFloat

حامد محمدیحامد محمدی
129 بازدید
اموزش layout float clear

چیدمان عناصر Layout در صفحات وب سایت به معنای طرح بندی صفحه است.

یعنی اگر یک صفحه وب سایت را مانند یک برگه نقاشی در نظر بگیرید؛ میتوانید با Layout آنرا به بخش های مختلف تقسیم کنید. و سپس برای هر بخش شروع به کدنویسی و تصمیم گیری کنید.

در آموزش امروز، قصد داریم با  Layout و حالتهای آن یعنی float و clear آشنا شویم.

عناصری که در بخش های مختلف به کار برده می شوند بررسی کنیم.

و نحوه کدنویسی برای هر بخش را تمرین کنیم.

با ما همراه باشید.

با سلام خدمت شما همراهان همیشگی سایت پرنیان طرح

در آموزش امروز طرح بندی (چیدمان؛ layout) و انواع آن را با یکدیگر مرور خواهیم کرد.

و با کدنویسی های آن آشنا خواهیم شد.

در ادامه آموزس همراه ما باشید.

چیدمان عناصر، طرح بندی، Layout

چیدمان عناصر Layout، در صفحات وب سایت به معنای طرح بندی صفحه است.

 

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

 در css دو حالت برای چیدمان (Layout) داریم:

۱- Float: این حالت، چگونگی شناور بودن یک عنصر را  مشخص میکند.شناور بودن یعنی اینکه عنصر به سمت چپ یا راست نگهدارنده اش هول داده شود.

۲- clear: این حالت نیز تعیین می کند که اطراف عنصر شناور، شفاف سازی شود. (پاک شود) و سایر عناصر ، به پایین عناصری که ویژگی شناور دارد، سقوط کنند.

یک نکته حرفه ای

عناصر فقط در حالت افقی شناور میشوند.

این یعنی فقط به چپ یا راست قابل شناور بودن هستند.

امکان قراردادن عنصر در موقعیت های بالا و پایین وجود ندارد.

ویژگی Float

این ویژگی برای موقعیت یابی (positioning) و قالب بندی (formatting) محتوا (content) استفاده می شود.

برای مثال اجازه میدهد درون یک عنصر نگهدارنده، یک تصویر در کنار نوشته ، شناور باشد.

در مثال های زیر میتواندی نمایش ظاهری این تغییرات را ببینید.

Float میتواند دارای مقادیر زیر باشد:

  •  float: right;  در این حالت ، و در این مثال، تصویر در طرف راست متن شناور است.

تصویر شناور در طرف راست متن

کدنویسی برای این حالت به شکل زیر خواهد یود:

[php]
img {
float: right;
}
[/php]
خودتان امتحان کنید.

 

  • float: left;  در این حالت ، و در این مثال، تصویر در طرف چپ متن شناور است.

 

تصویر شناور در سمت چپ متن

کدنویسی برای این حالت به شکل زیر خواهد یود:

[php]
img {
float: left;
}
[/php]

خودتان امتحان کنید.

 

یک حالت دیگر برای Float وجود دارد. و آن No float است. این حالت در کد نویسی به شکل زیر تعریف می شود:

[php]
img {
float: none;
}
[/php]

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

تصویر شناور در سمت چپ متن

خودتان امتحان کنید.

ویژگی Clear

این ویژگی برای کنترل داشتن روی عنصری که خاصیت Float دارد، استفاده می شود.

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

تفاوت lear و float

 

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

Clear میتواند مقادیر زیر را داشته باشد:

  • none: اجازه می دهد عناصر در هر دو طرف عنصر شناور، قرار بگیرند. این حالت پیشفرض است.
  • left : هیچ عنصری در سمت چپ مجاز نیست.
  • right: هیچ عنصری در سمت راست مجاز نیست.
  • both : هیچ عنصری در هر دو طرف مجاز نیست.
  • inherit: عنصر مورد نظر، خاصیت clear را از عنصر والد خود ارث می برد.

مثالی از کدنویسی برای حالت left:
[php]
div {
clear: left;
}
[/php]
نتیجه را ببنید و خودتان امتحان کنید.

برش وضوح یا clearfix Hack

اگر یک عنصر ، از نگهدارنده خودش بزرگتر باشد، و دارای ویژگی Float باشد، مسلما از نگهدارنده خودش سرریز خواهد کرد. میتوانید دربار سرریز از این لینک مطالعه فرمایید.

برای حل این مشکل(سرریز شدن محتوا) css گزینه overflow: auto; را در اختیار شما میگذارد.

تکه کد زیر را در بخش کدهای css وارد کنید و نتیجه را از این لینک ببینید.

[php]
.clearfix {
overflow: auto;
}
[/php]

این ترفند تا زمانی که شما کنترل کامل روی padding و margin داشته باشید، به خوبی کار میکند. (در غیر اینصورت خواهید دید که نوارهای اسکرول ظاهر می شوند.)

دقت کنید که باید صفت overflow: auto; را به عنصر نگهدارنده اضافه کنید.

برای عمل کردن بهتر این روش ، کد جدیدی از css به کمک شما آمده است:

[php]
.clearfix::after {
content: “”;
clear: both;
display: table;
}
[/php]
نتیجه را ببینید.

سایر استفاده های ویژیگی Float

با استفاده از ویژگی float شما میتوانید جعبه boxهای هم اندازه (هم عرض) ایجاد کنید و آنها را کنار هم قرار دهید.

مثال:

[php]
* {
box-sizing: border-box;
}

.box {
float: left;
width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
padding: 50px; /* if you want space between the images */
}
[/php]

نتیجه را ببینید.

شما میتوانید از این جعبه های در کنارهم، برای قرار دادن عکسها کنار یکدیگر استفاده کنید. مثال زیر نمونه ای از این استفاده است:
[php]
.img-container {
float: left;
width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
padding: 5px; /* if you want space between the images */
}
[/php]

نمونه را ببینید.

 

ایجاد Navigation Menu یا منوهای پیمایشی

برای این کار کافیست ویژگی float را با link مخلوط کنید. به راحتی میتوانید منوهای پیمایشی، مانند آنچه که در قسمت بالایی وب سایت ها مشاهده میکنید ایجاد کنید.

کدها و نمونه را اینجا ببینید و تمرین کنید.

 

طراحی چیدمان صفحه وب با float

 

نمونه صفحه با float

استفاده از ویژگی float برای چیدمان کل صفحه وب نیز معمول است.

مثال زیر نحوه کدنویسی یک صفحه ساده را با استفاده از float نمایش میدهد:

[php]
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}

.column {
float: left;
padding: 15px;
}

.clearfix::after {
content: “”;
clear: both;
display: table;
}

.menu {
width: 25%;
}

.content {
width: 75%;
}
[/php]

نتیجه را از اینجا ببینید.

تمرینات بیشتر به همراه کدها و نمونه های بیشتر را از این لینک مطالعه کنید.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

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

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

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت