parsgreen.com
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
related مطالب بیشتر:
» چسبیدن فوتر قالب به پائین صفحه با CSS
» ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3
» حذف اسکرول افقی (horizontal scroll) با css
» ساخت بلاک شناور عمودی با CSS
» آموزش استفاده از فونت فارسی در وب با CSS
commentنظرات (۲۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: میلاد
زمان: ۱۴:۳۲:۳۹ - تاریخ: ۱۳۹۱/۰۴/۲۹
سلام بر استادان سایت وبگو
استاد اول بخاطر این سایت خیلی خیلی خوب از شما تشکر میکنم دوم استاد من میخوام یه سایت مثل سایت شما با استفاده از html و css بسازم منو راهنمایی کنید.
آموزش های css رو ادامه بدین من کل اینترنت رو گشتم ولی سایتی مثل سایت شما پیدا نکردم.
پاسخ: 
سلام.
نظر لطف شماست دوست گرامی؛ سایت های بسیار خوبی به زبان فارسی در وب فعالیت می کنند، تلاش ما بر این است که جزء یکی از خوب ها باشیم.
در مورد ایجاد سایت با html و css واقعیت این است که انجام این کار علاوه بر موارد گفته شده نیازمند آشنایی با یکی از زبان های سمت سرور مثل php ، asp و... است، البته این موضوع بستگی به هدف شما نیز دارد، چرا که سیستم های مدیریت محتوا (CMS) متن باز (open source) زیادی برای ایجاد سایت قابل استفاده است مانند جوملا، وردپرس و... که عموما نیاز های وبمسترها را برآورده می کنند، اما اگر می خواهید همه چیز باب میل خودتان باشد، لازمه آن تسلط و تجربه نسبی در وب است و جز این چاره ای نیست.
نویسنده: فریبا
زمان: ۲۲:۲۹:۱۰ - تاریخ: ۱۳۹۱/۰۵/۱۵
سلام
بابت مطالب عالی سایتتون یه دنیا از تون ممنونم.
یه سوال: چطور میشه داخل یک div دو تا div دیگر گذاشت یعنی یه div برای کل سایت که داخلش یه div برای هدر یه div برای فوتر یه div برای محتوا که داخل این div دو تا div دیگه یکی برای منوهای عمودی یکی هم برای متن.
پاسخ: 
سلام
این کار چندان سخت نیست، منتها اگر با CSS و خاصیت های عناصر آن آشنا باشید، در html کافی است بلاک های div را تو در تو و طبق قاعده تگ ها، با توجه به نیاز خود در طراحی، ایجاد کنید، به فرض مثال زیر را ملاحظه کنید:
<div><!-- شروع بلاک اصلی -->
<div></div><!-- بلاک هدر -->
<div></div><!-- بلاک منوی سایت -->
<div><!-- شروع بلاک محتوا -->
<div></div><!-- سایدبار سمت راست -->
<div></div><!-- محتوای وسط صفحه -->
<div></div><!-- سایدبار سمت چپ -->
</div><!-- پایان بلاک محتوا -->
</div><!-- پایان بلاک اصلی -->
به این حالت در اصطلاح بلاک های آشیانه ای می گویند، در کل محدودیتی به لحاظ تعداد بلاک های تو در تو نیست، اما به طور طبیعی میزان استانداردی از آنها، قالب های معمول وب را فرم می دهند و نیازی نیست که الزاما از تعداد زیادی div استفاده کنیم، پس از قرار دادن div ها، بخش مهم کار، استایل نویسی و نسبت دادن کلاس های css به آنها است که لازمه آن، آشنایی و تجربه نسبی در این خصوص است.
نویسنده: سعید
زمان: ۰۳:۰۰:۰۵ - تاریخ: ۱۳۹۱/۰۷/۱۲
مرسی از آموزشهای خوبتون. یه سوال: اگر بخوایم موقع تغییر اندازه صفحه شکل تگهای دیو ثابت بمونه باید چه روشی رو پیش بگیریم؟
پاسخ: 
سلام
برای اینکه اندازه تگ های div مقادیر ثابت باشد باید از مقدار دهی پیکسلی (px) استفاده کنید، دقت کنید که اگر بلاک div زیرمجموعه بلاک دیگری باشد، بلاک اصلی هم باید به صورت پیکسلی مقدار دهی شود.
نویسنده: ahmad
زمان: ۰۱:۴۰:۰۱ - تاریخ: ۱۳۹۱/۱۱/۱۷
واقعا عالیه در حد لالیگا
نویسنده: Mehran
زمان: ۱۱:۵۲:۳۰ - تاریخ: ۱۳۹۱/۱۲/۲۱
یه دنیا ممنون...
نویسنده: فريبا
زمان: ۱۷:۳۱:۲۳ - تاریخ: ۱۳۹۲/۰۴/۰۵
سلام
اگه ممكنه در مورد فريم ورك هاي CSS هم توضيح بدين؟
ممنون
پاسخ: 
سلام
اگر منظورتان آموزش نحوه طراحی فریم ورک های CSS است، به جهت مفصل و پیشرفته بودن مبحث در آینده به آن خواهیم پرداخت، اما به اختصار مانند سایر زبان های برنامه نویسی، در CSS نیز برای اهداف زیر از فریم ورک استفاده می شود:
- یک بار نویسی و چندین بار استفاده.
- توسعه پذیری.
- یکپارچگی.
- و...
به عبارت دیگر فریم ورک در اینجا چیزی نیست جزء مجموعه ای منظم از کلاس ها و الگوهای آماده در یک یا چند فایل CSS که می توان در پروژه های مختلف (بدون نیاز به نوشتن کدها و اعمال تغییرات جدید) از آنها استفاده کرد، این شیوه بیشتر مورد استفاده افراد و شرکت هایی است که به طور اختصاصی در زمینه طراحی وب فعال هستند و مهم ترین مزیت آن افزایش سرعت در انجام کارها است.
نویسنده: amirhossein
زمان: ۱۳:۰۳:۲۳ - تاریخ: ۱۳۹۲/۰۴/۱۶
خیلی گلی داداش ممنون من به max-height توجه نکرده بودم :دی
نویسنده: amirhossein
زمان: ۱۴:۱۰:۵۸ - تاریخ: ۱۳۹۲/۰۴/۱۶
سلام
من کل مطالب آموزشی سی اس اس ها رو خوندم خیلی عالی بود بی نهایت تشکر میکنم همیشه موفق باشید و امیدوارم این اموزش ها ادامه داشته باشه
اگه امکانش هست واسم یه باکس درست کنید و با یه دکمه که روی آن دکمه کلیک کنی ارتفاع باکس دو یا سه برابر بشه آیا امکان نوشتن همچین ابزاری با سی اس اس هست؟ ممنون
پاسخ: 
سلام
نظر لطف شما است، در مورد نوشتن باکس که با کلیک تغییر اندازه دهد، متاسفانه به دلیل فرصت کم امکان نوشتن کد نیست، ضمن اینکه در CSS رویداد خاصی برای onclick وجود ندارد، تنها مورد مشابه selector active است که با onclick فرق می کند، حالت active زمانی اجرا می شود که ماوس در حالت نگهداشته شده باشد، مثال:
#block {
width:100px;
height:50px;
}
#block:active {
width:300px;
height:150px;
}
برای onclick باید از جاوا اسکریپت استفاده کنید.
نویسنده: amirhossein
زمان: ۱۷:۴۷:۲۲ - تاریخ: ۱۳۹۲/۰۴/۱۶
<!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><-BlogAndPostTitle-></title>
<meta name="description" CONTENT="<-BlogAndPostTitle-> - <-BlogDescription->" />
<meta name="keywords" content="<-BlogAndPostTitle->, <-BlogId->" />
<meta http-equiv="Cache-control" content="public" />
<meta name="generator" content="blogfa.com" />
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />
<meta name="robots" content="index, follow" />
<meta name="author" content="<-PostAuthor->" />
<meta name="copyright" content="Copyright (C) 2013" />
<meta name="designer" content="قالب های پاتوق باز طرح | patoghbaz.ir" />
<link rel="shortcut icon" href="http://s2.picofile.com/file/7708795050/img1.gif" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
این متا تگ ها مشکلی ندارند؟
پاسخ: 
مشکل خاصی دیده نمی شود!
نکته: لطفا حتی الامکان سوالات را در مطالب مرتبط مطرح نمائید.
نویسنده: amirhossein
زمان: ۲۱:۱۶:۳۳ - تاریخ: ۱۳۹۲/۰۴/۱۶
چشم داداش عذر میخوام مزاحم شدم بازم مزاحم میشم اگه مشکلی نباشه ممنون بابت جواب موفق باشید
نویسنده: شقایق
زمان: ۱۷:۵۳:۲۸ - تاریخ: ۱۳۹۲/۰۴/۲۲
مرسی مرسی مرسی
نویسنده: hosein
زمان: ۱۹:۵۵:۳۷ - تاریخ: ۱۳۹۲/۱۰/۳۰
سلام
ممنون از آموزشهاي css
من يه مشكل دارم و اونم نحوه اولويت بندي بلاك هاي css در صفحه هست يعني چطوري ميتونم تعيين كنم كه كدوم بلاك روي بلاك ديگه نمايش داده شه.
مثلا ّبلاك منو و بلاك اسلايدر خبري
من ميخوام بلاك منو روي بلاك اسلايدر نمايش داده بشه؟
پاسخ: 
سلام
برای این موارد باید بر خاصیت های مختلف CSS و اثر آنها در تنظیم عناصر HTML، با تمرین و تکرار زیاد مسلط شوید، پاسخ ساده ای برای سوالتان وجود ندارد!
نویسنده: مژگان
زمان: ۱۲:۳۹:۴۰ - تاریخ: ۱۳۹۳/۰۳/۳۱
سلام. سایتت خیلی عالیه. خیلی ممنون بابت مطالب مفیدی که میذاری تو سایت.
یه سوال دارم کدی که میذارم رو ببین. میخوام که یه دایو 100% پهنا داشته باشه و داخل اون 3 تا دایو داشته باشم که هر کدوم 33% پهنا داشته باشه. این کد رو نوشتم ولی در تغییر سایز ستون سوم میره خط بعد.
<html>
<head>
<meta charset="utf-8"/>
<title>
test
</title>
</head>
<style>
.main{
width:100%;
height:100%;
display: inline-block;
}
.col1{
width:33%;
height:100%;
display: inline-block;
background-color:#fa1;
}
.col2{
width:33%;
height:100%;
display: inline-block;
background-color:#bb8;
}
.col3{
width:33%;
height:100%;
display: inline-block;
background-color:#f88;
}
</style>
<body>
<div class="main">
<div class="col1">
ستون اول
</div>
<div class="col2">
ستون دوم
</div>
<div class="col3">
ستون سوم
</div>
</div>
</body>
</html>
پاسخ: 
سلام
برای مشکل به هم ریخته شدن بلاک ها در هنگام zoom مرورگر چاره استانداردی وجود ندارد، تنها راه حل این است که طوری فرمت بندی کنید که یک فضای خالی برای بلاک ها وجود داشته باشد، به طور مثال به جای 33 از 32 درصد استفاده کنید، سایت های زیادی در وب در قسمتی این مشکل را دارند و لذا این حالت خیلی عجیب نیست!
نویسنده: مژگان
زمان: ۲۱:۲۲:۴۷ - تاریخ: ۱۳۹۳/۰۴/۰۲
اما من اگه 32 هم میدم بازم وقتی صفحه رو خیلی کوچیک کنم باز ستون سوم میاد خط بعد!؟!؟
پاسخ: 
32 یک مثال بود! باید طوری فرمت بندی کنید که به اینگونه مشکلات بر نخورید، به طور مثال ساختار تو در توی بهتری ایجاد کنید، یا بدون اینکه در ظاهر کار خللی ایجاد شود، در موارد لازم فاصله های خالی در بین بلاک های قالبتان داشته باشید (در کل رفع اینگونه مشکلات تا حدود زیادی به داشتن تجربه کار با CSS برمی گردد و فرمول ثابتی وجود ندارد!).
نویسنده: تیمور
زمان: ۱۰:۳۸:۳۷ - تاریخ: ۱۳۹۳/۰۴/۰۸
سلام
من مشکل مژگان رو خوندم و تست کردم
من به جای استفاده از div از span استفاده کردم
هنوز اول کارم ولی فکر کنم یه جا خونده بودم که div یک تگ outline و span یک تگ inline هست که باعث میشه ستون ها توی یه خط قرار بگیرن..
پاسخ: 
سلام
ضمن تشکر از شما به خاطر شرکت در بحث، البته مشکل این کاربر به حالت Zoom صفحه مربوط می شود که حتی در حالت inline باعث به هم ریخته شدن بلاک های در یک ردیف می شود.
paged صفحه 1 از 2




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

6 × 7
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...