وسط نبودن صفحه سایت

**AriyaDownload** · October 5th, 2012, 01:01

نوشته اصلی توسط iranian-portal

من هم با قالب جدیدی که دارم طراحی می کنم به این مشکل برخورد کردم
علت این امر این هست که برای وسط چین کردن قالب در css از کد margin به صورت های زیر استفاده میشه

کد:

margin : 0 50% 10px 50%;

یا

کد:

margin : 0 auto 10px auto;

متاستفانه این کدها توی مرورگر اینترنت اکسپلورر یا جواب نمیده یا قالب رو برهم میریزه!!!
من اومدم توی قالب دستی از دو حالت دیگه استفاده کردم:

کد:

<center>
<div id="content">
</center>

و

کد:

<div align="center">
</div>

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

علت مشکل شما به خاطر این هست که وقتی از margin : auto استفاده می کنید باید حتما به اون width بدید تا درست کار کنه
اگه مرورگری (مثلا کروم) درست اجرا می کنه دلیل بر این نیست که کد درسته، مرورگرهای پیشرفته معمولا خطاهای کدنویسی رو تا حدودی چشم پوشی می کنن و یک جوری منظور کدنویس رو متوجه می شن

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

**iranian-portal** · October 5th, 2012, 01:35

نوشته اصلی توسط AriyaDownload

علت مشکل شما به خاطر این هست که وقتی از margin : auto استفاده می کنید باید حتما به اون width بدید تا درست کار کنه
اگه مرورگری (مثلا کروم) درست اجرا می کنه دلیل بر این نیست که کد درسته، مرورگرهای پیشرفته معمولا خطاهای کدنویسی رو تا حدودی چشم پوشی می کنن و یک جوری منظور کدنویس رو متوجه می شن

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

تا جایی که تحقیق کردم به طور کلی مرورگر اینترنت اکسپلورر با این کد auto مشکل داره
که البته اکثریت می گفتند در ie 9 مشکل حل شده
اما بازهم برای من با وجود تعریف width این مشکل وجود داشت
زمانی که از auto استفاده میشد کلا قالب راست چین میشد (با توجه به دایرکشن rtl ) و زمانی هم که از 50% استفاده میشه نوار لغزان width صفحه رو تا 100 درصد افزایش میده جهت این هم که مطمئن بشید کد مشکل خاصی نداشته:

کد:

 #content  { 
height : auto; 
width : 970px; 
overflow : hidden !important ; 
margin : 0 auto 10px auto; 
 }

**AriyaDownload** · October 5th, 2012, 11:29

نوشته اصلی توسط iranian-portal

تا جایی که تحقیق کردم به طور کلی مرورگر اینترنت اکسپلورر با این کد auto مشکل داره
که البته اکثریت می گفتند در ie 9 مشکل حل شده
اما بازهم برای من با وجود تعریف width این مشکل وجود داشت
زمانی که از auto استفاده میشد کلا قالب راست چین میشد (با توجه به دایرکشن rtl ) و زمانی هم که از 50% استفاده میشه نوار لغزان width صفحه رو تا 100 درصد افزایش میده جهت این هم که مطمئن بشید کد مشکل خاصی نداشته:

کد:

 #content  { 
height : auto; 
width : 970px; 
overflow : hidden !important ; 
margin : 0 auto 10px auto; 
 }

اینترنت اسکپلورر مشکلی نداره، و margin رو دیگه به راحتی ساپورت می کنه

(درسته ie گیج می زنه ولی دیگه نه اینقدر :D)
این کد رو تست کنید ببنید تو ie درست کار می کنه :

کد:

<!DOCTYPE HTML>
<html>
	<head>
		<title>تست margin auto</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			body{
				direction: rtl;
				background:#fff;
			}
			div.margin{
				width: 500px;
				height: 300px;
				background: darkred;
				border:1px solid #000;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<div class="margin">
			
		</div><!--///end margin///-->
	</body>
</html>

**AriyaDownload** · October 5th, 2012, 11:35

نوشته اصلی توسط iranian-portal

کد:

 #content  { 
height : auto; 
width : 970px; 
overflow : hidden !important ; 
margin : 0 auto 10px auto; 
 }

راستی این کد مشکلی نداره و به درستی کار می کنه
به width توجه کنید که 970 پیکسل وارد کردید و عرض استاندارد 980 پیکسل هست.
شاید به خاطر همین هست که می گید وسط نمی یاد. اختلاف 10 پیکسل هست.
اگر کدهای html , css رو کامل قرار بدید شاید بهتر بشه راهنمایی کرد.

**iranian-portal** · October 5th, 2012, 01:37

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

کد:

<!--[if IE]>
<center>
<div id="content">
</center>
<![endif]-->

که بعد از این کد کد پیش فرض و یا کدی که برای استفاده عمومی سایر مرورگرهاست درج شد کردم:

کد:

<div id="content">

امیدوارم با رفع مشکل بنده و مباحث مطرح شده مشکل دوست عزیزمون هم حل شده باشه

**AriyaDownload** · October 5th, 2012, 11:31

نوشته اصلی توسط iranian-portal

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

کد:

<!--[if IE]>
<center>
<div id="content">
</center>
<![endif]-->

که بعد از این کد کد پیش فرض و یا کدی که برای استفاده عمومی سایر مرورگرهاست درج شد کردم:

کد:

<div id="content">

امیدوارم با رفع مشکل بنده و مباحث مطرح شده مشکل دوست عزیزمون هم حل شده باشه

پیشنهاد می کنم از تگ center استفاده نکنید، این تگ منقرض شده
منبع : HTML center tag

موضوع: وسط نبودن صفحه سایت

ابزارهای موضوع

نحوه نمایش موضوع

Hybrid View

پاسخ : وسط نبودن صفحه سایت

پاسخ : وسط نبودن صفحه سایت

پاسخ : وسط نبودن صفحه سایت

پاسخ : وسط نبودن صفحه سایت

پاسخ : وسط نبودن صفحه سایت

پاسخ : وسط نبودن صفحه سایت

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

موضوعات مشابه

کمک در وسط چین کردن یه نظر سنجی‌ ( طراحی سایت )

کمک در وسط چین کردن یه نظر سنجی‌ ( طراحی سایت )

مشکل با سایت مایکروسافت

مشکل با سایت مایکروسافت

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

مجوز های ارسال و ویرایش