رفتن به مطلب

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


strong110

پست های پیشنهاد شده

سلام

وقت بخیر

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

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

سایت : msk-trading.ir

<?php global $is_IE ?>
<div style="padding-bottom: 25px;">
  <span style="text-align:right; right: 270px; position: absolute;">
  امروز <?php echo jdate ('l, j F , Y'); ?> </span>
  <span style="text-align:center; left: 50%; position: absolute;">
    ساعت <?php echo jdate('H:i:s'); ?> </span>
  <span style="text-align:left; left: 270px; position: absolute;">
  Today <?php echo date ('l, j F , Y'); ?> </span>
</div>

اینم کد

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

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

درود .

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

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

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

 

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

<?php global $is_IE ?>
<div class="thetimebody">
  <span id="thetimetoday">
  امروز <?php echo jdate ('l, j F , Y'); ?> </span>
  <span id="thetimehour">
    ساعت <?php echo jdate('H:i:s'); ?> </span>
  <span id="thetimeengtoday">
  Today <?php echo date ('l, j F , Y'); ?> </span>
</div>

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

 

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

.thetimebody {padding-bottom: 25px;}
#thetimetoday {text-align:right;right: 270px;position: absolute;}
#thetimehour {text-align:center;left: 50%;position: absolute;}
#thetimeengtoday {text-align:left;left: 270px;position: absolute;}

@media screen and (max-width:320px),@media screen and (max-width:480px),@media screen and (max-width:520px),@media screen and (max-width:640px),@media screen and (max-width:720px),@media screen and (max-width:800px){
.thetimebody {padding-bottom: 25px;display: grid;float: none;}
#thetimetoday {text-align:center;position: static;}
#thetimehour {text-align:center;position: static;}
#thetimeengtoday {text-align:center;position: static;}
}

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

موفق باشید.

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

در 16 ساعت قبل، masih1994 گفته است :

درود .

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

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

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

 

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


<?php global $is_IE ?>
<div class="thetimebody">
  <span id="thetimetoday">
  امروز <?php echo jdate ('l, j F , Y'); ?> </span>
  <span id="thetimehour">
    ساعت <?php echo jdate('H:i:s'); ?> </span>
  <span id="thetimeengtoday">
  Today <?php echo date ('l, j F , Y'); ?> </span>
</div>

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

 

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


.thetimebody {padding-bottom: 25px;}
#thetimetoday {text-align:right;right: 270px;position: absolute;}
#thetimehour {text-align:center;left: 50%;position: absolute;}
#thetimeengtoday {text-align:left;left: 270px;position: absolute;}

@media screen and (max-width:320px),@media screen and (max-width:480px),@media screen and (max-width:520px),@media screen and (max-width:640px),@media screen and (max-width:720px),@media screen and (max-width:800px){
.thetimebody {padding-bottom: 25px;display: grid;float: none;}
#thetimetoday {text-align:center;position: static;}
#thetimehour {text-align:center;position: static;}
#thetimeengtoday {text-align:center;position: static;}
}

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

موفق باشید.

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

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

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

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

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

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

 

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

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

درود مجدد.

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

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

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

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

.thetimebody {padding-bottom: 25px;font-family: tahoma;}
#thetimetoday {text-align:right;right: 270px;position: absolute;}
#thetimehour {text-align:center;left: 50%;position: absolute;}
#thetimeengtoday {text-align:left;left: 270px;position: absolute;}

@media screen and (max-width:320px){
#thetimetoday {right: 2px;font-size: 11px;}
#thetimehour {font-size: 11px;}
#thetimeengtoday {left: 2px;font-size: 11px;}
}
@media screen and (max-width:800px){
#thetimetoday {right: 2px;font-size: 11px;}
#thetimehour {font-size: 11px;}
#thetimeengtoday {left: 2px;font-size: 11px;}
}
@media screen and (max-width:480px){
#thetimetoday {right: 2px;font-size: 11px;}
#thetimehour {font-size: 11px;}
#thetimeengtoday {left: 2px;font-size: 11px;}
}
@media screen and (max-width:520px){
#thetimetoday {right: 2px;font-size: 11px;}
#thetimehour {font-size: 11px;}
#thetimeengtoday {left: 2px;font-size: 11px;}
}
@media screen and (max-width:640px){
#thetimetoday {right: 2px;font-size: 11px;}
#thetimehour {font-size: 11px;}
#thetimeengtoday {left: 2px;font-size: 11px;}
}
@media screen and (max-width:720px){
#thetimetoday {right: 2px;font-size: 11px;}
#thetimehour {font-size: 11px;}
#thetimeengtoday {left: 2px;font-size: 11px;}
}

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

 

موفق باشید.

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

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...