شما عضو این انجمن نبوده یا وارد نشده اید. لطفا برای مشاهده کامل انجمن و استفاده از آن وارد شوید یا ثبت نام کنید .

امتیاز موضوع:
  • 82 رأی - میانگین امتیازات: 2.83
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

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

برای حذف حاشیه بین بلاک div  و تگ body کافی است مقادیر margin و padding را برابر صفر قرار دهیم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

توضیح:
- در مثال بالا بلاکی با کلاس فرضی block را بین تگ body ایجاد کرده ایم که حاشیه آن صفر است و برای body نیز از مقادیر margin و padding صفر استفاده کرده ایم.

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


تنظیم بلاک ها در سمت چپ یا راست صفحه به کمک عنصر float و مقادیر left,right به آسانی ممکن است، اما مشکل بیشتر کاربران تنظیم یک بلاک div در وسط صفحه است که در تمام مرورگرها نیز یکسان باشد، در مثال زیر این کار را برای لایه ای با کلاس block انجام داده ایم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

توضیح:
- همانطور که در کد ملاحظه می کنید، ما از margin-left و margin-right با مقادیر auto استفاده کرده ایم، با این کار مرورگر بلاک مربوطه را در وسط صفحه تنظیم می کند.
- علاوه بر این شما می توانید با مقادیر margin: 0 auto نیز یک بلاک را در وسط صفحه تنظیم کنید.
ثبت دامنه و فروش هاست، سامانه پیامک، طراحی سایت، خدمات شبکه
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
  | دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

sms: 10004673  - 500021995


موضوع‌های مشابه…
موضوع نویسنده پاسخ بازدید آخرین ارسال
  ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3 saberi 0 2,141 ۹۴/۶/۲۳، ۱۰:۴۹ عصر
آخرین ارسال: saberi
  نحوه تنظیم لیست با تگ ul li در css saberi 0 2,304 ۹۴/۶/۲۳، ۰۹:۴۲ عصر
آخرین ارسال: saberi
  نحوه تنظیم لینک (link) در استایل css saberi 0 2,044 ۹۴/۶/۲۳، ۰۹:۳۷ عصر
آخرین ارسال: saberi

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان