درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

عضویت در

کانال تلگرام

توسینسو

اطلاعات مطلب
مدرس/نویسنده
پارسا صفوی
امتیاز: 17244
رتبه:34
20
30
10
138
طراح و برنامه نویس وب و ویندوز با استفاده از C# و ASP.NET MVC پروفایل کاربر

طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها

تاریخ 46 ماه قبل
نظرات 0
بازدیدها 918
سلام به دوستان خوب ITPRO
در جلسه ی قبل با Box Model آشنا شدیم و یاد گرفتیم که با استفاده از آن به یک Div شکل دهیم. این جلسه یکی از مهم ترین جلسات خواهد بود چون می خواهیم با Float ها کار کنیم که مبحث مهمی در طراحی وبسایت است.

Float ها


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

با استفاده از Float ها می توانیم وبسایت هایی به این شکل درست کنیم:
floats

چیدن المان ها بر اساس Float ها مثل چیدن آجر می ماند که باید به ترتیب آجر ها را در ردیف خودشان در کنار هم قرار داد. برای آموزش این قسمت من فولدر peroject7 را ایجاد می کنم و درون آن فایل index.html را با تگ ها اولیه قرار می دهم.
سپس درون آن تگ های Header ، Section ، Aside و Footer را قرار می دهم. و سپس درون هر یک با یک پاراگراف نامش را می نویسم.

<!DOCTYPE html>
	<html>
	<head>
		<title>ITPRO</title>
		<style>
			body{
				direction:rtl;
			}
		</style>
	</head>
	<body>	
		<header>
			<p>Header</p>
		</header>
		<aside>
			<p>Aside</p>
		</aside>
		<section>
			<p>Section</p>
		</section>
		<footer>
			<p>Footer</p>
		</footer>
	</body>
</html>	

سپس به هر کدام Width و Border و Margin می دهم.
header,footer{
    width:90%;
    margin:20px 5% 20px 0;
    border:1px solid orange;
}
aside,section{
    width:45%;
    margin:20px 5% 20px 0;
    border:1px solid orange;    
}
توجه داشته باشید که با گذاشتن , می توانیم دو المان را با هم Select کنیم.(در بین دو Selector "," قرار می دهیم.)
من به این دلیل Aside و Section را جدا Style دادم چون می خواهم آن ها را در کنار هم قرار دهم و نباید به اندازه ی بقیه عرض داشته باشند(باید روی هم به اندازه ی بقیه عرض صفحه را بگیرند.) بنابر این من width آن ها را نصف بقیه قرار دادم.
خروجی:
floats

خب حالا می خواهیم آن ها را در کنار هم قرار دهیم. برای این کار ما از Css استفاده می کنیم:
aside,section{
    width:45%;
    margin:20px 5% 20px 0;
    border:1px solid orange;
    float:right;
}

برای چیدن باید از Float استفاده کنیم. در نظر داشته باشید که Float المان ها را به یک طرف می برد و در انتظار المان بعدی می گذارد تا به کنار آن بیاید. به بیان دیگر ما وقتی به یک المان Float مثلا راست می دهیم ، المان به سمت راست صفحه می چسبد و وقتی به المان بعدی آن نیز Float از نوع راست می دهیم المان بعدی نیز به راست ترین جای ممکن یعنی المان قبل می چسبد.(اگر متوجه نشدید نگران نباشید به مرور این مطلب جا می افتد.)
خروجی:
floats

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

Clear Fix

وقتی ما تگ ها را با استفاده از Float در کنار هم قرار می دهیم تگ آخر که دیگر المانی به آن نمی چسبد در انتظار یک تگ باقی می ماند که باعث بروز مشکلاتی در چیدمان صفحه می شود. برای جلوگیری از این کار ما باید به المان آخر بفهمانیم که دیگر تگی Float نخواهد داشت که در کنار المان قرار گیرد. برای این کار ما باید یک Div با Style زیر درست بعد از المان آخر بگذاریم.
    clear:both;

اما برای این که ما چندین بار این Div ها را Select کنیم ، کلاسی به نام Clear-fix تعریف می کنیم و در پایان هر کدام از Float های صفحه یک Div با کلاس Clear-fix قرار می دهیم.
div.clear-fix{
    clear:both;
}

خروجی کد بالایی:
floats

دیدیم که باز هم المان ها در کنار هم قرار نگرفتند. اگر یادتان باشد در جلسه ی قبل گفتیم که Marginو Padding و Border در تعیین عرض المان نقش دارند. اگر به کد دقت کنید ما دو المان با عرض 45% داریم که روی هم می شوند 90%. علاوه بر آن هر کدام از آنها 5% Margin در سمت راست دارند که با آن 90% می شود 100% . و در نهایت هر کدام Border هایی از سمت چپ و راست دارند که 1px عرض دارند یعنی در کل 4px. از این محاسبه می شود نتیجه گرفت که ما بیش از اندازه ی عرض صفحه به المان ها Width , Borderو Margin دادیم بنابر این المان ها فضایی برای این که در کنار هم قرار بگیرند ندارند و یکی از آن ها به پایین منتقل می شود. برای جلوگیری از این کار من Margin سمت راست المان ها را نصف می کنم :
section,aside{
				width:45%;
				margin:20px 2.5% 20px 0;
				border:1px solid orange;
				float:right;
			}

دیدیم که رد کد بالا من Mergin راست را که 5% بود به 2.5% کاهش دادم.
خروجی:
floats

حالا المان ها در کنار هم قرار گرفتند . اما اگر دقت کنید کمی سطر وسطی عرض بیشتری دارد. اگر حساب بکنید میبینید که عرض هر دو برابر است اما یک نکته ی ریز جا مانده ! قسمت های بالایی و پایینی(header و footer) 2px را به Border های راست و چپ خود اختصاص داده اند اما در قسمت وسط به علت این که ما دو تگ div داریم و هر کدام 2px را به Border اختصاص داده اند در حقیقت ما 4px کادر (border ) خواهیم داشت یعنی 2px بیشتر از دو قسمت بالا و پایین!! برای جلوگیری از این اتفاق ما باید 2px از مجموع عرض این دو تگ کم کنیم .
در قسمت بعد با Background ها و Position آشنا خواهیم شد.

ممنون از همراهی شما
ITPRO باشید
محمد پارسا صفوی
انجمن تخصصی فناوری اطلاعات ایران
برچسب ها
ردیف عنوان
1 طراحی وب سایت با کمک HTML و CSS - بخش اول :: مقدمه
2 طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها
3 طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها
4 طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته
5 طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model
6 طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها
7 طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها
8 طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول
10 طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها
11 طراحی وب سایت با کمک HTML و CSS - بخش یازدهم :: Animation ها
12 طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها
دوره مجموعه کل دوره
مطالب مرتبط

در حال دریافت اطلاعات

نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید