قرار دادن div در مرکز صفحه [بایگانی]

iranme

سه شنبه 18 خرداد 1389, 18:08 عصر

سلام،
با استفاده از css چطوری میتونم مشخص کنم که یک div همیشه در مرکز صفحه قرار بگیرد و در مانیتورهای wide هم درست نمایش داده بشود؟
من از خاصیت absolute استفاده میکنم ولی در مانیتورهای wide کل page در یک گوشه میمونه و در مانیتور های کوچک و با رزولوشین پایین هم نصف صفحه نمایش داده نمیشه!!!
ممنون میشم راهنمایی کنید.

iranme

سه شنبه 18 خرداد 1389, 20:00 عصر

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

salehbagheri

سه شنبه 18 خرداد 1389, 20:22 عصر

اين خاصيت رو به body اضافه كنيد:

text-align:center;

اين خاصيت رو هم به body و هم به div كلي صفحه اضافه كنيد:

margin:0 auto 0 auto;
padding:0 auto 0 auto;

iranme

سه شنبه 18 خرداد 1389, 23:24 عصر

کار نکرد!!!
من رزولوشین مانیتورم 1024*1280 هست و وقتی کسی با رزولوشین 600*800 تصویر رو نگاه کنه نصف صفحه نمایش داده نمیشه!
این هم نمونه div بندی من. اگه اشکالی هست ممنون میشم راهنمایی کنید.

#header{
position:absolute;
left: 0px;
top: 0px;
width: 1250px;
height: 200px;
}
#main{
position:absolute;
background-color:#FFF;
border: none;
left: 200px;
top: 205px;
width: 600px;
height: 500px;
}

salehbagheri

سه شنبه 18 خرداد 1389, 23:38 عصر

شما كه نميتونيد اندازه 1250 رو در 800 جا كنيد!

در قسمت Header مقدار width:1250px قرار گرفته!

iranme

چهارشنبه 19 خرداد 1389, 00:00 صبح

خب چه کاری باید انجام بدم؟
وقتی جا نمیشه مگه مرورگر نباید خودش scrollbar ایجاد کنه؟
اگه 1250 رو هم کم کنم تو رزولوشین های بالا کل page یه گوشه میوفته!

salehbagheri

چهارشنبه 19 خرداد 1389, 00:09 صبح

وقتی جا نمیشه مگه مرورگر نباید خودش scrollbar ایجاد کنه؟

اگه مرورگر Google Chrome باشه و المنت شما Table ، بنابراين Scrollbar ايجاد نميشه ... بايد با مرورگرهاي ديگه چك كنيد يا المنت رو به div تغيير بديد.

اگه 1250 رو هم کم کنم تو رزولوشین های بالا کل page یه گوشه میوفته!
اون كدهايي كه تو پست اولم گذاشتم واسه خاطر همين بود كه گوشه نيوفته و بياد وسط. فكر كنم امتحانش نكرديد.

اگه نميشه كد صفحه تون رو بذاريد تا حلش كنيم.

iranme

چهارشنبه 19 خرداد 1389, 00:17 صبح

اگه مرورگر Google Chrome باشه و المنت شما Table ، بنابراين Scrollbar ايجاد نميشه ... بايد با مرورگرهاي ديگه چك كنيد يا المنت رو به div تغيير بديد.با سه مرورگر مختلف امتحان کردم ولی باز هم نتیجه یکسان هست! المنت هم div هست.
اون کد هارو هم امتحان کردم ولی کار نکرد!

margin:0 auto 0 auto;
padding:0 auto 0 auto;راستی در قسمت padding هم وقتی میخوام با dreamweaver مقدار بدهم اصلا auto را جزو لیست نمیاره!؟

kamranafshar33

چهارشنبه 19 خرداد 1389, 08:07 صبح

ببین دوست من position رو حذف کن والا align:center جواب نمیده.
به این صورت اگه بنویسی در هر مرورگری قابل اجراست:

<div align=center>
<div id=main></div></div>

iranme

چهارشنبه 19 خرداد 1389, 13:13 عصر

ببین دوست من position رو حذف کن والا align:center جواب نمیده.خب اگه دو تا div کنار هم داشته باشم و صفحه کوچک بشه اون وقت روی هم میرن که!!

mirmousavi.m

چهارشنبه 19 خرداد 1389, 13:28 عصر

اگه قرار باشه یه div باشه و او همیشه وسط باشه پس position باید حذف بشه.
میتونی همه divها رو بزاری داخل یه div.

kamranafshar33

چهارشنبه 19 خرداد 1389, 16:06 عصر

