مشکل با CSS و قالب

[farhad6169 125]

با سلام

 

بعد از کلی وقت گذاشتن برای طراحی سایت یک شرکت دیدم که وقتی می خام محصولات رو بصورت بلاگ نشون بدم در 3 ستون قالب این اجازه رو نمیده. در منو میرفتم و تعداد ستون ها رو برای طرح بندی بلاگ 3 قرار میدادم اما در این قالب نمی شد ولی در یه جوملای دیگه با یه قالب دیگه 3 ستونه میشد.

بعد از کلی کلنجار راهی پیدا نکردم و شروع کردم به کد زدن در CSS که با عرض دادن به موقعیت ستون به 33% بالاخره سه ستونه شد.

حالا مشکل اینجاست که محصولات مثلا شماره 1 و 2 و 3 و ... بجای اینکه کنار هم چیده بشن، زیر هم چیده شدن

لینک سایت

 

لینک قالب دمو در سایت شرکت زوو

و مشتری هم میگه باید محصولات من طبق شماره کنار هم چیده بشن.

 

درضمن تو تنظیمات قالب خیلی تنظیمات هست ولی هیچ جا چیزی راجعبه تعداد ستون های بلاگ چیزی پیدا نکردم.

 

 

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

 

 

با تشکر

[رضاقاسمی 1,539]

من مشکلی در سایت مشاهده نکردم

[farhad6169 125]

سلام.

واقعا متوجه نشدید؟!

 

کدهای P401 و P402 و P403 باید کنار هم قرار بگیرند در حالی که زیر هم قرار گرفتند.

[رضاقاسمی 1,539]

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

http://www.jmdownload.ir/do.php?imgf=956c5fb50d631.png

[MRDindar 481]

من مشکلی در سایت مشاهده نکردم

http://www.jmdownload.ir/do.php?imgf=eb8b90064d941.jpg

[رضاقاسمی 1,539]

منظورتون در موبایله؟

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

کشتون رو خالی کنید.

ویرایش شده شهریور 94 توسط رضا قاسمی

[MRDindar 481]

خیلی هم عالیه نه تو کامپیوتر من اینطوری گرفتم متوجه شید ببینید ایشون میخوان بدین صورت باشه

1-2-3

اما بدین صورته:

1

2

3

[farhad6169 125]

سلام

به آقایون من CSS دادم که عرض بشه 33% حالا بجای اینکه بصورت

3 - 2 - 1

6 - 5 - 4

 

نمایش بده بصورت زیر نمایش میده

1

2

3

که به این شکل نباید باشه

 

با تشکر

[رضاقاسمی 1,539]

من هرچقدر عرض رو کم و زیاد می کنم همون سه ستونه است.

خودمم کش رو خالی کردم ولی فرقی نمیکنه

http://www.jmdownload.ir/do.php?imgf=dd056d5ec0cc1.png

[رضاقاسمی 1,539]

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

ولی این چیزی که من دارم میبینم عادی هست

یعنی باید زیر هم قرار بگیره و اگه قرار نگیره جای تعجب داره

زیرا قالب با تکنولوژی bootstrap طراحی شده و خود بوت استرپ این تغییرات رو اعمال می کنه و شما اگه بخواید به این صورت نمایش بدید سایت رو باید توی کد های bootstrap دست ببرید که کار مشکلی خواهد بود.

همچنین به هیچ وجه نباید float:right بدید چون قالب به هم میریزه

خود بوت استرپ چینش رو انجام میده.

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

در هر حال من تجربه خودمو از بوت استرپ گفتم.

موفق باشید.

ویرایش شده شهریور 94 توسط رضا قاسمی

[farhad6169 125]

من هرچقدر عرض رو کم و زیاد می کنم همون سه ستونه است.

خودمم کش رو خالی کردم ولی فرقی نمیکنه

http://www.jmdownload.ir/do.php?imgf=dd056d5ec0cc1.png

 

با تشکر

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

مشکل دوم: طرز نمایش محصولات هستش که شماره های 401 و 402 و 403 بجای اینکه کنار هم باشند زیر هم قرار گرفتند.

 

با تشکر

[رضاقاسمی 1,539]

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

[farhad6169 125]

با سلام

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

به نظرتون برای ریسپانسیو شدن چیکار باید بکنم. وقتی عرض رو کم می کنید باید مثل صفحه اول نمایش داده بشه، اما همچنان محصولات در 3 ستون هستش و عکس ها دیگه پیدا نیست و این بده.

 

با تشکر

[farhad6169 125]

ببینید این کدها رو در فایل custom و template قراردادم

 

.blog div.item {
  margin: 20px 0 0;
  width: 33.3333333%;
  float: right;
  padding:0 15px;
}

 

تا بصورت سه ستونه نمایش بده. اگه این کدها رو در inspect Element بردارید می بینید که محتوا در بلاگ عریض شده و زیر هم در یک ستون قرار میگیرند.

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

اما بدیش اینه که همچنان کدهای پشت سر هم ، زیر هم قرار نمی گیرند.

یعنی اول 401 بعد زیرش 407 بعد زیرش407 نمایش داده بعد میره 402.

در ضمن من در بلاگ این منو در مدیریت جوملا گفتم که بصورت 3 ستونه نمایش بده.

 

برای این مشکل چه باید کرد که

1- سه ستونه نشون بده

2- موقع کم کردن عرض به هم نریزه و مثل محصولات در صفحه اول نشون بده

3- اگر هم شد شماره محصولات پشت سر هم ، کنار هم قرار بگیره.

 

با تشکر

[farhad6169 125]

با سلام.

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

 

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

 

موفق باشید