ساخت منوی آبشاری (عمودی) با تگ ul li و css

در مطالب قبلی از بخش آموزش های کاربردی، با نحوه ساخت چند نوع منوی متفاوت مبتنی بر css و تگ های ul و li آشنا شدیم، همچنین به ضرورت استفاده از تگ های استاندارد ایجاد کننده لیست در html و اهمیت آنها برای موتورهای جستجو و نیز بالابردن قابلیت کاربری (accessibility) صفحه وب، اشاره کردیم، این بار در ادامه آموزش ها، می خواهیم با نحوه طراحی و ایجاد منوی آبشاری یا عمودی (vertical) با تگ ul li و استفاده صرف از css آشنا شویم، از نقاط قوت این منو سازگاری با زبان فارسی و نمایش یکسان در مرورگرهای مختلف و در عین حال سبک و کم حجم بودن آن است، البته ناگفته نماند که تمام امکانات این منو در مرورگر اینترنت اکسپلورر نسخه 6 قابل استفاده نیست.

ایجاد چارچوب کار با html و تگ ul li

قبل از هر چیز، طبق روال باید چارچوب منوهای خود را با استفاده از تگ های ساخت لیست در html یعنی دو تگ ul و li شکل دهیم، در این رابطه به صورت مفصل در آموزش مقدماتی css گفته ایم.


کد html منو با استفاده از تگ ul و li:

توضیح:
- اگر کد بالا را در صفحه ای با فرمت html ذخیره و آن را اجراء کنید، خواهید دید که منوها به صورت خام، دسته بندی شده و زیر مجموعه ای مرتب شده اند.
- برای چینش منوها از بالاترین سطح به منوهای زیر مجموعه، از قابلیت لیست های آشیانه ای یا تو در تو استفاده کرده ایم، نحوه چینش دقیق تگ های ul و li به این صورت، یکی از قسمت های اصلی ساخت لیست منوها است، به صورت ساده ساختار منوی بالا به شکل زیر است:

با درک صحیح این ساختار به ظاهر پیچیده، می توان به هر تعداد منوهای تو در تو ایجاد نمود.

همان طور که می دانیم، کد های html به تنهایی، قدرت چندانی در ایجاد قابلیت های تعاملی ندارند، لذا با استفاده از css و تنظیم ویژگی های display، position و... رفتار مورد انتظارمان را به تگ ها نسبت می دهیم، این کار را در استایل زیر انجام داده ایم.

توضیح:

- position و display دو ویژگی کلیدی هستند که در عملکرد منو، نقش مستقیم بازی می کنند، تغییر مقادیر پیش فرض آنها، می تواند در نحوه نمایش صحیح عناصر تاثیر بگذارد.

- به نحوه تعریف چند کلاس به صورت پلکانی توجه کنید، به فرض تنظیم استایل به صورت زیر در کد بالا، بر روی عناصر منوی زیر مجموعه سطح دوم تاثیرگذار است.

یا به طور مثال اگر به انتهای استایل دقت کنید، قسمت li:hover .vertical-sub-level .vertical-sub-level در حالتی که ماوس را روی منوی سطح بالا می بریم، باعث محو شدن منوی زیرمجموعه سطح دوم می شود.

- قسمت هایی که با یک علامت زیر خط (underline) و ستاره در ابتدای آنها تعریف شده اند، هک css مخصوص مرورگر اینترنت اکسپلورر است تا خاصیت های منو به درستی نمایش داده شوند (علامت _ هک برای اینترنت اکسپلورر نسخه 6 و علامت * هک برای اینترنت اکسپلورر نسخه 7 است).

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

یکی از مواردی که در استفاده از این نوع منوها و امکانات تعاملی در وب باید به آن توجه نمود، قابلیت سازگاری با مرورگرهای متفاوت است، اشکال عمده برنامه هایی که تحت عنوان ساخت منو استفاده می شوند نیز همین مسئله است که اکثر منوهای آماده آنها تنها در چند مرورگر به درستی نشان داده می شود یا اینکه برای کارکرد صحیح به حجم زیادی از فایل های جانبی نیازمندند، اما در مورد این منو، تلاش زیادی کرده ایم که بدون استفاده از فایل ها و اسکریپت های جانبی، آن را تقریبا با تمام مرورگرهای استاندارد موجود سازگار کنیم، لذا در عین سادگی و سبکی، قابلیت کاربردی آن تقریبا در تمام مرورگرها (Firefox, Opera, Internet Explorer +6, Google Chrome و...) یکسان است، منتها در مورد مشکل همیشگی طراحان وب یعنی مرورگر اینترنت اکسپلورر نسخه منسوخ 6، به دلیل پشتیبانی نشدن قابلیت hover برای تگ li، زیر مجموعه های این منو در این نسخه از اینترنت اکسپلورر به درستی نشان داده نخواهد شد، لذا بهترین گزینه در چنین شرایطی، به اصطلاح ایمپورت استایل خاص برای این مرورگر است یا اینکه به بازدیدکننده خود که از این مرورگر قدیمی و آسیب پذیر استفاده می کند، پیامی مبنی بر پشتیبانی نشدن امکانات سایت توسط مرورگر او نشان دهیم، به طور مثال با دستور شرطی زیر می توان این کار را انجام داد:

کد نهایی منوی عمودی با css و تگ ul li و همچنین پیش نمایش آنلاین آن را جهت تست و بررسی در زیر قرار داده ایم که می توانید از آن استفاده کنید.

همانطور که می دانیم، امروزه از کدها و استایل های css علاوه بر کاربرد های معمول و روزمره، برای خلق جلوه های خاص در بستر وب، استفاده های زیادی می شود، یکی از این جلوه ها که محبوبیت زیادی نیز بین طراحان وب دارد، خلق منوهای کشویی (بازشونده) یا به اصطلاح drop down مبتنی بر تگ های ul li و css است، به این صورت که لیستی از منوها با قابلیت داشتن زیر مجموعه که تنها هنگام بردن ماوس روی آنها، ظاهر می شوند و با خارج کردن ماوس، مجددا به طور خودکار محو می شوند؛ نوع پیشرفته تر این منوها با جاوا اسکریپت یا جی کئوری (jQuery) نیز وجود دارد که البته یک قاعده نانوشته در وب می گوید هر چه قدر ظرافت و جلوه های ویژه کار افزایش یابد، به همان نسبت از سازگاری کم می شود، به هر صورت در این آموزش می خواهیم با نحوه ساخت منوهای کشویی یا به عبارتی بازشونده، مبتنی بر تگ ul li و css آشنا شویم.

اینکه چرا باید برای ساختن منوهای بازشونده از تگ ul li استفاده کنیم به این علت است که در درجه اول این نوع منوها از لحاظ موتورهای جستجو به راحتی قابل فهم و ایندکس شدن هستند که به اصطلاح به آنها Search Engine Friendly گویند، از طرفی برای کاربرانی که به هر دلیل از استایل css نمی توانند استفاده کنند (screen readers)، وجود منوهای مبتنی بر تگ های ul li باعث می شود که علی رغم غیر فعال بودن استایل css، همچنان منوها به صورت دسته بندی شده و زیرمجموعه ای قابل روئیت و استفاده باشند؛ دلیل دیگر نیز می تواند اصولی تر بودن کدنویسی باشد، در html مبحثی تحت عنوان semantic یا معنایی وجود دارد که به طور خلاصه مفهوم آن، استفاده ی به جا از تگ ها است، مثلا برای ایجاد لیستی از آیتم ها، تگ ul li کاربرد دارد و نباید از موارد مشابه که فلسفه ای متفاوت دارند، استفاده شود.

ابتدا قبل از پرداختن به کدنویسی css، چارچوب کار و منوهای خود را مبتنی بر ul li در html به صورت زیر می نویسیم، البته کد زیر صرفا جهت نمونه آورده شده است و شما می توانید با توجه به نیاز خودتان آن را ویرایش کنید.

توضیح:

- به نحوه قرار گرفتن منوها، به صورت تگ های ul li در حالت تو در تو دقت کنید.

- همانطور که ملاحظه می کنید، ابتدا یک بلاک با آی دی فرضی main-menu ساخته ایم که درون خود یک تگ ul اصلی با زیرمجموعه هایی به صورت li ul li دارد.

- در تگ های ul سطح دو، از کلاس sub-menu استفاده کرده ایم که در ادامه نحوه تنظیم ویژگی های آن را خواهیم دید.

پس از اینکه اسکلت بندی کار را ساختیم، نوبت به تعریف کلاس و آی دی css می رسد، همانطور که ملاحظه می کنید، در کد بالا یک آی دی و یک کلاس به کار رفته است (آی دی main-menu و کلاس sub-menu)، لذا قسمت عمده کار ما، تنظیم این دو عنصر خواهد بود، در استایل زیر این کار را انجام داده ایم و علاوه بر دو عنصر نام برده، موارد عمومی مثل فونت صفحه، رنگ و حالت لینک ها و... را نیز تنظیم کرده ایم:

توضیح:

- مقادیر مربوط به body و a به صورت کلی، ویژگی های صفحه را تعریف می کنند.

- مقادیر position در آی دی main-menu باید به صورت relative یا نسبی تعیین شود.

- در قسمت main-menu li به این جهت از float و مقادیر right استفاده کرده ایم که منو ها در کنار هم در یک سطح و از راست به چپ قرار بگیرند.

- به نحوه تعریف استایل برای تگ های زیرمجموعه ای در کد بالا دقت کنید، مثلا تعریف به صورت main-menu li ul a بر روی عنصر ul که خود زیر مجموعه li است و li نیز داخل بلاک div با آی دی main-menu قرار دارد، در حالت لینک، اثر گذار است.

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

- عنصر z-index برای قرار گرفتن لایه مربوط به لینک منوها، در بالاترین سطح است، هرچه عدد z-index بیشتر باشد، آن لایه بالاتر از سایر عناصر در صفحه نشان داده می شود.

- قسمت مربوط به clear و مقادیر both برای قرار گرفتن صحیح منو، داخل بلاک main-menu لازم است.

این منو با نسخه های به روزتر تمام مرورگرها سازگار است و تنها ممکن است در برخی مرورگرهای قدیمی که به درستی از ویژگی های css پشتیبانی نمی کنند (مثل مرورگر غیر استاندارد و قدیمی اینترنت اکسپلورر ورژن 6) مشکلاتی داشته باشد که بهتر است برای این نوع مرورگرها، استایل مخصوص آنها را در صفحه ایمپورت کنید، ما این کار را برای سازگاری با مرورگر اینترنت اکسپلورر 7 با دستور شرطی زیر انجام داده ایم.

با استفاده از خاصیت display و مقادیر none و block می توان منوی کشویی را توسعه داده و به هر تعداد منوی زیر مجموعه ایجاد کرد، به طور مثال با افزودن ویژگی های css زیر به استایل منو، این کار را برای ایجاد منوهای زیر مجموعه سطح دوم انجام می دهیم.

توضیح:

خاصیت display با مقادیر none در تکه کد اول، برای حالتی است که تگ li اول در حالت فعال است (یعنی کاربر ماوس را روی یکی از منوهای اصلی می برد)، لذا تگ ul در دو سطح پائین تر از li (یعنی همان ul که منوی زیرمجموعه سطح دوl را در خود دارد) باید مخفی باشد.

خاصیت display با مقادیر block در تکه کد دوم، برای حالتی است که تگ li دوم در حالت فعال است (یعنی کاربر ماوس را روی یکی از منوهای سطح اول می برد)، لذا تگ ul دربرگیرنده منوی زیر مجموعه سطح دوم، باید نمایش داده شود.

در زیر کد نهایی منو  را می توانید ملاحظه کنید.

تنظیمات css مخصوص مرورگر اینترنت اکسپلورر

شاید به عنوان یک کاربر در دنیای وب، هر روز به سایت ها و وبلاگ های مختلفی سر بزنیم و بیش از هر چیز، رسیدن به محتوای مورد نظر برایمان مهم باشد، فارغ از اینکه ظاهر یک سایت چگونه است و چه معایب و محاسنی دارد، مطلبمان را می خوانیم و در آخر هم آن صفحه را ترک می کنیم، در حالی که برای مدیران حرفه ای وبسایت ها و وبلاگ ها، اینکه همه کاربرانشان بتوانند از محتوای آنها به یک شکل استفاده کنند، اهمیت زیادی دارد، جالب است اگر بدانید که مرورگرهای وب اگرچه از قوانین مشترکی پیروی می کنند، اما هر کدام در نحوه تفسیر این قوانین ساز خودشان را می نوازند، البته هرچه که پیش تر می رویم، سازگاری مرورگرها و یکسان سازی آنها نیز بیشتر می شود، اما دردسر همیشگی طراحان وب یعنی مرورگر اینترنت اکسپلورر (Internet Explorer) در این بین سرآمد مرورگرهای غیر استاندارد است، به همین دلیل شرکت مایکروسافت (خالق و مالک این مرورگر) که گویا از شاهکار خود اطلاع داشته، برای تنظیم استایل css مخصوص مرورگر خود (در نسخه های مختلف)، قابلیتهایی تحت عنوان پیام های شرطی یا (Conditional Comments) و هک هایی ویژه پیشنهاد داده است که بد نیست نگاهی به آنها بیندازیم.

چرا باید تنظیمات مخصوص مرورگر اینترنت اکسپلورر را انجام دهیم؟

شاید برای شما هم جای سوال باشد که چرا باید تنظیمات مخصوص اکسپلورر را در صفحه خود داشته باشیم، البته پاسخ سوال این است که این کار همیشه هم ضروری نیست، اگر صفحه شما به خوبی در نسخه های مختلف اینترنت اکسپلورر و سایر مرورگرها نشان داده می شود و تمام عناصر سر جای خودشان هستند، دیگر نیازی نیست از تنظیمات جداگانه استفاده کنید، چرا که هدف از تنظیم جداگانه استایل css سازگار کردن آن با نسخه های مختلف اکسپلورر از لحاظ نمایش ظاهری و یا مثلا درست عمل کردن امکانات مبتنی بر css است.
برای تنظیم یک ویژگی css خاص اکسپلورر، چه روش هایی وجود دارد؟

معمول ترین و متداول ترین روش استفاده از پیام های شرطی یا (Conditional Comments) است (که در ادامه به طور مفصل خواهیم گفت)، شیوه های دیگری تحت عنوان هک (با هک سایت فرق دارد!) یا CSS Hacks نیز وجود دارند که در واقع به معنی استفاده از علائم مخصوص در تعریف کدهای css و قابل پردازش توسط ورژن های خاصی از مرورگر اینترنت اکسپلورر است.

نحوه تنظیم استایل css مخصوص مرورگر اینترنت اکسپلورر

برای تنظیم استایل مخصوص مرورگر اینترنت اکسپلورر، ابتدا باید سایت، وبلاگ یا قالب طراحی شده را با برنامه هایی نظیر IETester که در آدرس دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
وجود دارد، بررسی کنید، اگر موردی به نظرتان دچار ایراد است، سعی کنید کلاس یا آی دی css مربوط به آن را پیدا کنید و پس از اعمال تغییرات (قبل از اعمال تغییرات از استایل فعلی پشتیبان بگیرید) نتیجه را دوباره امتحان کنید، تا جایی که مشکل حل شود، حال تکه کد اختصاصی که مربوط به هر ورژن از اکسپلورر می شود (و با آن کد، مشکل در آن ورژن مخصوص حل می شود) را درون یک فایل دیگر کپی کنید (تنها کافی است کلاس یا آی دی مورد نظر را به همراه قسمتی که خاص مرورگر اکسپلور است، کپی نمائید) تا آن را با دستورات زیر در صفحه به طور جداگانه ایمپورت کنیم.

دستورات یا پیام های شرطی در مرورگر اینترنت اکسپلورر

دستورات شرطی در اکسپلورر با علائم خاصی تعریف می شوند:

توضیح:
- حالت معمول ایجاد یک پیام در صفحات html استفاده از <-- !--> است، همانطور که می بینید این شرط ها نیز مبتنی بر همین قاعده هستند.
- این دستور به مرورگر اکسپلورر می گوید که باید از مقادیر موجود در آن استفاده کند (در واقع مقادیر موجود در این شرط، تنها برای اینترنت اکسپلورر قابل استفاده است و سایر مرورگرها با آن مثل یک پیام معمولی برخورد می کنند)، جالب است که بدانید درون این شرط می توان هر عبارت یا کدی قرار داد و فقط محدود به ایمپورت استایل css نیست، مثلا می توان به کاربر پیام داد که مرورگر او قدیمی است و باید از مرورگر دیگری استفاده کند و...
- این پیام های شرطی باید بعد از استایل اصلی و پیش فرض (که مخصوص تمام مرورگرها است) ترجیحا در قسمت هِدر و بین تگ های head قرار گیرند.

تنظیمات مخصوص ورژن های مختلف و معنی آنها

در زیر لیستی تقریبا کامل از تنظیمات استایل css مخصوص ورژن های مختلف مرورگر اینترنت اکسپلورر به همراه معنی عبارات آن آمده است.

ایمپورت استایل مخصوص اینترنت اکسپلورر (تمام ورژن ها)

توضیح:
- if به معنی اگر و IE مخفف اینترنت اکسپلورر (Internet Explorer) است.

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 6

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 9

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

هک با عبارت html+*

در این روش یک آی دی یا کلاس را دو بار به صورت عادی و با  html+*  ایجاد می کنند، به عنوان مثال کد زیر دو ویژگی متفاوت برای یک آی دی تعریف می کند، قسمتی که html+* در ابتدای آن قرار دارد، تنها در مرورگر IE 7 پردازش می شود.

روش هک زیر خط یا underline که عنوان صحیح تر آن underscore است برای هک نسخه های مختلف اینترنت اکسپلورر مخصوصا نسخه 6 کاربرد دارد، در این روش در همان آی دی یا کلاس، ویژگی مورد نظر را با یک زیرخط در ابتدای آن تعریف می کنند.

این روش هک هم برای مرورگر اینترنت اکسپلورر ورژن 7 به پائین به کار می رود، که در آن برای عناصر خاص اکسپلورر یک ستاره در ابتدای آنها قرار می دهند.

این شیوه هک هم برای مرورگر اینترنت اکسپلورر ورژن 9 یا 8 و پائین تر به کار می رود، در این روش برای ویژگی خاص اکسپلورر، عبارت 9\ را به آخر آن اضافه می کنند.

حذف اسکرول افقی (horizontal scroll) با css

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

علت عمده این مشکل به تعریف نادرست یا ناهماهنگ عرض اِلمان های صفحه یا بلاک div مربوط می شود، مثلا اگر بلاکی با پهنای 200 پیکسل را در بلاکی دیگر با عرض 190 پیکسل قرار دهید (به صورت تودرتو (nested) یا آشیانه ای)، مسلما در حالت عادی با مشکل اسکرول افقی و نواری آبی رنگ در زیر آن مواجه خواهید شد، یا اگر در اسکلت بندی قالب سایت یا وبلاگ خود، عرض زیادی برای چارچوب کار در نظر بگیرید که این عرض از اندازه صفحه نمایش کاربران بیشتر باشد، مرورگر به صورت خودکار اسکرول افقی را نشان خواهد داد.

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

همانطور که با css می توان ویژگی های مربوط به پهنای اِلمان مورد نظر را تعریف کرد، می توان با خاصیت های آن، اسکرول ناخواسته را نیز حذف کرد، به طور معمول برای از بین بردن اسکرول (عمودی) از ویژگی overflow به صورت زیر استفاده می شود.

این کد را می توانید در یک کلاس تعریف کنید و آن کلاس را به بلاک یا تگ body (برای از بین بردن اسکرول در کل صفحه) نسبت دهید.

مشکل ناسازگاری overflow-x در برخی از مرورگرهای قدیمی

در برخی از نسخه های مرورگر فایرفاکس ممکن است خاصیت overflow-x به درستی عمل نکند، هرچند بیشتر کاربران از ورژن های به روزتر استفاده می کنند، اما جهت اطلاعات بیشتر، برای این نوع مرورگرها کد بالا را با افزودن مقادیر moz-scrollbars-vertical کامل می کنیم.

حذف اسکرول بار برای textarea

در فرم های html برای عنصر textarea نیز روشی که در بالا توضیح دادیم کاربرد دارد، اما با خاصیت های html نیز می توان اسکرول افقی textarea را در فرمها از بین برد، برای این منظور از wrap و مقدار virtual استفاده کنید.

ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3

امروزه در طراحی صفحات وب، استفاده از تصاویر شفاف و یا به اصطلاح transparent امری مرسوم است، به طور مثال ممکن است طراحان قالب وبلاگ ها یا سایت ها، در طراحی پس زمینه مطالب، آن را کمی شفاف کنند تا تصویری که در زیر بلاک مطلب قرار دارد به صورت نیمه شفاف دیده شود، استفاده از این تکنیک پیش تر با تصاویر png ممکن بود، اما مشکل همیشگی یعنی مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) قادر به نمایش این تصاویر با زمینه شفاف نبود، لذا طراحان وب به فکر جایگزینی برای این تکنیک برآمدند و از جاوا اسکریپت و بعدها css بدین منظور استفاده کردند، در این مطلب قصد داریم نحوه ایجاد تصاویر و بلاک های div شفاف را با css آموزش دهیم.
عنصر استانداردی که در css3 برای ایجاد لایه های شفاف تعریف شده، opacity نام دارد که به معنی تاری و کدری است، البته برای مرورگرهای قدیمی تر که از css3 پشتیبانی نمی کنند باید از مقادیر دیگری تحت عنوان ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.

ایجاد بلاک و تصور شفاف با عنصر opacity در css3:

کد زیر مثال استاندارد css3 برای ایجاد بلاک یا تصویر شفاف است، عنصر مربوط به filter برای سازگاری با مرورگر اینترنت اکسپلورر 8 و مابعد آن است.

اگرچه خاصیت opacity در css3 به صورت استاندارد تعریف شده است، اما برخی از مرورگرهای قدیمی تر از آن به صورت کامل پشتیبانی نمی کنند، کلاس زیر نمونه ی تقریبا کاملی است که از هر جهت با اکثر مرورگرهای موجود، تطبیق دارد.

توضیح:

- خط اول کد (width: 100%) برای ورژن های قدیمی مرورگر اکسپلورر (5، 6 و 7) نیاز است (به جای آن می توانید از مقادیر zoom: 1 استفاده کنید).

- مقادیر ms-filter و filter برای ایجاد حالت شفافیت در اینترنت اکسپلورر کاربرد دارد.

- moz-opacity و khtml-opacity برای ورژن های قدیمی مرورگر فایرفاکس (Firefox) و سافاری (Safari) است.

- opacity نیز خاصیتی استاندارد در css3 است.

- مقادیر شفافیت برای مرورگر اکسپلورر به صورت اعدادی بین 0 تا 100 و برای سایر مرورگرها و حالت استاندارد css3، عددی بین 0 تا 1 است.

- به کار بردن این کلاس ممکن است از نظر سیستم های اعتبار سنجی که هنوز خود را با ویژگی های css3 تطبیق نداده اند، موجب نامعتبر تلقی شدن کد css گردد که البته چندان جدی نیست.

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

خاصیت هایی که برای وسط (center) قرار دادن، ایجاد یا حذف فاصله (حاشیه) به آنها نیاز داریم margin و padding هستند.

برای حذف حاشیه بین بلاک div  و تگ body کافی است مقادیر margin و padding را برابر صفر قرار دهیم:

توضیح:
- در مثال بالا بلاکی با کلاس فرضی block را بین تگ body ایجاد کرده ایم که حاشیه آن صفر است و برای body نیز از مقادیر margin و padding صفر استفاده کرده ایم.

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

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


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

ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS

یکی از قابلیت های کاربردی و زیبای css امکان ایجاد جلوه های ویژه بصری ساده تا پیشرفته است که معمولا در اکثر مرورگرهای استاندارد نیز پشتیبانی می شوند، اگر چه برای سازگاری بیشتر در کنار کدهای css از javascript نیز استفاده می شود اما در این آموزش، شیوه ساخت منویی ساده، سبک و در عین حال زیبا و سازگار را خواهیم گفت که می تواند حداقل به عنوان سرآغازی برای طرح های بزرگتر مورد استفاده قرار گیرد، از منوهای css می توانید در سربرگ وبلاگ یا سایتتان با هدف زیبا سازی یا تسهیل دسترسی استفاده کنید؛ برای راحتی شما و جلوگیری از پیچیده شدن موضوع، آموزش همراه توضیح و مثال آنلاین است.

ایجاد منوهای اینتراکتیو با فتوشاپ و css

ابتدا یک تصویر با اندازه ارتفاع 120 پیکسل (که از دو نیمه ی 60 پیکسلی تشکیل شده)، در برنامه های گرافیکی مانند فتوشاپ ایجاد می کنیم، از آنجایی که برای ایجاد منوهای اینتراکتیو، از عنصر کلیدی background-position با مقادیر متفاوت در حالت عادی و hover استفاده خواهیم کرد، لذا تصویر ما باید در دو قسمت خود، دارای دو ویژگی متفاوت باشد، تا هنگامی که در حالت فعال قرار می گیرد، متمایز به نظر برسد.

توضیح:

- خاصیت display با مقادیر inline-block و همچنین float:right کمک می کنند تا لینک های ما در یک ردیف قرار گیرند.

- حالت menu a یعنی موقعیتی که آی دی menu در حالت لینک قرار دارد.

- حالت menu a:hover به معنی حالتی است که لینک آی دی menu در حالت فعال قرار می گیرد.

- ul و li عناصر ایجاد لیست در صفحات وب هستند و از لحاظ موتورهای جستجو و علم سئو، شیوه ای مناسب برای ساخت منوها محسوب می شوند.

- تغییر تصاویر در حالت عادی و فعال با قابلیت background-position و مقادیر آن صورت می گیرد.

کار با ویژگی position و float در CSS

از جمله مباحث پیشرفته در زمینه استایل نویسی وب با CSS، بحث استفاده از position  و float برای شناور کردن عناصر مختلف در صفحات به نحو دلخواه و مورد انتظار است، آشنایی با این خاصیت ها را می توان نقطه آغاز استایل نویسی حرفه ای برشمرد چرا که معمولا در بسیاری از جلوه های ویژه و امکانات مورد نیاز برای ساخت واسط کاربری (UI یا User Interface) مناسب در صفحات وب، ناگزیر، این خواص استاندارد استفاده خواهند شد، به طور مثال منو های طراحی شده با CSS، باکس های شناور و واکنش پذیر (Interactive)، افزونه ها و widget ها و...، لذا در ادامه آموزش های مقدماتی قصد داریم در حد امکان به دو خاصیت position  و float بپردازیم.

خاصیت position

همان طور که پیش از این اشاره شد، خاصیت position جزء خاصیت های کلیدی و حرفه ای در CSS محسوب می شود، این خاصیت امکان تعریف و استقرار عناصر به صورت شناور یا ثابت در هر نقطه از صفحه نمایش (در چهار جهت اصلی) را میسر می کند که در طراحی وب بسیار کاربرد دارد، position مقادیر متعددی به شرح زیر می پذیرد:
absolute : مقادیر absolute یا مطلق به معنی موقعیت عنصر از بالاترین تگ والد (معمولا body یا سند HTML) است.
relative : مقادیر relative یا نسبی به معنی موقعیت عنصر از تگ والد (تگی که عنصر، فرزند آن محسوب می شود) است.
fixed : مقادیر fixed یا تثبیت شده به معنی ثابت شدن موقعیت عنصر در محلی تعریف شده است (که حتی با اسکرول نیز تغییر نخواهد کرد).
static : مقادیر static یا ایستا حالت پیش فرض عناصر در صفحات وب است که در واقع با این خاصیت، موقعیت یک عنصر در کنار سایر عناصر موجود در صفحات HTML پردازش می شود.
در ادامه هر یک از مقادیر بالا را همراه با مثال بررسی خواهیم کرد.

position absolute

از position با مقادیر absolute زمانی استفاده می کنیم که بخواهیم یک عنصر (به فرض بلاک div) نسبت به کل صفحه به صورت شناور کامل درآید، در این حالت عنصر به صورت پیش فرض به ابتدای سند HTML (گوشه بالای مرورگر) منتقل می شود و برای تنظیمات بیشتر می توان از خاصیت های left، right، top و bottom استفاده کرد، به مثال زیر توجه کنید.

و مثالی که در آن از خاصیت های left و top استفاده شده:

از position با مقادیر relative زمانی استفاده می کنیم که بخواهیم یک عنصر نسبت به تگ والد خود به حالت شناور درآید، به فرض اگر دکمه ای داریم که می خواهیم با کلیک بر روی آن، یک باکس در زیر دکمه ظاهر شود، در این حالت باید از مقادیر relative استفاده کنیم، به مثال زیر توجه کنید.

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

از position با مقادیر fixed زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت ثابت در یک قسمت از صفحه نمایش قرار گیرد و حتی با اسکرول نیز تغییری نکند، به عنوان مثال این شیوه ای است که برخی طراحان قالب از آن در کدنویسی های خود (معمولا بیشتر در قالب وبلاگ ها) برای ثابت کردن تصویر پس زمینه استفاده می کنند، به مثال زیر توجه کنید.

position static

از position با مقادیر static زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت پیش فرض و طبیعی در کنار سایر عناصر موجود در سند HTML پردازش شود، البته این مقدار چندان کاربردی نیست و کمتر استفاده می شود، چون بدون استفاده از آن نیز، عناصر به صورت static پردازش می شوند (مگر اینکه بخواهید خاصیتی که پیش تر به یک عنصر داده شده را دوباره نویسی و به حالت پیش فرض تغییر دهید که به این حالت در اصطلاح override می گویند).

خاصیت float

در کنار خاصیت position که می توان با آن یک عنصر را در راستای محور X ها و Y ها (کل صفحه) شناور کرد، خاصیت دیگری به نام float وجود دارد که برای شناور کردن عنصر در راستای محور X ها (محور افقی) به کار می رود، به فرض اگر بخواهیم یک بلاک به سمت چپ یا راست متمایل باشد، از float با مقادیر left یا right استفاده می کنیم، به مثال زیر توجه کنید.
مثال:

در زیر شرح مختصر مقادیری که float می پذیرد را بررسی می کنیم.

right : از float با مقادیر right زمانی استفاده می کنیم که بخواهیم عنصر (به فرض بلاک div) به سمت راست صفحه متمایل شود.

left : از float با مقادیر left زمانی استفاده می کنیم که بخواهیم عنصر به سمت چپ صفحه متمایل شود.

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

نکته 1: در استایل نویسی کاربردی، معمولا مواردی پیش می آید که در کنار استفاده از float ناچاریم از clear با مقادیر both نیز برای همپوشانی بلاک های تو در تو استفاده کنیم.

نکته 2: برای چینش بلاک ها در کنار هم و در یک ردیف افقی، معمولا علاوه بر خاصیت float، از display با مقادیر inline-block نیز استفاده می شود (جهت سازگاری با برخی مرورگرها).

برای آشنایی بیشتر با خاصیت position و float، در زیر مثال و پیش نمایش آنلاین این خاصیت ها را بررسی می کنیم.

کاربرد خاصیت display در CSS

همان طور که تا این قسمت از آموزش های مقدماتی استایل نویسی با css ملاحظه کردید، این زبان کمکی برای ایجاد جلوه های ظاهری و فرمت بندی کدها و عناصر html از خاصیت های ویژه خود استفاده می کند که هر کدام از آنها کاربرد خاصی دارند و بر روی عناصر به خصوصی تاثیرگذار هستند، یکی دیگر از این خاصیت ها display نام دارد که تعیین کننده نحوه نمایش یک عنصر (به صورت بلاک، جدول، لایه مخفی و...) در صفحات وب است،  display با مقادیر متفاوت، تنظیمات متفاوتی نیز در اختیار طراحان وب قرار می دهد، در ادامه آموزش با کاربرد این خاصیت در css بیشتر آشنا خواهیم شد.


ویژگی display

همان طور که پیش از این اشاره شد، ویژگی display برای تنظیم نحوه نمایش عناصر در صفحات وب به کار می رود و بدین منظور مقادیر متفاوتی می پذیرد که هر کدام از آنها کاربرد خاصی دارند، از جمله این مقادیر می توان block، table ، inline-block، none، list-item و... را نام برد، در زیر به تفصیل به این موارد اشاره می کنیم.
display block

از display با مقادیر block برای ایجاد لایه های معمولی و پرکاربرد وب (به شکل مربع یا مستطیل) به صورت غیر هم سطح استفاده می شود، یعنی یک بلاک اگر در کنار سایر عناصر وب قرار گیرد (به طور مثال اگر بلاک div در بین دو بلاک div دیگر قرار گیرد)، موارد بعد از خود را به پائین هدایت کرده و خود در زیر عناصر سطح بالاتر قرار می گیرد (یک لایه از نوع block در حالت پیش فرض، امتداد عرض خود را پوشش می دهد)، مثال:


نکته 1: لایه های از نوع display block با استفاده از خاصیت float می توانند در کنار هم و به صورت هم سطح قرار گیرند.
نکته 2: در فرمت بندی قالب های وب و طراحی کاربردی، به طور معمول از بلاک هایی با پس زمینه transparent یا شفاف نیز استفاده می شود، لذا یک بلاک ممکن است از لحاظ بصری هیچ نمودی نداشته باشد، ولی در اسکلت بندی کار موثر باشد.

display table

از display با مقادیر table برای ایجاد جداول، بدون استفاده از تگ table استفاده می شود، در واقع یک عنصر با خاصیت display table به صورت یک جدول نشان داده می شود و بلاک های درونی آن به عنوان سلول ها و ستون های جدول (با توجه به تنظیمات) پردازش می شوند، مثال:

نکته: خاصیت های زیرمجموعه display table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group که می توانید از آنها برای لایه های درونی استفاده کنید.

display inline

از display با مقادیر inline برای ایجاد عناصر هم سطح استفاده می شود، یعنی لایه هایی که به صورت display inline هستند، در صورتی که فضای کافی برای آنها وجود داشته باشد، در یک خط و در کنار هم نشان داده می شوند، مثال:


نکته 1: اگر مثال بالا را در یک فایل html  ذخیره کرده و در مرورگر اجرا کنید، خواهید دید که سه لایه از نوع display inline در کنار هم در یک سطح قرار گرفته اند، لذا عناصر inline رفتاری مشابه تگ span در html دارند.
نکته 2: فرمت بندی با display inline معمولا تنها برای محتوای خاصی که به صورت عادی باید در یک خط باشند (مانند متن، تصاویر و...) صورت می گیرد، چرا که خاصیت هایی مانند height، width و... در لایه های inline نادیده گرفته می شوند و لذا این مقادیر در طراحی، برای ایجاد بلاک ها یا باکس ها مناسب نیست.

display inline-block

از display با مقادیر inline-block برای ایجاد بلاک های هم سطح و از نوع block استفاده می شود، یعنی یک لایه inline-block با اینکه یک بلاک است، اما به صورت هم سطح پردازش می شود، به این ترتیب می توان در عین استفاده از ویژگی های عناصر block، آنها را به صورت inline نیز نمایش داد، مثال:

نکته: برای سازگاری با تمام مرورگرها، بهتر است در کنار استفاده از inline-block از خاصیت float با مقادیر left یا right نیز استفاده شود.
display inline-table

از display با مقادیر inline-table برای ایجاد لایه های از نوع جدول اما به صورت هم سطح استفاده می شود، در واقع یک عنصر inline-table مشابه table بوده و در عین حال به صورت هم سطح پردازش می شود، مثال:


نکته: خاصیت های زیرمجموعه display inline-table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group.

display list-item

از display با مقادیر list-item برای ایجاد بلاک هایی به شکل آیتم های یک لیست در وب استفاده می شود، هرچند این ویژگی چندان پرکاربرد نیست (و بیشتر از تگ های ul و li استفاده می شود)، اما قابلیتی است که در css وجود دارد، مثال:
نکته: برای اینکه علامت های مربوط به آیتم های لیست به درستی نمایش داده شوند، لازم است که بلاک ها از اطراف صفحه، به اندازه مقادیری فاصله داشته باشند (لذا باید از margin استفاده کنید).

display none

از display با مقادیر none برای ایجاد لایه های مخفی در صفحات وب استفاده می شود، بدین معنی که لایه و محتوای درون آن از دید کاربران مخفی می شود، مثال:

نکته: استفاده از display none با استفاده از خاصیت visibility hidden متفاوت است، در هنگام استفاده از display none، لایه به کلی از صفحه حذف می شود (عرض و ارتفاع آن صفر در نظر گرفته می شود)، اما با استفاده از visibility hidden، اگرچه لایه و محتوای آن مخفی می شود، اما جای آن در صفحه باقی می ماند (عرض و ارتفاع آن در صفحه وجود دارد).

در نمونه کد زیر ترکیبی از مقادیر پر کاربرد مربوط به خاصیت display  را ملاحظه می کنید.

توضیح:
- کلاس ها و آی دی تعریف شده در کد بالا، فرضی و با عناوین انتخابی است.
- در استفاده از مقداردهی درصدی نیاز به وجود یک بلاک والد یا دربرگیرنده داریم، به این معنی که تنها عناصر زیر مجموعه (بلاک درونی) می توانند مقادیر درصدی داشته باشد که در واقع درصد از میزان ارتفاع بلاک اصلی حساب می شود، به طور مثال اگر بلاک اصلی 200 پیکسل ارتفاع داشته باشد، بلاکی که درون آن قرار گرفته با ارتفاع 25 درصد، معادل 50 پیکسل (25 درصد از 200 پیکسل) در حالت معمولی ارتفاع خواهد داشت.
در css برای مقدار دهی چند شیوه وجود دارد:
- تعیین مقادیر به پیکسل (picture element)، به فرض 6px، 2px و... (پیکسل ها مقادیری ثابت هستند)، از واحد px بیشتر برای نمایش محتوا در صفحه نمایش (مانیتور) استفاده می شود.
- تعیین مقادیر به Points، به فرض 1pt، 3pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.
- تعیین مقادیر به Ems، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به سانتی متر (CentiMeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب، چندان مرسوم نیست.
- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به صورت خودکار (auto) و حالت وراثتی (inherit) از بلاک والد.

خاصیت width در css

در کنار خاصیت height که ارتفاع عناصر را مشخص می کند، خاصیت width برای تنظیم عرض عناصر در صفحات وب تعریف شده است، بدین ترتیب با کمک css قابلیت تعیین ارتفاع و عرض برای تگ های html به راحتی فراهم می شود، این خاصیت نیز مانند height از مقادیر پیکسلی، درصدی و... تبعیت می کند که در مثال زیر با چند نمونه از آن آشنا می شویم.

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

در کنار دو خاصیت اصلی height و width، از چند خاصیت زیر مجموعه نیز در این رابطه می توانیم استفاده کنیم، از جمله min-height و max-height، اما اول باید بدانیم که این دو ویژگی چه کاربردی دارند؟
به طور خلاصه min-height حداقل ارتفاع یک عنصر را مشخص می کند، به فرض در حالت پیش فرض مرورگرها هر بلاک را به اندازه محتوایی که در آن وجود دارد، ارتفاع می دهند، اما با تنظیم مقادیر min-height مرورگر حداقل مقادیر ارتفاع را (چه محتوا به اندازه کافی باشد و چه نباشد) برای آن بلاک در نظر می گیرد، اما max-height حداکثر ارتفاع یک عنصر را مشخص می کند، یعنی به فرض اگر میزان محتوا از ارتفاع یک بلاک بیشتر باشد، مرورگر ارتفاع را همچنان ثابت نگه می دارد و ممکن است محتوا در خارج از بلاک نشان داده شود یا اینکه آن بلاک اسکرول گردد، البته این ویژگی معمولا در کنار خاصیت overflow استفاده می شود، overflow رفتار مرورگر در حالتی که محتوا از میزان ارتفاع یک بلاک بیشتر است را تعیین می کند که خود چند مقدار می پذیرد:
- auto، اگر محتوا بیشتر باشد، بلاک اسکرول می شود.
- hidden، محتوای اضافه مخفی می شود.
- scroll، نوار اسکرول ظاهر می شود.
- visible، بدون اینکه بلاک اسکرول شود، محتوا در بیرون از آن نشان داده می شود.
مثال:


یا

کارکرد خاصیت max-width و min-width در قریب به اتفاق موارد مشابه min-height و max-height است که در بالا اشاره شد، با این تفاوت که در اینجا خاصیت بر روی عرض عناصر html تاثیر می گذارد و از این گذشته مقادیر overflow برای width کاربردی ندارد.

مثال:

یا