تنظیمات استایل برای ماژول ها

[سعید]

حالا برای هر کدوم از این لایه ها باید یک زمینه انتخاب کنید، هرزمینه به عنوان یکی از اضلاع کادری که مدنظرتون هست.

بطور مثال برای ضلع راست، تعیین می کنید که زمینه لایه (DIV ) در سمت راست لایه قرار بگیره. چپ و بالا و پایین هم همینطور. به این صورت :

TAG {
background: url(../images/bg_1.gif);

background-position: right;

}

ممکنه که ارتفاع کادر شما تغییر کنه بنابراین قطعا ارتفاع این ضلع راست هم تغییر خواهد کرد. دو راه دارید:

1- زمینه ضلع راست رو بزرگ درنظر بگیرید تا در صورت بزرگ تر شدن کادر بتونه ضلع راست رو پوشش بده (توضیح: اگر ابعاد زمینه از ابعاد تگی که زمینه اون هست بیشتر باشه، قسمت اضافی زمینه نمایش داده نمی شه) .
اگر گوشه های کادر شما گرد (smooth) هست باید از این حالت استفاده کنید و بالای زمینه ضلع راست رو گرد در نظر بگیرید. همینطور بالای ضلع چپ و سمت راست و سمت چپ ضلع بالا و پایین.

2- از الگوی تکرار استفاده کنید. مثلا یک یا چند نقطه (pixel) که بصورت عمودی تکرار بشه.

اگر از حالت اول استفاده می کنید و گوشه های زمینه شما گرد هست، باید از تکرار زمینه جلوگیری کنید. ( توضیح: اگر ابعاد زمینه از ابعاد تگی که زمینه اون هست کوچکتر باشه، بطور پیش فرض زمینه تکرار میشه)

TAG {
background: url(../images/bg_1.gif);
background-position: right;

background-repeat: no-repeat;

}

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

TAG {
background: url(../images/bg_1.gif);
background-position: right;

background-repeat: repeat-y;

}

اگر دقت کرده باشید در تعریف Style تگ ها از عبارت TAG استفاده کردیم و در خروجی سورس HTML این DIV ها، هیچ کلاس یا ID به اونها نسبت داده نشده. بنابراین برای مشخص کردن این تگ ها باید از وراثت استفاده کنید.

مثلا :

DIV.module {
background: url(../images/bg_top.gif);
background-position: top;
background-repeat: repeat-x;
}

DIV.module DIV {
background: url(../images/bg_right.gif);
background-position: right;
background-repeat: repeat-y;
}

DIV.module DIV DIV {
background: url(../images/bg_left.gif);
background-position: left;
background-repeat: repeat-y;
}

DIV.module DIV DIV DIV {
background: url(../images/bg_bottom.gif);
background-position: bottom;
background-repeat: repeat-x;
}

در این مثال از الگوی تکرار استفاده شده و گوشه های کادر گرد نیستند.

یا علی