خب اگه دو تا div کنار هم داشته باشم و صفحه کوچک بشه اون وقت روی هم میرن که!!
نه روی هم نمیرن این ها یه دیو تو در تو هستند که در بیشتر مواقع از اونها استفاده میشه شمام یه امتحانی بکنین ضرر نداره.
اگه کد مربوطه رو به صورت کامل لحاظ میکردی بهتر میتونستم جواب بدم .دوست من.

kamranafshar33

چهارشنبه 19 خرداد 1389, 16:10 عصر

خب اگه دو تا div کنار هم داشته باشم و صفحه کوچک بشه اون وقت روی هم میرن که!!
ما دو تا div کنار هم نداریم بلکه روی هم داریم و به اینها میگن div تو در تو.
شما یه امتحانی بکنین ضرر نداره.

kamranafshar33

چهارشنبه 19 خرداد 1389, 16:11 عصر

خب اگه دو تا div کنار هم داشته باشم و صفحه کوچک بشه اون وقت روی هم میرن که!!
اینها div تو در تو هستند.

aliramazani

جمعه 26 اسفند 1390, 20:56 عصر

اگه بخواهیم دیو در آخر صفحه چسبیده بشه باید چکار کرد؟

mhr2004

یک شنبه 28 اسفند 1390, 14:41 عصر

سلام.
دو مدل طرح ساده برای فهم این مساله براتون درست کردم.
یکی مدل Center هست که فقط کافیه تمام دیو هاتون رو بندازید داخل یه دیو کلی که من اینجا اسمش رو گذاشتم outerDiv یا همون دیو بیرونی.
بعد margin اون رو فقط کافیه به این شکل تعریف کنید : margin: 0 auto;
و پهنای اون دیو رو هم کمتر از 980 پیکسل در نظر بگیرید که توی مانیتور های امروزی به مشکل بر نخورید.
برای اینکه دیو هاتون کنار هم باشه هم کافیه فقط به هر دو تا دیو float بدین تا کنار هم شناور بشن. همین.
مطالعه کنید مشکلی بود در خدمتم.

mhr2004

یک شنبه 28 اسفند 1390, 15:47 عصر

اگه بخواهیم دیو در آخر صفحه چسبیده بشه باید چکار کرد؟
فقط باید به اون دیو به عنوان مثال این مشخصات رو اعمال کنید :
Position: fixed;
bottom:0;
یعنی اینکه ثابت بشه به بدنه صفحه و از پایین هم که صفر دادیم فاصله اش رو.

sara_aryanfar

یک شنبه 28 اسفند 1390, 16:31 عصر

دوست گرامی salehbagheri (http://barnamenevis.org/member.php?39960-salehbagheri) شما رو به درستی راهنمایی کردن البته شما می تونی یک دیو با width ثابت بزار مثلا 900 پیکسل یا درصدی و براش margin:0px auto; بدی اینطوری اون دایو شما همیشه وسط هست و در رزولشن های مختلف چون شما یک دیو با طول ثابت دارین اگر کوچکتر بشه اسکرول بر می داره

mhr2004

یک شنبه 28 اسفند 1390, 17:04 عصر

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

aliramazani

سه شنبه 01 فروردین 1391, 10:21 صبح

فقط باید به اون دیو به عنوان مثال این مشخصات رو اعمال کنید :
Position: fixed;
bottom:0;
یعنی اینکه ثابت بشه به بدنه صفحه و از پایین هم که صفر دادیم فاصله اش رو.
من اینو نوشتم جواب نداد:
.footer
{
background-image:url(footer.png);
background-repeat:no-repeat;
bottom:0;
position:fixed;
height:56px;
margin:0px auto;
}

EMERTAT

سه شنبه 01 فروردین 1391, 19:46 عصر

www.rayanehkhabar.com (http://www.rayanehkhabar.com)

اینجور که شما نوشتید درست هست

و باید حتی موقع scrool سر جای خودش ثابت بمونه

در مرورگر IE از ورژن 7 به بعد جواب می ده و قدیمی ها نه

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

چون باید با این کد جواب می داد

aliramazani

پنج شنبه 03 فروردین 1391, 22:18 عصر

css که این بود کد html هم اینو گذاشتم:
آخر صفحه:

<div class=footer></div>

EMERTAT

پنج شنبه 03 فروردین 1391, 23:22 عصر

کدتون درسته

با چه مرورگری تست می کنید ؟؟؟؟

aliramazani

جمعه 04 فروردین 1391, 10:20 صبح

اینترنت اکسپلورر 8

EMERTAT

جمعه 04 فروردین 1391, 10:52 صبح

این نگاه کنید برای امتحان طول body زیاد کردم

امید وارم بدردتون بخوره

84577