تغییر در هدر سایت

[sarj 31]

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

بنده داریم یک قالب طراحی میکنم

سایز کل صفحه رو بروی 900px ست کردم ولی میخوام هدر و فوتر در صورتی که سایز صفحه نمایش بزرگتر بود background اونها در عرض تکرار بشه.

نمونه کد بنده:

body {
background: #313131;
margin: 0;
padding: 0;
}
#main{
width: 900px;
margin: 0 auto;
padding: 0 auto;
}

#top{
height: 200px;
background-image: url('../images/header_pattern.png');
background-repeat: repeat;
text-align: center;
}

#logo{

}

#footer{
background: #000;
margin-top: 15px;
height: 235px;
}

[sarj 31]

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

سایز بدنه بروی 900 هست و هدر هم 900 در نظر گرفته شده و در صورتیکه صفحه نمایش بزرگتر باشه در حال حاضر رنگ تعریف شده در body نمایش داده میشه میخوام اگر صفحه بزگتر باشه رنگ همون هدر نمایش داده بشه:

مرسی

[saber 208]

میتونید از media query استفاده کنید لینک زیر رو بررسی کنیدد

CSS3 @media Rule

[sarj 31]

الان بنده این رو استفاده کردم برای کارم درسته؟:auau::auau:

ولی جواب نمیده:

@media screen and (min-width: 981px) {
   #header {
       background-image: url('../images/header_pattern.png');
	width: 100%;
   }
}

[mahdi_mobasheri 21]

درود

به جای min-width گزینه max -width را چک کن

[sarj 31]

خیر جواب نمیده .!!!

[Vahid Taheri 74]

این جور که من فهمیدم ، سورس html شما طوریه که header و footer زیر مجموعه body هستند. body عرض 900 داره ولی میخوایید در مانیتور های مختلف هدر و فوتر 100% باشند.

اگر برداشت من از مسئله درست بود این روش رو بهتون توصیه میکنم.

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

بقیه اجزا هم در container بدین. برای قرار دادن container در وسط صفحه هم از margin:0 auto; استفاده کنید.

موفق باشید

[sarj 31]

این جور که من فهمیدم ، سورس html شما طوریه که header و footer زیر مجموعه body هستند. body عرض 900 داره ولی میخوایید در مانیتور های مختلف هدر و فوتر 100% باشند.

اگر برداشت من از مسئله درست بود این روش رو بهتون توصیه میکنم.

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

بقیه اجزا هم در container بدین. برای قرار دادن container در وسط صفحه هم از margin:0 auto; استفاده کنید.

موفق باشید

ممنون وحید جان

الان عناصری که من قرارداددم در header و footer دقیقا از کنار صفحه نمایش داده میشن(مثل لوگوها و مازول ها)،چطوری میتونم کاری کنم که عناصر header و footer هم توی همون 900px درج بشن و فقط background باندازه صفحه باشه؟

[Vahid Taheri 74]

پس میخواهید ، هدر و فوتر هم 900 باشند. خوب طبق همون مراحلی که توی پست قبلی گفتم برید ، هدر و فوتر هم بذارید توی container.

[sarj 31]

احتمالا منظورمو خوب عرض نکردم لطفا سایت زیر رو ببینید:

باشگاه پرسپولیس | خانه

بکگراند هدر توی کل صفحه نمایش داده میشه ولی اجزای هدر (لوگو و منو و ...) تو عرض 900pixel فیکس شدند!

[topmihan 11]

سلام مهندس

خب شما داخل مثلا هدر یه موقعیت دارین واسه لوگو اونو مارگین بدین بهش

مثلا بادی 100 درصد

هدر 100 درصد

کانتاینر 80 درصد هستش

حالا شما لوگو رو 10 درصد از راست مارگین بدین

[sarj 31]

سلام مهندس

خب شما داخل مثلا هدر یه موقعیت دارین واسه لوگو اونو مارگین بدین بهش

مثلا بادی 100 درصد

هدر 100 درصد

کانتاینر 80 درصد هستش

حالا شما لوگو رو 10 درصد از راست مارگین بدین

فکر نمیکنم روش استانداردی باشه و توی رزولوشین های مختلف بهم میریزه:auau:

[topmihan 11]

نه دیگه وقتی درصد میدی با توجه به سایز صفحت کار میکنه

استاندارد اندازه دهی به درصد هستش

حالا یه تست بزن ( راهی بود که به ذهن من رسید دیگه )

[mahdi_mobasheri 21]

فکر نمیکنم روش استانداردی باشه و توی رزولوشین های مختلف بهم میریزه:auau:

در طراحی از فریم ورکها استفاده کنید به نظرم و پیشنهاد من اینه که از bootstrap استفاده کنید

[sarj 31]

در طراحی از فریم ورکها استفاده کنید به نظرم و پیشنهاد من اینه که از bootstrap استفاده کنید

بله دوست عزیز قطعا استفاده از فریم ورک ها روش منطقی تر برای طراحی قالب هست ولی خب توی فریم ورک ها از این دست مشکل ها که مربوط به html و css باشه هم وجود داره در واقع فریم ورک درسته که layout بندی و structure رو خیلی راحت واستون پیاده سازی میکنن ولی خب باز بایست html و css رو بطور کامل مسلط باشید

توی جوملا هم Bootstrap مستقیما مورد استفاده قرار نمیگیره بلکه توسط فریم ورک های واسط مثل

t3 و heilx و ...

مورد استفاده قرار قرار میگیره:25:

سپاس از پاسختون

[sarj 31]

کسی نیست راهنمایی کنه؟:33::auau:

[mahdi_mobasheri 21]

کسی نیست راهنمایی کنه؟:33::auau:

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

[sarj 31]

سایت لوکا هست دوست عزیزم

[seven7777777 13]

سلام دوست عزیز

این مورد چندان پیچیده نیست ها

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

داخل اون یک دایو برای اجزای هدر دارید که میشه header-container

اولی 100 درصد عرض و داخلیش نود درصد عرض داره

بکگراند تکرار شونده میشه بکگرانده header

و اجزا شما داخل header-container قرار میگیرند

امیدوارم متوجه شده باشین