strong110

درخواست کد ساعت و تاریخ دیجیتالی ریسپانسیو

4 ارسال در این موضوع قرار دارد

سلام

وقت بخیر

من برای سایتم از کد زیر در هدر استفاده کردم تا تاریخ شمسی و میلادی + ساعت رو ( در وسط ) نشون بده ( تاریخ شمسی سمت راست تاریخ میلادی سمت چپ )

برای مرورگر تو PC خوبه تنها مشکلش اینه که تو موبایل نمیتونه تنظیم بشه خودکار و فقط یه بخشیش نمایش داده میشه

سایت : msk-trading.ir

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

اینم کد

ممنون میشم راهنمایی کنید

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

درود .

استفاده از مقدار absolute برای موقعیت یک عنصر و تعریف اندازه دقیق برای left و right اون عنصر برای رسپانسیو اصلا کار درستی نیست.

شما بهتر بود اول یک DIV کلی ایجاد می کردید همتراز با عرض قالبتون بعد کدها رو داخلش قرار می دادید. یا کدها رو داخل محدوده wrapper قالبتون قرار میدادید. اما خب با اینکار هم مشکل نمایش حل نمیشه چرا که اندازه ها از قبل تعیین شده هستند و اندازه ثابت در رسپانسیو مشکل ساز خواهد بود!

به هر حال در کدهایی که در زیر قرار دادم می تونید کاری کنید که در اندازه های صفحه نمایش کوچک (مثل موبایل و تبلت های کوچک ، این تاریخ به صورت خطی نباشه ، بلکه به صورت GRID (یعنی زیر هم ) نمایش داده بشه.

 

در ابتدا کدی که در تاپیک قرار دادید رو با این کد جایگزین کنید :

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

تغییرات : بجای استایل های درون خطی ، استایل های مجزا تعریف شده تا بتونیم بهتر روی عناصر در اندازه های مختلف تاثیر بگذاریم.

 

پس از اینکه کد بالا رو جایگزین کردید ، فایل استایل قالبتون رو باز کنید. (فایل Style.css طبق سورس سایتتون ، فایل اصلی برای بارگیری استایل های قالب هست). کدهای استایل زیر رو در فایل مذکور قرار دهید :

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

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

موفق باشید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
در 16 ساعت قبل، masih1994 گفته است :

درود .

استفاده از مقدار absolute برای موقعیت یک عنصر و تعریف اندازه دقیق برای left و right اون عنصر برای رسپانسیو اصلا کار درستی نیست.

شما بهتر بود اول یک DIV کلی ایجاد می کردید همتراز با عرض قالبتون بعد کدها رو داخلش قرار می دادید. یا کدها رو داخل محدوده wrapper قالبتون قرار میدادید. اما خب با اینکار هم مشکل نمایش حل نمیشه چرا که اندازه ها از قبل تعیین شده هستند و اندازه ثابت در رسپانسیو مشکل ساز خواهد بود!

به هر حال در کدهایی که در زیر قرار دادم می تونید کاری کنید که در اندازه های صفحه نمایش کوچک (مثل موبایل و تبلت های کوچک ، این تاریخ به صورت خطی نباشه ، بلکه به صورت GRID (یعنی زیر هم ) نمایش داده بشه.

 

در ابتدا کدی که در تاپیک قرار دادید رو با این کد جایگزین کنید :

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

تغییرات : بجای استایل های درون خطی ، استایل های مجزا تعریف شده تا بتونیم بهتر روی عناصر در اندازه های مختلف تاثیر بگذاریم.

 

پس از اینکه کد بالا رو جایگزین کردید ، فایل استایل قالبتون رو باز کنید. (فایل Style.css طبق سورس سایتتون ، فایل اصلی برای بارگیری استایل های قالب هست). کدهای استایل زیر رو در فایل مذکور قرار دهید :

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

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

موفق باشید.

تغییراتی که گفتید رو انجام دادم

نتیجه بهتر شد اما چیزی نشد که میخواستیم

خودتون اگر سایت رو باز کنید میبینید

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

قبلا نمیتونست تو یه خط تنظیم کنه و کلا بخشی از ساعت و تاریخ نشون داده میشد اما حالا تمامش توی صفحه موبایل میاد اما زیر هم میزاره

اگر بتونه اندازه فونت رو کوچیکتر کنه که تو یه خط باشه عالی میشه

 

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

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

درود مجدد.

این کار هم شدنیه اما به دلیل اینکه حجم متن ها زیاد هست ، برای نمایش در یک خط ، اندازه فونت باید بسیار زیاد کوچیک بشه که به احتمال زیاد دیگه قابل خوندن نیست!

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

توجه : در کد زیر ، فونت ساعت و تاریخ رو روی Tahoma قرار دادم که در اندازه کوچک تر هم قابل خوندن باشه.

به هر حال کد استایل زیر رو جایگزین کد قبلی کنید و در صورت نیاز ، اندازه فونت که در تمامی اندازه های صفحه نمایش ، 11 پیکسل در نظر گرفته شده رو کم یا زیاد تر کنید :

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

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

 

موفق باشید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • چه کسانی در حال بازدید هستند؟   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.