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

همونطور که میدونید مونیتورهای نسل جدید، اکثرا عریض (wide) شده اند و رزولوشن در آنها افزایش یافته. این مورد بسیار مهم و قابل اهمیت است! چرا که اگر شما در مقدار دهی به حاشیه بلوک های اصلی قالب، از واحد مناسبی استفاده نکنید، قطعا دچار مشکل می شوید!
واضح تر میگویم. به عنوان مثال مونیتور شما دارای رزولوشن 1024×768 هست! قالب خود را طراحی میکنید. بعد همین قالب را در رزولوشن 1200×800 نگاه میکنید! بر خلاف انتظارتان محتوای قالب به سمت چپ یا سمت راست صفحه نزدیک شده است! در صورتی که در حالت عادی باید وسط صفحه قرار داشته باشد! اما نگران نباشید! خیلی راحت میشود مشکل را برطرف کرد. درواقع شما واحد مناسبی را برای مقداردهی به حاشیه ها (margin) انتخاب نکرده اید! مثلا از واحد px یا em استفاده کرده اید!
حالا چکار باید بکنیم؟!
باید از واحد درصد – % – استفاده کنید! مثلا بجای اینکه بگویید:

Margin-left: 370px;

بگویید:

Margin-left: 30%;

بیشتر توضیح میدم. واحدهای px یا em، یک مقدار ثابت ایجاد میکنن. یعنی مثلا همیشه حاشیه ی فلان عنصر 300 پیکسل از سمت راستش فاصله داشته باشه! خب، این کار اشتباه نیست، اما مشکل زمانی ایجاد میشه که رزولوشن تغییر بکنه! در این صورت هست که محتوای قالب، دیگه وسط صفحه قرار نمیگیره و مثلا به سمت راست یا چپ نزدیک میشه!
اما وقتی که به صورت درصدی، به حاشیه ی فلان عنصر، مقدار میدید، دیگه این مقدار، ثابت نیست. یعنی با توجه به رزولوشن، مثلا 20 درصد از سمت راست، فاصله ایجاد میشه!
برای درک راحت تر قضیه، تصاویر زیر رو آماده کردم. ببینید:

در تصویر زیر، طراح با استفاده از واحد پیکسل، به بلوک ها فاصله داده. در رزولوشن 1024×768، هیچ مشکلی دیده نمیشه و همه چیز سر جاش هست:

pixel-1024x768

اما همین طرح در رزولوشن 1200×800، به سمت راست نزدیک شده:

pixel-1200x800

طراح به اشتباه خودش پی برد و واحد درصد – % – رو جایگزین واحد پیکسل – px – کرد:

percent-1024x768

با تغییر رزولوشن، هیچ جابجایی ای در قالب ایجاد نشد و همه چیز همونطور هست که باید باشه:

percent-1200x800

البته نکته‌ ای که هست، ما برای وسط آوردن طرح کلا از این روش استفاده نمی‌کنیم. این ها فقط مثال بودند برای درک واحد درصد.

ضمنا یک موردی رو هم بگم. استفاده از واحد em برای مقداردهی به حاشیه ها و غیره، اصلا توصیه نمیشه. کاربرد این واحد بیشتر برای تعیین اندازه ی فونت است!

خب، برای این قسمت، تا همینجا کافیه. اگر جالب نبود، بگذارید به حساب بی تجربگی بنده ;)

