رازهای لایه بندی صفحه بدون استفاده از Float
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
خودتان را اینجا معرفی کنید
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
با وجود محبوبیت در استفاده از float ، float ممکن است در ابتدا باعث ناامیدی و گیجی طراحان وب شود مخصوصا زمانی که طراحان از دستور clear استفاده نکنند، این اتفاق ممکن است باعث بهم خوردن المنت ها و به هم ریختن نظم طراحی شما شود، در پروژه های کوچک با برطرف کردن مشکلات float میتوان از آن استفاده کرد اما در پروژه های خیلی بزرگ با محتوای داینامیک این کار سخت تر میشود، زمان و هزینه ی زیادی از شما میگیرد.
یک جایگزین بهتر !
حتی اگر المنت های float شده ی شما به خوبی کار کنند، float باعث میشود جریان عادی یا normal flow تغییر کند و باعث رفتارهای غیرمنتظره ی المنت های دیگر شود، float جزو normal flow نیست، بنابراین باکس های دیگر که normal flow هستند المنت float شده را در نظر نمیگیرند، با به وجود آمدن طراحی رسپانسیو، تنظیم سایز المنت ها داینامیک شده است و فضای اضافی اطراف المنت ها پر میشود، به همین دلیل ممکن است طراحی توسط float مشکلات مختلفی برای شما به وجود آورد، به نظرتان چه راه بهتری وجود دارد ؟فلکس باکس آینده ی لایه بندی صفحات وب است اما به دلیل پشتیبانی ناکافی مرورگرها استفاده از فلکس باکس گزینه ی مناسبی برای طراحانی که میخواهند طرحشان در تمام مرورگرها به خوبی نشان داده شود نیست، استفاده از خاصیت display میتواند جایگزین خوبی برای این روش باشد مخصوصا برای طراحانی که میخواهند طرحشان در تمام مرورگرها به خوبی نشان داده شود و همچنین مشکلاتی که طراحی با float ایجاد میکرد دیگر وجود ندارد.
از inline-block استفاده کنید !
خاصیت disply ترکیبی از Float و Position است، به صورت ساده، المنت های block میتوانند تمام عرض عنصر پدرشان را تصرف کنند و تمام المنت های دیگر را به خط بعدی هل بدهند، در حالی که المنت های inline تنها به اندازه ی عرض خود فضا اشغال میکنند و به بقیه عناصر inline اجازه میدهند در همان خط در کنار آنها قرار بگیرند.استفاده از خاصیت display:inline-block باعث میشود طراحی موفق تری داشته باشیم، برای مثال به یک تکه متن در درون یک تگ فکر کنید، متن های داخل باهم inline میباشند اما خود تگ به تنهایی block-level است، برای درک بهتر این رفتار، میتوانیم در یک مثال از display با خاصیت inline-block استفاده کنیم تا محتوای آن را کنار همدیگر قرار دهیم، به دلیل اینکه تمام المنت های ما در حالت normal flow هستند، مشکلی با سقوط و افتادن المنت پدر نداریم، این یکی از راه های مناسب برای رسیدن به یک راه حل خوب است، همچنین این مثال را ببینید.
تکنیک را یاد بگیرید !
این متد در تمام نقاطی که میخواهید از جهت دهی عادی استفاده کنید به کار می آید، بیایید نگاهی به حالت محتوا/سایدبار بیندازیم، برای HTML یک المنت پدر داریم به نام wrapper که دو فرزند درونش دارد، کد HTML :
<div class="wrapper">
<div class="mainContent">
<!-- Main content goes here -->
</div><!-- No Spaces
--><div class="sideBar">
<!-- Sidebar content goes here -->
</div>
</div>
کد CSS :
.wrapper,
.mainContent,
.sideBar {
//change the box model for simplicity
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
font-size: 1em;
padding: 1.5em;
width: 100%;
}
.mainContent,
.sideBar {
display: inline-block;
vertical-align: top;
width: 100%;
}
@media (min-width: 700px) {
.mainContent {
margin-right: 5%;
width: 60%;
}
.sideBar { width: 35%; }
}
به همین راحتی main content و side bar را در کنارهم داریم.در این مثال جهت گیری با توجه به جهت گیری متن درون wrapper صورت میگیرد، هرچند جهت گیری به صورت دیفالت به سمت چپ است و نیازی نیست که کاری انجام دهیم، اما به راحتی میتوانید این جهت دهی را به سمت وسط و راست قرار دهید در صورتی که انجام همچین کاری توسط float غیرقابل انجام بود، به کامنت no spaces بین دو فرزند div درون پدر wrapper دقت کنید، برای این کار دلیل مناسبی داریم و در ادامه آن را توضیح خواهیم داد.
فضای خالی اضافه، مشکل همیشگی !
برگردیم به مثال تگ، زمانی که متنی را درون فایل HTML وارد میکنید به صورت دیفالت تمام فضای خالی پشت هم درون آن تبدیل به یک کاراکتر space میشود، بدون اینکه تمام فاصله ای که داشتیم را درنظر بگیرد، بنابراین هرچقدر فاصله ای که بین المنت های خود در طراحی داشتید با یک اسپیس جایگزین میشود، دقیقا مانند پاراگراف ها، این کار باعث میشود محاسباتی که در رابطه با سایز المنت ها داشتید بهم بخورد و آخرین المنت با یک ضربه ی کوچک به خط بعدی بپرد، خوشبختانه برای حل این مشکل چند راه حل داریم، برای مثال :- فونت سایز را 0 کنید، space ای که از آن صحبت میکردیم یک کاراکتر فاصله است بنابراین هنگامی که font-size:0 شود این فاصله به راحتی به صفر میرسد، در این راه حل ممکن است شما مجبور شوید font-size المنت های فرزند را برابر با چند em قرار دهید، بنابراین راه حل سختی است که المنت آخر خود را در بالای صفحه قرار دهید و ممکن است دوباره المنت شما به پایین صفحه سقوط کند، بنابراین این راه خوبی نیست.
- فاصله ی بین المنت ها را در فایل HTML خود پاک کنید، در نتیجه فاصله ی بین المنت ها نیز ازبین میرود، البته استفاده از این راه حل برای طولانی مدت باعث میشود که نتوانید کد HTML خود را بازبینی و بازخوانی کنید بنابراین راه مناسبی نیست.
- اضافه کردن کامنت بین المنت هایتان باعث میشود فضای اضافه بین آنها از بین برود و این کاری است که دقیقا در مثال بالا انجام دادیم، این راه حل را به سایر راه حل ها ترجیح میدهیم، این کار باعث میشود اندازه ای که برای هر المنت در نظر گرفتیم را بتوانیم به خوبی در طرحمان اعمال کنیم.
چرا استفاده از Float را ترک کنم ؟
ممکن است با خود فکر کنید Float به خوبی برای من کار میکند و تاکنون مشکلی ایجاد نکرده است، به چه دلیلی استفاده از آن را کنار بگذارم ؟ اگر حتی شما در استفاده از Float کاملا حرفه ای باشید، مواردی است که به هیچ وجه با Float نمیتوانید پیاده سازی کنید، برای مثال :- ساخت یک float در وسط صفحه، اغلب اوقات این کار با مشکل انجام میشود و باعث میشود تگ ها و خصوصیات CSS بی مورد به صفحه ی خود اضافه کنید، با استفاده از خاصیت display این کار به راحتی توسط دادن مقدار text-align:center به عنصر wrapper انجام میشود.
- بهترین ویژگی استفاده از متد display این است که میتوانید محتوای خود را جهت دهی کنید، تا حالا چندبار میخواستید یک المنت را نسبت به برادر یا خواهرش در وسط قرار دهید ؟ مجبور میشدید از position و margin های منفی و چند حقه استفاده کنید تا این کار را انجام دهید، در هنگام طراحی یک طرح رسپانسیو نمیتوانید این کار را به راحتی انجام دهید، اما در اینجا با دادن خاصیت vertical-align:center میتوانیم عنصر را به راحتی در وسط قرار دهیم بدون اینکه نیاز به کار اضافه ای داشته باشیم، به این مثال نگاه کنید.
نتیجه گیری
با تمام توضیحاتی که داده شد، من هم گاهی اوقات از Float در شرایط خاصی استفاده میکنم، اما استفاده از راه حلی که در بالا گفته شد باعث میشود طراحی ایده آل تری داشته باشیم و همچنین با مشکلات کمتری در هنگام طراحی مواجه شویم.
محمد بابازاده
محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .
نظرات و سوالات کاربران
من از خاصیت vertical-align استفاده میکنم ولی هیچوقت کار نمیکنه دلیلش و متوجه نمیشم از display :inline-block هم استفاده میکنم ولی بازم کار نمیکنه
سلام ممنون از رسیدگیتون
width دادم ولی اینجوری که عرض کردید ممکنه تو سایزهای مختلف aside سمت چپ،کامل نچسبه به کنار صفحه!
سوس کد خدمت شما:
<html>
<head>
<title>floatLESS</title>
<meta charset="utf-8">
<style type="text/css">
*
{
margin: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
direction: rtl;
}
body
{
background: #4d505b;
}
header
{
height: 100px;
background: rgb(28, 106, 129);
text-align: center;
color: #fff;
}
.container
{
background: rgb(77, 79, 91);
}
.container aside, .container section
{
display: inline-block;
}
aside
{
width: 230px;
min-height: 500px;
background: #16a79d;
}
aside.left
{
background: #F7624A;
}
.content
{
width: 60%;
min-height: 400px;
vertical-align: top;
text-align: center;
background: #f7f7f7;
}
.content .box
{
width: 150px;
height: 80px;
background: #80628b;
display: inline-block;
vertical-align: middle;
}
.content .box + div:nth-child(odd)
{
background: #cf4858;
}
.content .box:nth-child(even)
{
background: #f4ac42;
}
.content .banner
{
width: 90%;
height: 100px;
background: #DD557B;
}
.content .banner:nth-child(odd)
{
background: #16A89E;
}
footer
{
width: 100%;
text-align: center;
vertical-align: bottom;
background: #3E414A;
height: 100px;
color: #fff;
}
</style>
</head>
<body>
<header><h1>header</h1></header>
<main class="container">
<aside class="right"></aside>
<section class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="banner"></div>
<div class="banner"></div>
</section>
<aside class="left"></aside>
</main>
<footer><h1>footer</h1></footer>
</body>
</html>
سلام، اگر میتونید سورس کد تمرینی که برای این مثال دارین رو بدین تا بهتر بتونم کمکتون کنم، در غیر این صورت راه های زیادی برای طراحی همچین لایه ای هست، برای مثال اگر به المنت هاتون width دادید میتونید کل المنت هارو به سمت راست صفحه تکیه بدید به صورتی که aside به المنت وسط صفحه تکیه کنه.
سلام
برای سایت فارسی که دیرکشن را راست به چپ میکنیم
چنانچه دو تگ aside داشته باشیم
که یکی قرار باشد به سمت راست صفحه بچسبد و دیگری سمت چپ صفحه
سمت راست که بخاطر دیرکشن مشکلی ندارد ولی برای نگه داشتن اساید سمت چپ صفحه چه کار باید کرد؟بدون فلوت؟
تصویری از صفحه ای که قصد دارم بدون فلوت تمرینی طراحی کنم را ضمیمه کردم
لطفاً راهنمایی کنید.
ممنون
باسلام وتشکر
منظورم این بود که آیا divها را بااین روش می توان زیر هم قرار داد یا فقط کنارهم می توان قرارداد
من به شخصه دقیق متوجه سوال شما نشدم :D
اما بطور کل بله، تعداد لایه ها اصلا مهم نیست، همونطوری که در زمانی که float میدید لایه ها رو میتونید کنار همدیگه قرار بدید، اینجا هم هر چندتا لایه داشته باشی باز هم با تغییر display میشه کنار هم قرار داد. در واقع یکی از تکنیک‌هایی که در این آموزش گفته شد (تغییر display) کارش اینه که لایه block رو به شکل inline تبدیل میکنه فقط با این خصوصیت که امکان اعمال propertyهای مربوط به تگ های block رو در css بهتون میده مثل margin ، padding ، width و height
سلام
بسیار خوب بود مشکریم
فقط یک سوال فرض کنیم صفحه ما5بخش دارد بجز هدروفوتر (5تاdiv)آیا بااین روش می توان چیدمان این 5divرا بطوردلخواه تغییر داد ویا فقط بااین روش می توان divها را کنارهم چید