چرا جدول در مركز قرار ميگيره ولي layer در مركز قرار نميگيره؟

[good luck]

من layer و جدول رو در صفحه وب ميزارم و هر دو رو در مركز قرار ميدم align=center . شكل زير را ببينيد

http://forum.majidonline.com/attachment.php?attachmentid=54158&stc=1&d=1299001646

ولي نميدونم چرا جدول در مركز صفحه قرار ميگيرد ولي layer در مركز صفحه قرار نميگيره؟ شكل زير را ببينيد.

http://forum.majidonline.com/attachment.php?attachmentid=54159&stc=1&d=1299001646

لطفا يكي جواب بده
خواهش ميكنم

 

[pouya saadeghi]

من layer و جدول رو در صفحه وب ميزارم و هر دو رو در مركز قرار ميدم align=center . شكل زير را ببينيد

http://forum.majidonline.com/attachment.php?attachmentid=54158&stc=1&d=1299001646

ولي نميدونم چرا جدول در مركز صفحه قرار ميگيرد ولي layer در مركز صفحه قرار نميگيره؟ شكل زير را ببينيد.

http://forum.majidonline.com/attachment.php?attachmentid=54159&stc=1&d=1299001646

لطفا يكي جواب بده
خواهش ميكنم

ﺷﻤﺎ ﯾﻪ ﻧﮕﺎﻫﯽ ﺑﻪ ﮐﺪ ﺑﻨﺪﺍﺯﯾﺪ ، ﯾﻪ div ﮔﺬﺍﺷﺘﯿﺪ ﮐﻪ ﯾﻪ ﻣﻮﻗﻌﯿﺖ ﺛﺎﺑﺖ ﺑﺮﺍﺵ ﺗﻌﺮﯾﻒ ﺷﺪﻩ .ﺍﻭﻧﻮﻗﺖ ﺗﻮﻗﻊ ﺩﺍﺭﯾﻦ ﮐﻪ ﺗﻮ ﻫﺮ ﺭﺯﻭﻟﻮﺷﻨﯽ ﻭﺳﻂ ﺑﻤﻮﻧﻪ ؟

 

[good luck]

اگه اينطور باشه چرا table در مركز قرار ميگيره اما layer در مركز نميمونه؟ با توجه به اينكه در هر دو كد " align="center هست.

 

[pouya saadeghi]

اگه اينطور باشه چرا table در مركز قرار ميگيره اما layer در مركز نميمونه؟ با توجه به اينكه در هر دو كد " align="center هست.

ﺑﺮﺍﯼ ﺗﯿﺒﻞ ﻫﻢ ﺍﮔﻪ position:absolute ﺑﺬﺍﺭﯾﺪ ، ﺩﯾﮕﻪ ﻭﺳﻂ ﻧﻤﯿﻤﻮﻧﻪ
ﺑﺮﺍﯼ div ﺑﺮﺍﯼ ﻭﺳﻂ ﻣﻮﻧﺪﻥ ﺍﺯ margin :0 auto ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﯿﺪ

 

[Mohammad]

پوزیشن در اینجا برای دایو معنی نداره به نظر من

 

[good luck]

ﺑﺮﺍﯼ ﺗﯿﺒﻞ ﻫﻢ ﺍﮔﻪ position:absolute ﺑﺬﺍﺭﯾﺪ ، ﺩﯾﮕﻪ ﻭﺳﻂ ﻧﻤﯿﻤﻮﻧﻪ
ﺑﺮﺍﯼ div ﺑﺮﺍﯼ ﻭﺳﻂ ﻣﻮﻧﺪﻥ ﺍﺯ margin :0 auto ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﯿﺪ

عزيزم اينكار رو كردم اما درست نشد
يه راه حل ديگه نداري؟

 

[good luck]

پوزیشن در اینجا برای دایو معنی نداره به نظر من

آقا اگه position رو بردارم ديگه div حركت نميكنه يعني ثابت ميمونه

يه راه حل خوب بگو؟

 

[pouya saadeghi]

html

<div class="div1"></div>

css

.div1{margin:0 auto;
width:400px;
height:200px;}

 

[Mohammad]

من تا اینجا کاملا متوجه نشدم شما چی می خواهید

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

<div align="center">

<div style="width: 410px; height: 176px; left: 299px; top: 96px; background-color: #008080; z-index: 1;"><br />
</div>

<table style="width: 47%; background-color: #800000; margin-top:40px;">
    <tr>
        <td><br />
        </td>
    </tr>
</table>

</div>

​

 

[1pouya]

آقا اگه position رو بردارم ديگه div حركت نميكنه يعني ثابت ميمونه

يه راه حل خوب بگو؟

دوست عزیز استایل position ای که دادی کاملا اضافیه
و left و top رو هم که دادی بی تاثیر هستند

اگه اينطور باشه چرا table در مركز قرار ميگيره اما layer در مركز نميمونه؟ با توجه به اينكه در هر دو كد " align="center هست.

در مورد تگ div هم باید بگم align برای محتویات تگ استفاده میشه نه محل خود تگ (برخلاف جدول | تذکر:در جدول برای محتویات از text-align استفاده میشه)
حالا اگه میخواید اونارو بیارید وسط راه های مختلفی هست مثلا از تگ زیر میتونید استفاده کنید

<center> your code </center>

یا مثل مثالی که محمد گذاشتند از یه تگ div دیگه استفاده کنید که align=center داشته باشه و بقیه کدها رو داخل اون قرار بدید

من تا اینجا کاملا متوجه نشدم شما چی می خواهید

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

<div align="center">

<div style="width: 410px; height: 176px; left: 299px; top: 96px; background-color: #008080; z-index: 1;"><br />
</div>

<table style="width: 47%; background-color: #800000; margin-top:40px;">
    <tr>
        <td><br />
        </td>
    </tr>
</table>

</div>

البته محمد جان شما هم left و top ای رو که دادی بی تاثیر هستند بهتر بود حذفشون میکردی
احتمالا از دستت در رفته :دی

 

[Mohammad]

البته محمد جان شما هم left و top ای رو که دادی بی تاثیر هستند بهتر بود حذفشون میکردی
احتمالا از دستت در رفته :دی

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

حالا یه نکته برام جالبه و میخوام بدونم چرا تو مانیتور good luck جان جدول بالاتر از دایو نشون داده میشه ؟ در حالی که کد جدول پایین دایو است ؟

 

[1pouya]

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

حالا یه نکته برام جالبه و میخوام بدونم چرا تو مانیتور good luck جان جدول بالاتر از دایو نشون داده میشه ؟ در حالی که کد جدول پایین دایو است ؟

دلیلش وجود استایل position هست
good luck به خاطر دادن position و left و top موقعیت تگ div رو ثابت کرده به خاطر همین جدول اومده بالا (جایگاهش ثابته و تغییر نمیکنه و تنها با تغییر اندازه left و top میشه جا به جاش کرد)
ولی چون شما استایل position رو ندادین تگ div و جدول،به درستی در جای اصلی خودشون نمایش داده میشند.

استایل position کاربردهای خیلی زیادی داره که اگه good luck دلیل استفادش از هر کدوم از استایل هایی رو که به تگهاش داده ذکر میکرد! فکر میکنم خیلی بهتر میشد راهنماییش کرد.
البته الانم جواب رو باید گرفته باشه!

 

[good luck]

اره جواب كه گرفتم ممنون
ولي ميشه خصوصيتهاي position رو يه توضيح مختصر بدي؟ 5 تا خصوصيت داره absolute - fixed - static - relative - inherit

كلا اين 5 عنصر مزاحم به چه دردي ميخوره؟ )

و يه سوال ديگه screen resolution مانيتور من 900 * 1440 هست اگه من تو اين مد صفحه سايت طراحي كنم تو همه مانيتورها مثل مانتيتور خودم نشون ميده؟ كلا بايد چيكار كرد كه صفحات سايت تو مدهاي مختلف ثابت باشه و بهم نريزه؟

 

[1pouya]

اره جواب كه گرفتم ممنون
ولي ميشه خصوصيتهاي position رو يه توضيح مختصر بدي؟ 5 تا خصوصيت داره absolute - fixed - static - relative - inherit

كلا اين 5 عنصر مزاحم به چه دردي ميخوره؟ )

http://www.w3schools.com/Css/css_positioning.asp
بهتره که یه سر به اینجا بزنی تا متوجه بشی

و يه سوال ديگه screen resolution مانيتور من 900 * 1440 هست اگه من تو اين مد صفحه سايت طراحي كنم تو همه مانيتورها مثل مانتيتور خودم نشون ميده؟ كلا بايد چيكار كرد كه صفحات سايت تو مدهاي مختلف ثابت باشه و بهم نريزه؟

برای طراحی سایت باید دقت کنید که صفحاتتون توی صفحه نمایش های کوچکتر هم به درستی نمایش داده بشن
در حال حاظر کمترین رزولوشن مورد استفاده کاربران 1024x768 هستش (800x600 دیگه مرد!)
بهترین حالت نمایش اینه که طول صفحه شما از طول مانیتور کاربر کمتر باشه تا کاربر نیاز به اسکرول در طول صفحه نداشته باشه
میتونید از min-width=900px و width=100% استفاده کنید
من یه قالب یراتون به عنوان نمونه ساختم میتونید ببینید و حالشو ببرید :دی

اینم کدش

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>min-width template by 1POUYA</title>
</head>

<body>
<div  align="center" style="margin:0 auto; width:95%; min-width:900px;  height:700px; background-color:#CCC; padding:10px; color:#900">
    <div style="clear:both; width:100%; height:200px; background-color:#333; margin-bottom:10px">
        <h1>Header</h1>
    </div>
    <div style="clear:both; width:100%; height:50px; background-color:#999; margin-bottom:20px">
        <h4>menu1</h4>
    </div>
    <div style="width:100%; height:350px;">
        <div style="float:right; background-color:#666; width:200px; height:100%;">
            <h4>menu2</h4>
        </div>
         <div align="right" style="float:right; min-width:550px; width:62%;  margin-right:20px"><h2>Content</h2></div>
        <div style="float:left; background-color:#999; width:100px; height:100%;">
            <h4>menu3</h4>
        </div>
    </div>
</div>
</body>
</html>

 

[Mohammad]

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

 

[echessdesign]

درود بر شما
با تشکر از راهنمایی کامل دوستان
استفاده از این تگ جهت قرار دادن DIV در مرکز کاملا غیر استاندارد هست:

<div align="center">

از این روش صحیح استفاده کنید:

.div1{margin:0 auto;
width:400px;
height:200px;}