دیدگاه‌ها (10)

  • مثل همیشه بسیار عالی !! راستی به نظرت Margin رو عدد بالا بزنیم بهتره یا پایین؟
    مثلا فرض کن در یه مانیتور معمولی 10% Margin از چپ و راست کافیه. احتمال هم داده میشه در یه مانیتور واید نهایتا 15 درصد لازم باشه . به نظرت اگه یهو Margin چپ و راست رو هر کدوم رو 30% بزنیم مشکل درست میکنه؟ ممکنه بخش وسط بیش از اندازه جمع بشه ؟
    ______________
    علیرضا در جواب گفت:
    فرقی نمیکنه… اگه مقدار پایین لازم داری پایین، اگه بالا نیاز داری بالا بده!
    اگه مارجین های چپ و راست یه عنصر رو جدا به هرکدوم 30% بدی که دیگه چیزی از اون نمیمونه! دقیقا میشه یه خط عمودی! معمولا حدود همون 10% کافیه…

    پاسخ

  • با سلام من عادل رحیمی هستم …وبسایت جالب و پرمحتوایی دارید من هم یک وبلاگ کوچک دارم اگر به من لینک بدهید ممنون میشوم……

    http://www.p30street.wordpress.com

    پاسخ

  • سلام
    به نظر من این کار اشتباهه
    چون برای اینکه یه عنصر صفحه بخواد وسط صفحه قرار بگیره کافیه
    برای margin عبارت auto قرار بگیره یعنی:
    margin:auto
    اینجوری تو هر رزولیشنی درست کار میکنه.
    البته صفحه دارای Doc Type باشه چون من جور دیگه تجربه نکردم.

    کلا صفحاتی که دارای Doc Type هستند مشکلاتشون به مراتب کمتر از بقیه است.
    رعایت کنیم!!!
    ______________
    علیرضا در جواب گفت:
    بله، برای وسط گذاشتن یک عنصر باید همین کار را انجام داد…
    فراموش نکنید که بنده این مثال رو برای درک واحد % زدم… و اصلا حرفی از اینکه بخوایم یک عنصر رو در وسط صفحه قرار بدیم نزدم!

    پاسخ

  • مفید بود و مختصر.
    ممنون
    _____________
    علیرضا در جواب گفت:
    قابل خانم دکتر عزیز رو نداشت ;)

    پاسخ

  • بعضی ها یه چیزی ازشون میپرسی، کلی کلاس میزارن، تهش هم هیچی یاد نمیدن، منت هم میزارن
    خیلی ممنون که این نکته ها رو یاد میدی :)
    استفاده کردیم مثل همیشه خوب بود
    ممنون
    ______________
    علیرضا در جواب گفت:
    یعنی من جزء این بعضیا نیستم؟! یعنی من خیلی هم بد نیستم؟! مرسی عموی گل ِ گلاب :)

    پاسخ

  • دل چو پرگار به هر سو دَورانی میزد-وندران دایره سرگشتهء پابرجا بود/مطرب از درد محبت عملی میپرداخت-که حکیمان جهان را مژه خون پالا بود
    تبادل لینک می کنید؟
    ______________
    علیرضا در جواب گفت:
    به به چه زیبا…
    بله، میکنیم :)

    پاسخ

  • سلام دوست عزیز

    وبلاگ با چند پست جدید به روز شد :

    - نفوذ هکرها به ایمیل معاون نامزد جمهوری‌خواهان آمريكا
    - فرقه‌هاي شيطان‌پرستي در اصفهان
    - خانم‌ها در خواب هم آسايش ندارند
    - دانه انگور مانع از پيشرفت آلزايمر مي شود
    - ساخت بزرگترين برج جهان در خرمشهر؟
    -جريمه افراد چاق و سيگاري در آمريکا
    -خانه «وارونه» در آلمان ساخته شد

    در صورت مشاهده نکردن این پست ها از CTLR + F5 استفاده کنید .
    ممنون

    پاسخ

  • سلام
    وقتی با درصد تعیین می کنیم یک مشکلی به وجود میاد که اگه صفحه مرورگر را کوچیک کنیم به همون نسبت کوچک می شه که آذار دهندست.
    برای این مشکل باید چی کار کرد؟

    پاسخ

دیدگاه خود را ارسال کنید


می‌توانید از برخی کدهای HTML استفاده نمایید:


<a> <b> <blockquote> <i> <em> <code> <strong>