ساخت هدر قالب 7

در این قسمت قصد داریم تراز بندی هدر (همان وسط چین) کردن  هدر را باهم بیاموزیم

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

margin-right

margin-left

margin-top

margin-bottom

ما اینجا به سه تا از این خاصیت ها نیاز داریم تراز بالا ، راست و چپ برای اینکه هدر خود را به وسط منتقل کنیم ابتدا به استایل هدر می رویم

#header{
     width: 960px;
     height: 150px;
     padding: 0;
     background-color: #FF0000;
     background-image: none ;
     border-right: solid 1px ;
     border-left:solid 1px ;
     border-top: solid 1px;
    }

و خاصیت های margin را اینگونه به هدر اضافه میکنیم

margin-right: auto;

margin-left: auto;

 

خب چرا از در تراز بندی از auto استفاده کردیم ؟ جواب برای اینکه مقدار زمانی که این دو مقدار برای چپ و راست کنار هم قرار گیرند به وسط منتقل می گرددندحالا این دو را به استایل هدر خود اضافه می کنیم

#header{
width: 960px;
height: 150px;
padding: 0;
background-color: #FF0000;
background-image: none ;
border-right: solid 1px ;
border-left:solid 1px ;
border-top: solid 1px;
margin-right: auto;
margin-left: auto;
}

خب تا اینجا وسط چین شدن هدر را باهم دیدیم اما خاصیت margin فقط شامل این مقدار auto نمی باشد بلکه می توانید از اعداد نیز برای جا به جایی استفاده کنید.

برای مثال ما می خواهید هدر خود به اندازه 10 پیکسل از بالا فاصله داشته باشد و از سقف جدا گردد به این شکل استفاده می کنیم

margin-top: 10px; 

در آخر این بحث کد هدر ما به این شکل خواهد بود

#header{
width: 960px;
height: 150px;
padding: 0;
background-color: #FF0000;
background-image: none ;
border-right: solid 1px ;
border-left:solid 1px ;
border-top: solid 1px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}

نکته بسیار مهم : اگر این صفحه ای که تا به الان درست کرده ایم را با مرورگر اینترنت اکسپلورر تست کرده باشید می بینید که تراز بندی به هم ریخته و هدر ما وسط قرار ندارد برای رفع این مشکل بایستی از کدهایی استفاده کنیم که باعث سازگاری نسبی با مرورگر اینترنت اکسپلورر شود

برای این کار کد زیر را بالا صفحه قبل از تگ html این کد را قرار دهید

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

 

در پایان کد کلی این بخش به این صورت خواهد بود

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *