مشکل در ارتفاع div در مرورگرهای مختلف

[setareh2013]

سلام

این کادر سفیدرنگی که زیر این 4 عکس هست رو نگاه کنید . من وقتی ارتفاع اون رو

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

با تشکر


117119
117120

[setareh2013]

کسی نمی تونه راهنماییم کنه ؟

[بهزاد علی محمدزاده]

به style مربوط به اون کادر سفید رنگ خاصیت : overflow:auto رو بده .

[setareh2013]

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

[setareh2013]

این کد قاب سبز رنگه

#centerpage

{


background:green;


text-align:center;


direction:rtl;


border:0px gray;


font-family: Tahoma;


font-size: 10pt;


width:1000px;


margin-left:auto;


margin-right:auto;





}


و این کد عکس ها



$(
".pg_1").css({ 'width': '240px', 'margin-left': '7.5px', 'margin-top': String(53 * currentHeight / 660) + 'px' });

$(
".pg_2").css({ 'width': '240px', 'margin-left': '7.5px', 'margin-top': String(53 * currentHeight / 660) + 'px' });

$(
".pg_3").css({ 'width': '240px', 'margin-left': '7.5px', 'margin-top': String(53 * currentHeight / 660) + 'px' });

$(
".pg_4").css({ 'width': '240px', 'margin-left': '7.5px', 'margin-top': String(53 * currentHeight / 660) + 'px' });

[بهزاد علی محمدزاده]

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

[setareh2013]

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

[mRizvandi]

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

[setareh2013]

با تشکر از شما میشه بیشتر توضیح بدید . اگه مشکل کدهامو بگین ممنون میشم

[mRizvandi]

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

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />




تعیین استایل المنتها بر اساس پهنای اسکرین

@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}




البته این روش طراحی رسپانسیو هست و کلی ریزه کاری دیگه هم داره، ولی شاید تا همین مقدار برای نیازی که شما دارید کفایت کنه
اگر اطلاعات بیشتری خواستید اینها رو جستجو کنید
Responsive Web Design
HTML5 Responsive Web Design
Media Query

اگر اطلاعات حرفه ای نیاز داشتید:
HTML Grid
HTML Column

و اگر پلتفرمهای آماده می خواستید: (البته این پلت فرمها معمولا با ASP.NET MVC قابا استفاده هستند.
HTML Foundation
Golden Grid

موفق باشید

[setareh2013]

کاش یکی به من کمک می کرد . نمی فهمم این کدها رو

[mRizvandi]

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
یعنی اگر خروجی اسکرین بود و حداکثر پهنا 480 پیکسل بود فایل shetland.css رو لود کن

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

روش دوم تعیین استایل در فایل CSS هست:

@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}

یعنی اگر خروجی اسکرین (صفحه نمایشگر بود و نه چاپ) و حداکثر پهنای صفحه 480 پیکسل بود، کلاس column شناور نشه.

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

[vahidbolbol]

شما چرا برای پهنا صفحه تون از Px استفاده کردین از درصد استفاده کنید( %) اینجوری اندازه صفحه نمایشتون نشون میده پیجتونو