نحوه کارکرد و چگونگی تنظیم مقدار auto در کد زیر

[sahel65]

سلام دوستان؛
این کد رو ببینید:

#container
{
width:600px;
background-color:Black;
margin:0 auto;

}

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

margin:0 auto;
این خط رو جایگزین کنیم؛

margin:0 367px;
بازهم دقیقاً ظاهر سایت مشابه قبلی میشه؛ حالا سوال من اینه که آیا یعنی اندازه عرض صفحه برابر با 1334 هستش؟
چون 367 رو اگه در 2 ضرب کرده و با عرض 600 جمع کنیم میشه 1334؟
با تشکر

[Saber Mogaddas]

سلام
تو رزولوشن مانیتور شما آره ولی همانطور که می دونیم مانیتور ها با رزولوشن مختلف اتفاده میشن به همین دلیل این عدد برای همه مانیتور ها صدق نخواهد کرد به همین دلیل هست که از margin:auto اتفاده می کنیم ..
موفق باشید..

[sahel65]

ممنونم آقای مهندس، پس auto همیشه به معنی center و مرکز هستش؟ چون در اینجا اگه بعنوان مثال background color رو بهش رنگ بدیم داره در وسط صفحه مانور میده و اونجا رو رنگی میکنه؟

[Saber Mogaddas]

سلام
auto به معنی وسط نیست در اصل وقتی ما به یه تگ استایل margin: 0 auto می دیم با قرار دادن 0 در اول مقدار پیش فرض margin از سمت بالا و پایین که در تگ هست رو صفر قرار می دیم margin:auto به تنهایی کافی خواهد بود ، با قرار دادن auto در صفحه از سمت راست وچپ به مقدار مساوی اتوماتیک وار مقدار خواهد گرفت که این مقدار تو رزولوشن های مختلف متغییر خواهد بود..که این قضیه باعث وسط چین شدن تگ ما در عرض خواهد بود خوب حالا margin:auto چرا تو ارتفاع نتیجه نمیده؟ همانطور که می دونیم ارتفاع ما متغییر هست و در صفحه امکان اسکرول هست نتیجتا margin:auto تو ارتفاع با این شرایط کارایی نخواهد داشت .ولی گاهی ما اسکرول صفحه رو عیر فعال می کنیم و میخوایم تگ ما هم از ازتفاع و هم عرض در وسط صفحه در هر رزولوشن قرار بگیره برای اینکار ما می تونیم توسط چند تا حساب کتاب ساده با jquery و یا javascript با گرفتن ارتفاع مرورگر و کم کردن آن از ارتفاع تگ مقدار margin-top لازم برای وسط چین کردن صفحه رو پیدا کنیم و این کار رو عملی کنیم برای دانش کامل از این قضیه به این تاپیک (http://barnamenevis.org/showthread.php?255449-%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-%D8%AF%D8%B1-%D8%B2%D9%85%DB%8C%D9%86%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88-%D8%A8%D9%87%DB%8C%D9%86%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA&p=1491728&viewfull=1#post1491728) نگاه کنید..
موفق باشید..

[sahel65]

ضمن تشکر دوباره از شما؛ امکانش هست بگید ایراد این کد کجاست که عکسی رو که برای پس زمینه انتخاب کردم در وسط صفحه قرار نمیده:
من یک عکس دارم در ابعاد 730 * 1028 ، میخوام این عکس دقیقا در وسط صفحه قرار بگیره؛ وقتی که بعنوان مثال به ;margin:0 250px رو میدم عکس در وسط قرار می گیره ولی چون در صفحه نمایش های دیگه این مقدار متفاوته ، ممکنه طرح دقیقا در وسط واقع نشده باشه، در صورتی که من میخوام تو هر مانیتوری در وسط دیده بشه. طبق گفته آقای مقدس با مقدار auto باید در وسط قرار بگیره ولی نمی گیره.
این کدهایی هستش که من برای این مورد نوشتم:



*
{

margin:0 auto;
padding: 0;
font-family: arial,sans-serif;

}
body
{

background-image:url(myimage/firstbg.jpg);
background-repeat:no-repeat;
background-color:Black;

}


البته اگه کد بالا رو بصورت زیر اصلاحش کنم جواب میده ولی نمیدونم آیا دادن ;width:1000px درسته یا نه؟ اصولی هستش یا خیر؟

*
{
width:1000px;
margin:0 auto;
padding: 0;
font-family: arial,sans-serif;

}

[Saber Mogaddas]

سلام
selector(* ) به این معنی هست که شما پیش فزض به تمامی تگ های موجود در صفحه استایل :

width:1000px; margin:0 auto;
padding: 0;
font-family: arial,sans-serif;


دادید . که یه کار اشتباهی هست ..
تا اونجایی که من فهمیدم فکر کنم منظور شما از عکس پس زمینه ای برای تگ body به اسم firstbg هست ..
background یه پارامتری به نام background-position داره که به وسیله این دستور میتونید پس زمینه رو تغییر بدید داده هایی که این دستور میگیره :

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

برای مثال :

background-position:right top;

پس زمینه در سمت راست قسمت بالا قرار خواهد گرفت.
ویا میتونید به صورت پیکسلی یا درصدی پس زمینه رو جابجا کنید : x% y% ، xpos ypos
برای مثال :

background-position:50% 50%;

و یا :

background-position:10px 200px;

برای قرار دادن پس زمینه در وسط چیزی که مورد نیاز شماست :

background-position:center center;

موفق باشید..

[sahel65]

خیلی خیلی ممنونم ازتون؛
فقط یه مشکل عجیب؛ اولا من طبق گفته شما کدها رو به شکل زیر تغییر دادم تا اصلاح بشه:

*
{
margin:0;
padding:0;
font-family: arial,sans-serif;

}
body
{
background-position:center center;
background-image:url(myimage/firstbg.jpg);
background-repeat:no-repeat;
background-color:Black;

}

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

background-position:center top;

رو بهش میدم عکس پس زمینه دقیقا در وسط میفته که خب جالبه و نباید اینجوری باشه و زمانی هم که این رو بهش میدم:

background-position:center bottom;

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

[Saber Mogaddas]

توجه کنید شما به تگ body که دارای پس زمینه هست اندازه ای ندادید و کاره درستی کردید و پس زمینه نیز در حالت no-reapet هست پس مسلما زمان دادن position به پایین و بالا مشکلاتی پیش رو خواهید داشت که با استفاده از یک تگ دیو کلی که با 100% عرض و طول متغییر هست و پس زمینه نیز به این تگ اعمال شده کنترل بیشتری در این مورد خواهید داشت ..
برای اینکه متوجه شوید که چرا با دادن position به پایین تصویر پس زمینه محو می شود صفحه خود رو zoom out کنید (گرفتن ctrl و بالا پایین کردن غلتک ماوس) و تغییرات ایجاد شده رو مشاهده کنید..
ولی زمانی که ما position رو در وسط قرار میدیم مانند margin:auto عمل میکنه و توصور ما همیشه در وسط صفحه قرار میگیره..من فراموش کردم این نقطه رو هم بگم که شما میتونید به این روش هم background-position رو تنظیم کنید ..

background-position:center 200px;


تصویر در وسط قرار میگیره و از سمت بالا 200px فاصله میگیره ..
موفق باشید..

[sahel65]

با استفاده از یک تگ دیو کلی که با 100% عرض و طول متغییر هست و پس زمینه نیز به این تگ اعمال شده کنترل بیشتری در این مورد خواهید داشت ..میشه این رو بیشتر توضیح بدید؟ یا اگه مثالی در این زمینه هست بگید؟
من با این کد:

background-position:center 0px;

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

height:730px;

لازم به ذکره که صفحه دیگه اسکرول نمیخوره و در وسط صفحه مطالب تغییر پیدا میکنه ؛
البته با این کد هم تصویر دقیقا در وسط قرار گرفت؛ خوبه اینجوری؟ مقدار height تو همه دستگاهها یکسان هستش؟ بعید میدونم اینجوری تو همه صفحات تصویر رو در وسط از نظر ارتفاع قرار بده! ولی خب اندازه عکسمون دقیقا همون 730 پیکسل هستش و قاعدتاً نباید بهم ریختگی ایجاد کنه.(همونجور که گفتم صفحه دیگه اسکرول نمیخوره و در وسط مطالب تغییر می کنه.)

body
{
background-position:center center;
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-color:Black;
height:730px;

}

ولی علت اینکه با دادن

background-position:center center;

تصویر در وسط از هر نظر قرار نمی گیره به دلیل ندادن اندازه هستش؟ یعنی همون height و width ؟
خیلی ببخشید.

[Saber Mogaddas]

میشه این رو بیشتر توضیح بدید؟ یا اگه مثالی در این زمینه هست بگید؟

یک دیو خواهیم داشت که تمام محتویات داخل body در اون جای خواهند گرفت و width:100% خواهد بود و میتونیم height ور ندیم ولی چون میفرمایید که صفحه شما scroll نمی خوره بهتره که از height:100% استفاده کنیم پس زمینمون رو به این تگ اعمال میکنیم یعنی firstbg رو با تمامی پارامترهای background برمیداریم و برای این تگ اعمال میکنیم حالا ما تگی داریم که هم از عرض و هم از طول تمامی مرورگر مارو تو تمامی نمایشگرها پوشش میده و background-position ای که به تصویر اعمال میشه نیز داخل چهارچوب همین تگ خواهد بود.
ولی بازم میگم اگه صفحه شما فاقد اسکرول هست با همون روش قبلی در تگ body و با استفاده از background-position کارتون رو پیش ببرید و مقدار اولی رو center و اگه نیاز به بالا و پایین کردن داشت مقدار دوم رو نیز توسط مقدارهای پیکسلی تنظیم کنید می تونید این مقدار رو به صورت منفی نیز وارد کنید..و در این صورت نیاز به تگ اضافی نخواهید داشت..دادن height به body امکان داره تو نمایشگر های مختلف شمارو با مشکل مواجه کنه مثل اسکرول خوردن صفحه ندادن height به تگ body و auto بودن این اندازه این مشکل رو حل میکنه البته میتونید توسط overflow:hidden در تگ body اسکرول صفحه رو حذف کنید ولی اینم در نظر داشته باشید که overflow تگ body در صورت زیاد شدن محتوای صفحه hidden خواهد شد..
موفق باشید..