yavadood

قرار دادن چند تصویر در کنار هم در css

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

با سلام خدمت دوستان

میخواستم بدونم چطوری میتونم چند تصویر رو در کنار هم در css مثلا در قسمت هدر ماژول یا بکگراند کنار هم قرار بدم؟

مثلا در قسمت هدر ماژول میخوام 3تا تکه عکس رو در کنار هم قرار بدم به اینصورت که تصویر 1 یکبار تکرار بشه و تصویر 2 در وسط قرار بگیره و به نسبت طول ماژول تکرار بشه و تصویر آخری رو هم در آخر قرار بگیره و یکبار تکرار بشه.

و مثلا در بکگراند یک تصویر در بالا قرار بگیره و فقط در سطر x تکرار بشه و تصویر بعدی در زیر قرار بگیره و به صورت xوy تکرار بشه.

خواهشا با مثال یکی اینو برام توضیح بده هر جوری فک میکنم نمیدونم چطور کدها رو بنویسم که در کنار هم یا در زیر هم اجرا بشه.

ممنونم

موفق و پیروز باشید

یا علی

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

دقیقا یک معما طراحی کردید ...!؟ حداقل یک نمونه لینک بذارید تا دمویی به صورت عکس قرار بدید .....

Share this post


Link to post
Share on other sites

درود

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

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

سلام دوستان

میخوام به اینصورت که تو این عکس ها گذاشتم در بیآد:

نمونه ماژول:

header-module.jpg

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

background.jpg

ممنون

یا علی

ویرایش شده در توسط yavadood

Share this post


Link to post
Share on other sites

برای اینکه بتونید هدر ماژول را customize خودتون کنید باید از قابلیت overide استفاده کنید و نیاز هست کاملا با بحث طراحی قالب آشنا باشید

در پوشه html در قالب پیشفرض شما فایلی به نام modules.php هست که با توابع داخل اون میتونید استایل اختصاصی برای هدر و فوتر ماژول پیاده سازی کنید

Share this post


Link to post
Share on other sites
برای اینکه بتونید هدر ماژول را customize خودتون کنید باید از قابلیت overide استفاده کنید و نیاز هست کاملا با بحث طراحی قالب آشنا باشید

در پوشه html در قالب پیشفرض شما فایلی به نام modules.php هست که با توابع داخل اون میتونید استایل اختصاصی برای هدر و فوتر ماژول پیاده سازی کنید

سلام عزیز ممنون که جواب دادی

اما داداش من کاملا میتونم هدر ماژول رو تنظیم کنم و هر چی میخوام میتونم بزارم ولی نمیدونم چطوری 3تا تصویر رو اونطوری پشت هم قرار بدم تو هدر ماژول و چطوری 2تا تصویر رو زیر هم در بکگراند بزارم

فهمیدی عزیزgift

ممنون

یا علی

Share this post


Link to post
Share on other sites

سلام عزیز

کد که داخل فایل module.css هست اینه:

.mod-box-header .module-title {
margin: -15px -15px 10px -15px;
padding: 13px 15px 11px 15px;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #d1d1d1;
background: url("../images/cpi_h3.png") repeat-x scroll right top transparent;
}

و در این قسمت background: url("../images/cpi_h3.png") repeat-x scroll right top transparent آدرس تصویر رو قرار میدم و تصویر رو هدر ماژول میآد اینجا چه جوری کنم؟ شرمنده نمیدونم چیکار کنم و گفتین 3تا div بزارم نمیدونم چطوریه؟

Share this post


Link to post
Share on other sites

سلام به دوستان

آقا یکی نیست یه لطف کنه یه مثال عملی بزنه در مورد کد ها؟

ممنون

یا علی

Share this post


Link to post
Share on other sites

دوست عزیز راحترین راه فهم موضوع اینه برای مثال شما می خواهی 3 تا تصویر برای موقعیت تیتر ماژول قرار بدی؟

در حالت عادی شما فقط یک تصویر میتونید قرار بدید؟پس راه حل چیه یا تصاویر رو ادغام کنید که تو توضیحات شما این مورد نمی شه

در حالت دوم که مربوط به توضیحات بالا می شه اینکه شما تیتر ماژول رو 3 تا دایو تو در تو برای مثال قرار بدی وبه هر دایو یک تصویر اختصاص بدی

Share this post


Link to post
Share on other sites

سلام

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

Share this post


Link to post
Share on other sites

سلام

ممنون بلاژه عزیز

فقط من نمیدونم چطور div رو قرار بدم؟

ممنون

یا علی

Share this post


Link to post
Share on other sites
سلام

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

سلام

بنر متحرک دیگه چیه؟

Share this post


Link to post
Share on other sites

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

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

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

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


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

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

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


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