قرار دادن چند جدول در یک خط

[hmn566 1]

با سلام

قصد دارم در ویرایشگر tinymce جوملا چند جدول رو در یک خط قرار بدم. وقتی جدول اول رو درست میکنم و جدول دوم رو اضافه میکنم جدول دوم میره خط بعدی و در ادامه قرار نمیگیره.  چطور میتونم چند جدول رو در یک خط قرار بدم که ریپاسنیو هم باشه یعنی وقتی توی موبایل باز میشه جداول برن زیر همدیگه؟

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

با تشکر

[hmn566 1]

امکان ادیت هم بزارین لطفا اگر اشتباه تایپی یا کاری داشتیم بتونیم ادیت کنیم.

[hmn566 1]

از زمان درج این مطلب روشهای زیادی رو طی کردم هر کدوم یه گیری داره.

لطفا بفرمایید راهی داره یا کلا توی جوملا دنبالش نباشم برم سراغ یه چیز دیگه.

ممنون

[amirparvaneh 100]

درود

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

میتونید از فرم ورک بوت استرپ یا قالب های آماده ریسپانسیو استفاده کنید

[hmn566 1]

سلام

با این فریم ورک کار نکردم. قبلا جدول درست میکردم ولی ریسپانسیو کار نمیکنه یا بهم میریزه

میشه یه نمونه یا مثالی بزنید چطور میتونم همچین چیزی بسازم

ممنون

[حجت مردانه زاده 596]

باسلام

شما میایست جدولی که درست میکنید ریسپانسیو رو ساپورت کنه (البته این خارج از اون ساختار واکنشگرایی قالبتون هست. اون قالبتون که میبایست این خاصیت رو داشتهباشه ) برای اینکار میبایست برای قالبتون کلیه سلول ها؛ عرض ها و ارتفاعات رو بصورت % ای تعریف کنید و بصورت پیکسلی نباشه.

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

موفق باشید و سربلند

[hmn566 1]

خوب روشی برای اینکار وجود داره که گفتم اینجا بنویسم شاید به کار کس دیگری هم بیاد.

جوملا از بوت استرپ استفاده میکنه و میشه به راحتی با کد های بوت استرپ اینکار رو انجام دارد.

صفحه رو دوازده قسمت در نظر بگیرید. col-sm-1 یعنی ستون با اندازه 1/12 صفحه و col-sm-4 یعنی 1/4 صفحه.

روش استفاده اینکه وارد قسمت کد نویسی ادیتور میشین. Toggle editor

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

<div class="row">
  <div class="col-sm-4">مطلب یا عکس یا جدول در ستون اول </div>
  <div class="col-sm-4">مطلب یا عکس یا جدول در ستون دوم </div>
  <div class="col-sm-4">مطلب یا عکس یا جدول در ستون سوم </div>
</div>

وقتی توی موبایل باز میکنید ستون ها میاد زیر هم ولی به هم میچسبه. برای جلوگیری از اینکار میتونین یه مارجین هم بدین.

<div class="row">
  <div class="col-sm-4"  style="margin-top: 8px;"> مطلب یا عکس یا جدول در ستون اول  </div>
  <div class="col-sm-4"  style="margin-top: 8px;"> مطلب یا عکس یا جدول در ستون دوم </div>
  <div class="col-sm-4"  style="margin-top: 8px;"> مطلب یا عکس یا جدول در ستون سوم </div>
</div>

مطابق با ستون و سلیقه خودتون میتونین دو تا مثلا col-sm-1 بدون مطلب دو طرف بزارین و سایز ستون های وسطی  رو کمتر کنین که ستون ها وسط باشه.

<div class="row">
  <div class="col-sm-1"  style="margin-top: 8px;"> </div>
  <div class="col-sm-3"  style="margin-top: 8px;"> مطلب یا عکس یا جدول در ستون اول  </div>
  <div class="col-sm-4"  style="margin-top: 8px;"> مطلب یا عکس یا جدول در ستون دوم </div>
  <div class="col-sm-3"  style="margin-top: 8px;"> مطلب یا عکس یا جدول در ستون سوم </div>
  <div class="col-sm-1"  style="margin-top: 8px;"> </div>
</div>

این کد ها رو عینا بدون تغییر وارد و سیو کنید میتونین در سایت ببینید چه شکل و شمایلی داره و بعد با سلیقه خودتون ادیت کنید.

[hmn566 1]

تصحیح میکنم  col-sm-4 یعنی 1/3 صفحه. 12 قسمت فرضی صفحه به 3 قسمت 4 تایی تقسیم میشه.

[حجت مردانه زاده 596]

با سلام

متشکر از انتشار راهنماتون. مطمئناً به کار افراد دیگری هم ممکنه بیاد... حُسن انجمن ها در همین اشتراک نظرات و تجربه هاست...

موفق و سربلند باشید

[hmn566 1]

ممنون از شما

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