اندازه استاندارد قالب

[سعید کشاورز]

سلام دوستان..
یه چیز جالب امروز دیدم..
به وب سایت نارنجی برید : www.narenji.ir
من تا الان قالب سایت هایی رو که میساختم width:960px در نظر میگرفتم که توی رزولیشن 1024*768 صفحه اسکرول افقی نداشته باشه.
اما این کار باعث میشد که توی رزولیشن 1366*768 سایت دقیقا در وسط صفحه قرار بگیره..و از سمت چپ و راست کلی فضا اضافه میومد..
ولی سایت نارنجی اینجوری نیست..
چه توی 1366*768 و چه در 1024*768 به صورت کامل و بدون مشکل نمایش داده میشه..
میخاستم بدونم چجوری این کار رو کردن؟
مبنای همه واحدهای من PX هستش
آیا توی این سایت از % یا چیز دیگه یا روش دیگه ای استفاده شده؟
ممنون میشم راهنمایی کنید..

[tamafi6]

نمونه رانگاه کن


<div id="header">
<h1>Header</h1>
</div>
<div id="left">
<div id="leftcontent">
<h1>Left</h1>
<p>Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left</p>
</div>
</div>
<div id="content">
<div id="contentcontent" dir="rtl">
<h1>Content</h1>
<p>Css3 نسخه جدید و نسخه سوم CSS می باشد که امکانات خیره کننده ای را برای طراحان وب فراهم آورده است، این نسخه هنوز توسط W3C در حال توسعه است و مرورگرها هم برای اینکه بتوانند css3 را پشتیبانی کنند روز به روز در حال بروزرسانی خود هستند. در حال حاضر اکثر مرورگرهای مدرن CSS3 را پشتیبانی می کنند.</p>
<p>Css3 نسخه جدید و نسخه سوم CSS می باشد که امکانات خیره کننده ای را برای طراحان وب فراهم آورده است، این نسخه هنوز توسط W3C در حال توسعه است و مرورگرها هم برای اینکه بتوانند css3 را پشتیبانی کنند روز به روز در حال بروزرسانی خود هستند. در حال حاضر اکثر مرورگرهای مدرن CSS3 را پشتیبانی می کنند.</p>
</div>
</div>
<div id="right">
<div id="rightcontent">
<h1>Right</h1>
<p>Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />Right</p>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>

وcss


body {
background: url(3.jpg);
margin: 0;
padding: 0;
}
#header, #footer {
background-color: #33CCFF;
text-align: center;
}
#header {
height: 100px;
}
#footer {
height: 50px;
}
#content {
background-color: #66FF66;
margin: 0;
margin-left: 100px;
margin-right: 100px;
}
#left, #right {
background-color: #FF9999;
position: absolute;
top: 100px;
width: 100px;
}
#left {
left: 0;
}
#right {
right: 0;
}
body {
font: medium verdana, arial, sans-serif;
}
h1 {
margin-top: 0;
margin-bottom: 0;
}
p {
text-align: justify;
margin-top: 6pt;
margin-bottom: 0;
}

[سعید کشاورز]

ممنون..
ولی میشه یکم توضیح بدی؟

[mehbod.rayaneh]

سلام
به این توجه کنید :


<link type="text/css" rel="stylesheet" media="all" "http://narenji.ir/ (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/color-narenji.css)sites/default/files/css/css_7e8ea64743956ec9eeb04f1db2f6d1a5.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/default/files/css/css_7e8ea64743956ec9eeb04f1db2f6d1a5.css)" />
<!--[if lte IE 8]>
<link type="text/css" rel="stylesheet" media="all" "http://narenji.ir/sites/all/themes/narenji/css/narenji-not-mobile.css" />
<![endif]-->
<link type="text/css" rel="stylesheet" media="all" "http://narenji.ir/sites/all/themes/narenji/css/color-narenji.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/color-narenji.css)" />
<link rel='stylesheet' media='screen and (min-width: 761px)' 'http://narenji.ir/sites/all/themes/narenji/css/narenji-not-mobile.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/narenji-not-mobile.css)' />
<link rel='stylesheet' media='screen and (max-width: 1242px) and (min-width: 1000px)' 'http://narenji.ir/sites/all/themes/narenji/css/narenji-pc.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/narenji-pc.css)' />
<link rel='stylesheet' media='screen and (max-width: 999px) and (min-width: 761px)' 'http://narenji.ir/sites/all/themes/narenji/css/narenji-tablet.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/narenji-tablet.css)' />
<link rel='stylesheet' media='print, screen and (max-width: 760px)' 'http://narenji.ir/sites/all/themes/narenji/css/narenji-mobile.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/narenji-mobile.css)' />
رسپانسیو نمیشه گفت!!!
اومدن برای هر سایز صفحه 1 استایل تعریف کردن!!!
حتی برای موبایل و ...!!!
برای منم جالب بود! کلک خوبیه! :D
موفق باشید :)

[سعید کشاورز]

سلام
به این توجه کنید :


<link type="text/css" rel="stylesheet" media="all" "http://narenji.ir/ (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/color-narenji.css)sites/default/files/css/css_7e8ea64743956ec9eeb04f1db2f6d1a5.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/default/files/css/css_7e8ea64743956ec9eeb04f1db2f6d1a5.css)" />
<!--[if lte IE 8]>
<link type="text/css" rel="stylesheet" media="all" "http://narenji.ir/sites/all/themes/narenji/css/narenji-not-mobile.css" />
<![endif]-->
<link type="text/css" rel="stylesheet" media="all" "http://narenji.ir/sites/all/themes/narenji/css/color-narenji.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/color-narenji.css)" />
<link rel='stylesheet' media='screen and (min-width: 761px)' 'http://narenji.ir/sites/all/themes/narenji/css/narenji-not-mobile.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/narenji-not-mobile.css)' />
<link rel='stylesheet' media='screen and (max-width: 1242px) and (min-width: 1000px)' 'http://narenji.ir/sites/all/themes/narenji/css/narenji-pc.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/narenji-pc.css)' />
<link rel='stylesheet' media='screen and (max-width: 999px) and (min-width: 761px)' 'http://narenji.ir/sites/all/themes/narenji/css/narenji-tablet.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/narenji-tablet.css)' />
<link rel='stylesheet' media='print, screen and (max-width: 760px)' 'http://narenji.ir/sites/all/themes/narenji/css/narenji-mobile.css (http://barnamenevis.org/view-source:http://narenji.ir/sites/all/themes/narenji/css/narenji-mobile.css)' />
رسپانسیو نمیشه گفت!!!
اومدن برای هر سایز صفحه 1 استایل تعریف کردن!!!
حتی برای موبایل و ...!!!
برای منم جالب بود! کلک خوبیه! :D
موفق باشید :)

حالا یه سوال؟
اگه اینجوری باشه که هست..مرورگر از کجا تشخیص میده که باید از کدوم فایل CSS استفاده کنه؟

[mehbod.rayaneh]

از media استفاده کرده!!!
http://www.w3schools.com/tags/att_style_media.asp
کلا طرح جالبیه! :D
اصن آدم این ایده های خلاقو میبینه لذت میبره! :D