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

[abdollah110110]

سلام دوستان

چطور میشه از بهم ریختن قالب سایت در هنگام تغییر اندازه browser جلوگیری کرد؟

متشکرم.

[سامان زارع]

شما بايد تمام div هاتون رو داخل يک دايو پدر مثلا با اندازه 1024 پيکسل قرار بديد
مثلا

کد:

<div class='main'>
  <div class='header'></div>
  <div class='body'></div>
</div>

که اينجا چون width کلاس main ثابت هست اگر مرورگر کوچيک با بزگ هم بشه هيچ تغييري توي نمايش بوجودنمياد

[fatima-php]

بهتره Responsive طراحی کنید.

[wallfa]

هر طراحی وابسته به یک سری اصول و قائده است ، که ما باید اونها قبل طراحی تعیین کنیم ، یکی از اون اصول تعیین کردن صفحه نمایش ها است ، که بعضی اوقات ثابت و بعضی اوقات میشه گفت اکثر دستگاه ها !
به همین خاطر ما دو روش طراحی واکنش گرا و طراحی برای صفحه حداقل داریم . که پیشنهاد می کنم شما از واکنش گرا به صورت اولیه استفاده نکنید .

برای طراحی حداقل ما یک صفحه نمایشی با عرض حداقل 1024 در نظر می گیریم که تمام طرح هامون داخل اون انجام میشه !
امیدوارم متوجه شده باشید .

[abdollah110110]

غیر از پست شماره 2 که گفتن div پدر داشته باشیم و من خودم این کارو کرده بودم، همه پستهای بعد بصورت تئوری هستن و راهکار عملی نشون ندادن. البته من از دوستان تشکر میکنم ولی هدف من از ایجاد این تاپیک گرفتن یک یا چند راهکار عملی هست.

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

[MRPM]

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

[abdollah110110]

در پست 5 که بطور کامل جزئیاتو توضیح دادم.
مشکل تغییر اندازه نشدن عکس زمینه استایله.

[ADMIN]

لطفاً تاپیک رو درصورت رسیدن به نتیجه، نبندین و حذف نکنید. ممکنه مشکل شما برای افراد دیگه هم پیش بیاد. هدف ما اینجا رفع مشکل خودمون به تنهایی نیست. اگه به نتیجه دلخواه نرسیدین هم باز تاپیک رو حذف نکنید چون ممکنه یکی بالأخره جواب مناسب بده.

درصورتی که به جواب دلخواهتون نرسیدین، توضیحات بیشتر بدین تا بهتر بشه راهنمایی کرد.

[abdollah110110]

من فک کردم این تاپیک به نتیجه نرسید و دیگه بودنش ضرورتی نداره برای همین حذف کردم.

طبق توصیه شما عمل میکنم.

[abdollah110110]

برای جلوگیری از بهم ریختن قالب سایت در هنگام تغییر اندازه مرورگر، وقتی که برای عنصری از عناصر صفحه عکس زمینه بصورت استایل قرار داده ایم، ارتفاع و پهنای عنصرو برابر ارتفاع و پهنای تصویر زمینه قرار میدهیم و همچنین برای تصویر زمینه no-repeat را انتخاب میکنیم و fixed را برایش انتخاب نمیکنیم:

کد:

.header {
   height: 400px;
   width: 1200px;
   background: #990099 url(../images/header.png) no-repeat 0 0;
}