مشکل با پهنای 1024 پیکسل در مانیتورهایی با رزیولیشن 800*600

phpweb

Active Member
یه سایت با سی اس اس درست کردم که پهناش 1024 پیکسل هست اما وقتی که از مانیتوری با رزیولیشن 600 در 800 استفاده می کنم، قسمت سمت چپ سایت رو نمایش نمی ده.

بجز مرورگر فایرفاکس مرورگرهایی مثل کروم، سافاری و . . . با این مشکل مواجه هستند.

چطور باید مشکل رو حل کنم؟

کد صفحه:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>صفحه ورود به پنل مديريت</title>
<style type="text/css">
body { font-family:Tahoma, Geneva, sans-serif; margin:0; padding:0; font-size:12px; direction:rtl; height:1000px; background-color:#FFF; }
#all { width:1000px; margin: 0 auto;}
#header { background-color:#a0c7fa; width:980px; height:40px; border-bottom: 3px #000 solid; padding:9px 10px; margin: 0 auto }
#layer_1 { width:280px; margin: 100px auto; border:3px solid; background-color: #dfdfdf; }
#layer_2 { width:160px; margin: 0 auto; padding:25px 0; }
</style>
</head>

<body>

<div id="all">
<div id="header"><a href="http://localhost/">آدرس وبسایت</a></div>
<div id="layer_1">
<div id="layer_2">
  <form id="form1" name="form1" method="post" action="index.php">
    <label for="userid">کلمه کاربري</label>
    <br />
    <input name="userid" type="text" id="userid" maxlength="16" />
    <br />
    <label for="pass">کلمه رمز</label>
    <br />
    <input name="pass" type="password" id="pass" maxlength="16" />
    <br />
    <input name="sent_userid" type="hidden" id="sent_userid" value="yes" />
    <br />
    <input type="submit" value="ورود" id="sent_form" />
  </form>
</div>
</div>
</div>
</body>
</html>
 
آخرین ویرایش:

phpweb

Active Member
کد html رو بذار ببینم چشه؟!

کد کامل صفحه رو در ادامه قرار دادم.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>صفحه ورود به پنل مديريت</title>
<style type="text/css">
body { font-family:Tahoma, Geneva, sans-serif; margin:0; padding:0; font-size:12px; direction:rtl; height:1000px; background-color:#FFF; }
#all { width:1000px; margin: 0 auto;}
#header { background-color:#a0c7fa; width:980px; height:40px; border-bottom: 3px #000 solid; padding:9px 10px; margin: 0 auto }
#layer_1 { width:280px; margin: 100px auto; border:3px solid; background-color: #dfdfdf; }
#layer_2 { width:160px; margin: 0 auto; padding:25px 0; }
</style>
</head>

<body>

<div id="all">
<div id="header"><a href="http://localhost/">آدرس وبسایت</a></div>
<div id="layer_1">
<div id="layer_2">
  <form id="form1" name="form1" method="post" action="index.php">
    <label for="userid">کلمه کاربري</label>
    <br />
    <input name="userid" type="text" id="userid" maxlength="16" />
    <br />
    <label for="pass">کلمه رمز</label>
    <br />
    <input name="pass" type="password" id="pass" maxlength="16" />
    <br />
    <input name="sent_userid" type="hidden" id="sent_userid" value="yes" />
    <br />
    <input type="submit" value="ورود" id="sent_form" />
  </form>
</div>
</div>
</div>
</body>
</html>
 
آخرین ویرایش:

echessdesign

مدیر انجمن طراحی وب
درود بر شما
در ie, ff, ch تست کردم، به یک شکل نمایش داده می شد.
در طراحی هایی همانند صفحه سایت شما، بهتر هست به جای مقدار دهی PX بر مبنای % استفاده کنید.
 

phpweb

Active Member
درود بر شما
در ie, ff, ch تست کردم، به یک شکل نمایش داده می شد.
در طراحی هایی همانند صفحه سایت شما، بهتر هست به جای مقدار دهی PX بر مبنای % استفاده کنید.

من تونستم که با اضافه کردن کد width:1000px; به body، مشکل رو برای همه مرورگرها حل کنم اما بعد از اضافه کردن این تکه کد، الان با مرورگر فایر فاکس مشکل پیدا کردم. الان با کد جدید همه مرورگرها صفحه رو کامل نشون می دن ولی اینبار فایرفاکس صفحه رو کامل نشون نمی ده.

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

HTML:
="text/css">
body { width:1000px; font-family:Tahoma, Geneva, sans-serif; margin:0; padding:0; font-size:12px; direction:rtl; height:1000px; background-color:#FFF; }
 
آخرین ویرایش:

echessdesign

مدیر انجمن طراحی وب
درود بر شما
پیشتر ها که سایت nero.com رو چک می کردم و از طراحی منظم اون لذت میبردم، به نکته جالبی بر خورد کردم.
این سایت هم آن زمان برای رزولیشن 800*600 ترفند جالبی رو به خرج داده بود. استفاده از JS !!!
بدین شکل که برای رزولیشن بیشتر از 800*600 ، یک ستون ظاهر میشد! اما برای رزولیشن کمتر، اون ستون مخفی میشد.
شما هم می تونید از این ترفند استفاده کنید
 

جدیدترین ارسال ها

بالا