آموزش رفع مشکل زیر منو ها در قالب های آرتیستر

[artoor1]

سلام دوستان. حدود یک هفته بود که مشکل خود من منو آبشاری بود و تا امروز حل نمیشد. بالاخره یه آموزش از یه سایتی گرفتم و خلاصه ی اونو در اختیارتون میذارم. امیدوارم بدردتون بخوره.


در پوشه ی قالبی که با آرتیستر ساختید فایل template.css رو باز می کنید و برای فارسی سازی کل قالب این کارا رو انجام می دید:

همه ی text align:left و text-align: left و float:left و float: left رو پیدا می کنید و left رو پاک می کنید و به جاش می نویسید right.

تا اینجا تونستید قالب آرتیستر رو راست چین کنید. حالا بریم سراغ درست کردن زیر منو ها که از زیر به سمت چپ باز میشن. با اعمال تغییرات زیر میبینید که از زیر به سمت راست باز میشن:

این کدها رو پیدا کنید:

کد: (انتخاب همه)

.art-hmenu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background: none;
  min-height: 0;
  background-image: url('../images/spacer.gif');
  padding: 10px 30px 30px 30px;
  margin: -10px  0 0 -30px;
}

خب حالا فقط با خط ششم و خط یکی مونده به آخری کارداریم. که left رو پاک می کنیم و جاش right می نویسیم. و خط یکی مونده به آخری رو هم اینجوری تغییر میدیم:

کد: (انتخاب همه)

margin: -10px -30px 0 0;

به همین راحتی. البته دقت کنید که شاید عددای شما 10- و -30 نباشن و مثلاً 10- یا 20- یا هر عدد دیگه ای باشن.


خب شاید زیر منو های شما خودشون باز زیر منو داشته باشن که مشکل اونا هم اینجوری حل میشه:

تو فایل template.css چند خط پایین تر از او کدی که بالا نوشتم و مربوط به زیر منو بود کد مربوط به زیر زیر منو هست یعنی این:

کد: (انتخاب همه)

.art-hmenu li li:hover>ul
{
  top: 0;
  left: 100%;
}

که کافیه به جای left:100% باید بنویسید right:10em. البته باید سایتتون رو باز کنید و ببینید عدد 10em مناسبه یا نه. اگه زیاد فاصله داشت یا زیاد تو رفته بود می تونید به جاش عدد کمتر یا بیشتری بذارید. مثلا من خودم عدد 9.5em رو گذاشتم.

البته برای سازگار کردن این منو با اینترنت اکسپلورر 7 کدی که اول ویرایش کردین رو کپی می کنید و فایل template.ie7.css رو باز می کنید و توی اون میذارید. یعنی این کد:

کد: (انتخاب همه)

.art-hmenu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  background: none;
  min-height: 0;
  background-image: url('../images/spacer.gif');
  padding: 10px 30px 30px 30px;
  margin: -10px -30px 0 0 ;
}

موفق باشید . . .