تبلیغات
Fact World - تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css

آموزش برنامه نویسی و مهارتهای وب

article 

تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css

css-body-div-center

اگر یک طراح وب تقریبا حرفه ای یا لااقل علاقمند به طراحی قالب شخصی برای وبلاگ یا سایت خود باشید، حتما با کدهای css آشنا هستید و بارها از آن در شکل دهی فرم و ظاهر صفحات  استفاده کرده اید؛ اگرچه نمای کلی کار با css چندان پیچیده نیست ولی جزئیات و ریزه کاری ها همیشه باعث می شوند که نکاتی هرچند ساده، به نظر مبهم و حل نشده باقی بمانند، به همین خاطر در این مطلب یکی از شایع ترین این موارد را با هم مرور خواهیم کرد و آن تنظیم فاصله بلاک ها و لایه های div از حاشیه صفحه و همچنین قرار دادن آن در وسط (center) به کمک css است.


خاصیت هایی که برای وسط (center) قرار دادن، ایجاد یا حذف فاصله (حاشیه) به آنها نیاز داریم margin و padding هستند.

حذف حاشیه بلاک با استفاده از css


برای حذف حاشیه بین بلاک div  و تگ body کافی است مقادیر margin و padding را برابر صفر قرار دهیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | حذف حاشیه با استفاده از css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    margin:0px;
    padding:0px;
}
.block{
    width:auto;
    height:200px;
    background-color:#CC3;
}
</style>
</head>
<body>
<div class="block">
</div>
<hr />
با استفاده از ویژگی های margin و padding و مقادیر صفر برای تگ body، فاصله حاشیه های صفحه، تنظیم می شود.
</body>
</html>
پیش نمایش
توضیح:
- در مثال بالا بلاکی با کلاس فرضی block را بین تگ body ایجاد کرده ایم که حاشیه آن صفر است و برای body نیز از مقادیر margin و padding صفر استفاده کرده ایم.

نحوه تنظیم یک بلاک در وسط صفحه با استفاده از css


تنظیم بلاک ها در سمت چپ یا راست صفحه به کمک عنصر float و مقادیر left,right به آسانی ممکن است، اما مشکل بیشتر کاربران تنظیم یک بلاک div در وسط صفحه است که در تمام مرورگرها نیز یکسان باشد، در مثال زیر این کار را برای لایه ای با کلاس block انجام داده ایم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تنظیم یک بلاک در وسط صفحه با css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    margin:0px;
    padding:0px;
}
.block{
    width:300px;
    height:200px;
    background-color:#CC3;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>
<div class="block">
</div>
<hr />
برای تنظیم یک بلاک در وسط صفحه از margin-left و margin-right با مقادیر auto برای آن بلاک استفاده می کنیم.
</body>
</html>
پیش نمایش
توضیح:
- همانطور که در کد ملاحظه می کنید، ما از margin-left و margin-right با مقادیر auto استفاده کرده ایم، با این کار مرورگر بلاک مربوطه را در وسط صفحه تنظیم می کند.
- علاوه بر این شما می توانید با مقادیر margin: 0 auto نیز یک بلاک را در وسط صفحه تنظیم کنید.
section دسته بندی: آموزش کاربردی - آموزش کاربردی CSS -


یکشنبه 13 مهر 1393

نظرات ()


یکشنبه 26 شهریور 1396 10:04 ب.ظ
I've been browsing on-line more than three hours these
days, yet I by no means found any attention-grabbing article like yours.
It's pretty value sufficient for me. Personally, if all webmasters and bloggers made just right content material as you did, the net will likely be much more helpful than ever before.
دوشنبه 16 مرداد 1396 02:46 ب.ظ
Helpful info. Fortunate me I discovered your web site by accident, and I'm shocked why this twist of fate did not
happened earlier! I bookmarked it.

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )