مدیریت محتوای طولانی و غیرمنتظره توسط CSS - قسمت 1



visibility  
mode_comment   ۰

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

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

مثال 1 : دکمه ای که سمت چپ یا راست اون یک آیکون قرار داده شده است

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

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

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

کد css بصورت زیر هست:

با اینکار خروجی بصورت زیر میشه:

همونطور که میبینید width رو تغییر میدیم تا مشکل رو بهتر متوجه بشیم. در بعضی از حالات، متن بر روی آیکون قرار میگیره. برای حل این مشکل میتونیم به سادگی مقداری padding به سمت راست المنت مورد نظر اضافه کنیم تا آیکون همیشه در اون احاطه بشه و متن هیچوقت به اون دسترسی نداشته باشه. پس کد CSS رو بصورت زیر تغییر میدیم:

میبینید که مقدار 50 پیکسل رو برای ویژگی padding-right قرار دادیم. با اینکار مشکل در همه حالات برطرف میشه. خروجی رو ببینید:

میبینید که مشکل مورد نظر برطرف شده و متن و آیکون با هم برخوردی ندارند. پس دیدیم که به راحتی و با اضافه کردن padding، یک فضای امن برای آیکون قرار دادیم و متن دیگه به اون نفوذ نمیکنه. برای بررسی بیشتر میتونین این Pen رو در Codepen ببینید.

در جلسه بعد با ادامه آموزش در خدمتتون هستیم و مثالها و مشکلات دیگه رو بررسی میکنیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.