تنظیم موقعیت در وسط و حذف حاشیه ها با CSS

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظیم بلاک در وسط بلاک والد با CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
html, body{
    margin:0px;
    padding:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.parent-block{
    width:100%;
    height:200px;
    background-color:#C0C0C0;
    border:1px solid #F90004;    
}
.center-block{
    width:300px;
    height:200px;
    background-color:#CC3;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>
<div class="parent-block">
<div class="center-block"></div>
</div>
<hr>
برای تنظیم بلاک در وسط بلاک والد از margin-left و margin-right با مقادیر auto استفاده می کنیم، در نمونه کد بالا بلاک رنگی در وسط بلاک والد خود قرار گرفته و متمایز است.
</body>
</html>

پیش نمایش
همانطور که در کد ملاحظه می کنید از margin-left و margin-right با مقادیر auto استفاده کرده ایم، با این کار مرورگر بلاک مربوطه را در وسط بلاک والد آن تنظیم می کند، علاوه بر این می توانیم با مقادیر

margin: 0 auto;

نیز یک بلاک را در وسط عنصر والد آن تنظیم کنیم.

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

در طراحی رابط کاربری وب ممکن است نیاز به نمایش بلاکی در وسط صفحه مرورگر باشد که معمولا جهت نمایش پنجره پاپ آپ سفارشی یا نمایش پیام تائید، ایجاد قسمت ورود به سایت و مواردی از این دست استفاده می شود، طراحی این قسمت نیز با کدنویسی HTML و تعیین استایل CSS مناسب ممکن است:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظیم بلاک در وسط صفحه نمایش با CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
html, body{
    margin:0px;
    padding:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.popup-block{
    position:fixed;
    top:50%;
    left:50%;
    width:300px;
    height:200px;
    margin-top:-100px;
    margin-left:-150px;
    background-color:#318DAF;    
}
</style>
</head>
<body>
<div class="popup-block"></div>
<hr>
برای تنظیم بلاک در وسط صفحه نمایش از position با مقادیر fixed یا absolute استفاده می کنیم، همچنین خاصیت های top و left باید با مقدار 50 درصد تعریف شوند، نکته مهم دیگر اینکه متناسب با top و left باید margin-top و margin-left با نصف مقدار height و width به صورت منفی مقداردهی شوند.
</body>
</html>

پیش نمایش
از چند خاصیت در این تکنیک استفاده شده، ابتدا بلاک div را با اندازه پیکسلی مشخص ایجاد و با خاصیت position و مقادیر fixed یا absolute مقداردهی می کنیم، این کار باعث می شود بلاک ما به صورت مستقل از سایر عناصر والد خاصیت های CSS را اجرا کند، در گام دوم برای اینکه بلاک در وسط صفحه قرار بگیرد با خاصیت top و left (یا right) از بالای صفحه نمایش 50 درصد و از سمت چپ (یا راست) نیز 50 درصد حاشیه ایجاد می کنیم، با توجه به اینکه تاثیر مقادیر از لبه های کناری بلاک محاسبه می شود و عنصر دقیقا در وسط صفحه قرار نمی گیرد باید margin-top و margin-left با مقادیر منفی در نظر بگیریم تا دقیقا از وسط بلاک مقدار top و left محاسبه شود، قاعدتا برای این کار باید margin-top و margin-left را با نصف مقادیر height و width به صورت منفی در نظر بگیریم تا بلاک از موقعیت فعلی خود به سمت بالا و چپ حرکت کند و دقیقا در وسط صفحه نمایش قرار گیرد.

حذف حاشیه ها از لبه های کناری با استفاده از CSS

به طور معمول مرورگرهای وب خاصیت هایی را با مقادیر مشخص به صورت پیش فرض روی عناصر موجود در صفحه وب اعمال می کنند که یکی از این موارد در نظر گرفتن مقدار padding و margin برای تگ html یا body است که موجب می شود اندک فضای خالی در گوشه ها و لبه های کناری مرورگر و صفحه نمایش ایجاد شود، خوشبختانه برای حذف این حاشیه هایی که شاید مد نظر ما نباشند می توانیم در قسمت استایل CSS برای این دو تگ padding و margin اختصاصی با مقدار 0 تعریف کنیم تا قالب به اصطلاح به طور کامل به گوشه های پنجره مرورگر بچسبد و تمام فضای موجود را پوشش دهد، به طور مثال:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | حذف حاشیه ها از لبه های کناری با استفاده از CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
html, body{
    margin:0px;
    padding:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.top-block{
    width:auto;
    height:200px;
    background-color:#CC3;
}
</style>
</head>
<body>
<div class="top-block"></div>
<hr>
 با استفاده از ویژگی های padding و margin و در نظر گرفتن مقدار 0 برای تگ html و body، فاصله پیش فرض حاشیه های صفحه نمایش از تگ والد قالب حذف می شود.
</body>
</html>

پیش نمایش
در مثال بالا بلاکی با کلاس فرضی top-block را بین تگ body ایجاد کرده ایم که حاشیه آن 0 است و برای body و html نیز از مقادیر padding و margin با مقدار 0 استفاده کرده ایم، به این ترتیب هیچ حاشیه اضافه ای بین قالب وب و صفحه نمایش ایجاد نمی شود و می توانیم از تمام فضای موجود استفاده کنیم، این شیوه امروزه یک روش مرسوم در بین طراحان وب و به خصوص در طراحی قالب های واکنش گرا (Responsive) است، برخی طراحان نیز از فایل هایی تحت عنوان Reset استفاده می کنند که با این روش تمام خاصیت های پیش فرض CSS مرورگرها را نادیده می گیرند.
نکته: با وجود اینکه در استانداردهای جدید کنسرسیوم جهانی وب W3C تگ html نباید padding و margin پیش فرض داشته باشد، با این حال برخی مرورگرها همچنان رویه خاص خودشان را دارند و بهتر است که در کنار تگ body برای تگ html نیز padding و margin را برابر 0 قرار دهیم.

دسته بندی: آموزش کاربردی » CSS

برچسب ها: CSS

قبلی »

« بعدی

مطالب بیشتر:
آموزش استفاده از فونت فارسی در وب با CSS
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
چسبیدن فوتر قالب به پائین صفحه با CSS
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
ساخت بلاک شناور عمودی با CSS

دیدگاه

۳۱ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

میلاد

۱۴:۳۲ ۱۳۹۱/۰۴/۲۹

سلام بر استادان سایت وبگو
استاد اول بخاطر این سایت خیلی خیلی خوب از شما تشکر میکنم دوم استاد من میخوام یه سایت مثل سایت شما با استفاده از html و css بسازم منو راهنمایی کنید.
آموزش های css رو ادامه بدین من کل اینترنت رو گشتم ولی سایتی مثل سایت شما پیدا نکردم.

نظر لطف شماست دوست گرامی، سایت های بسیار خوبی به زبان فارسی در وب فعالیت می کنند، تلاش ما بر این است که جزء یکی از خوب ها باشیم.
در مورد ایجاد سایت با HTML و CSS واقعیت این است که انجام این کار علاوه بر موارد گفته شده نیازمند آشنایی با یکی از زبان های سمت سرور مثل PHP ،ASP و... است، البته این موضوع بستگی به هدف شما نیز دارد، چرا که سیستم های مدیریت محتوا (CMS) متن باز (Open Source) زیادی برای ایجاد سایت قابل استفاده است مانند جوملا، وردپرس و... که عموما نیاز های وبمسترها را برآورده می کنند، اما اگر می خواهید همه چیز باب میل خودتان باشد، لازمه آن تسلط و تجربه نسبی در وب است و جز این چاره ای نیست.

نخست

قبلی

بعدی

آخر

صفحه 3 از 3

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