hmn566

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

10 پست در این موضوع

با سلام

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

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

qzsf_untitled_thumb.png

با تشکر

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش html و css آموزش لاراول آموزش cPanel آموزش php آموزش سئو وردپرس آموزش امنیت وردپرس آموزش وردپرس آموزش فرم ساز RSform آموزش سئو جوملا آموزش فروشگاه ساز Hikashop آموزش فروشگاه ساز ویرچومارت آموزش طراحی سایت آگهی تبلیغاتی آموزش امنیت جوملا آموزش طراحی سایت فروش فایل آموزش طراحی قالب ریسپانسیو با Helix آموزش جوملا 3 آموزش ساخت ربات دکمه ی شیشه ای آموزش ساخت ربات همکاری در فروش آموزش ساخت ربات جذب ممبر آموزش ساخت ربات ضد اسپم آموزش ساخت ربات پیوست فایل سورس ربات مدیر گروه | ربات مدیر گروه همسریابی

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

Share this post


Link to post
Share on other sites

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

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

ممنون

Share this post


Link to post
Share on other sites

درود

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

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

Share this post


Link to post
Share on other sites

سلام

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

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

ممنون

Share this post


Link to post
Share on other sites

باسلام

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

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

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

Share this post


Link to post
Share on other sites

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

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

صفحه رو دوازده قسمت در نظر بگیرید. 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>

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

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

با سلام

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

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

Share this post


Link to post
Share on other sites

ممنون از شما

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

Share this post


Link to post
Share on other sites

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

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

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

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


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

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

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


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