PDA

View Full Version : جدول با ارتفاع 100%


shahab_ksh
دوشنبه 07 آبان 1386, 18:00 عصر
این کد را در نظر بگیرید




<!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">
<body >
<table style="width: 569px; height: 100%" cellspacing="1" >
<tr>
<td style="table-layout: auto; top: inherit">&nbsp;</td>
</tr>
</table>
</body>
</html>



یعنی ارتفاع باید در صفحه 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">
ehsan2007
دوشنبه 07 آبان 1386, 21:41 عصر
من امتحان کردم هیچ مشکلی نداشت کد شما اگه با ویژوال استدیو کار میکنی یک پروژه جدید ایجاد کن و کداتو اونجا کپی کن انشالله که درست بشه
mahdi_farhani
دوشنبه 07 آبان 1386, 21:51 عصر
من هم این مشکلو دارم و مطمئنن از وی‍ژوال استدیو نیست چون با حذف این کد


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

مشکل حل میشه ،
ولی نمیدونم این چیه و به چه دردی می خوره و آیا با حذف جای دیگه از برنامه میلنگه یا نه ... ؟
shahab_ksh
دوشنبه 07 آبان 1386, 22:21 عصر
من امتحان کردم هیچ مشکلی نداشت کد شما اگه با ویژوال استدیو کار میکنی یک پروژه جدید ایجاد کن و کداتو اونجا کپی کن انشالله که درست بشه


در Microsoft Expression Web همین شکل وجود دارد




ولی نمیدونم این چیه و به چه دردی می خوره و آیا با حذف جای دیگه از برنامه میلنگه یا نه ... ؟


اگه نباشه فونتها و اشیای صفحه زوم میشن و بزرگتر نشون میدن صفحه به هم میریزه
miladr
دوشنبه 07 آبان 1386, 22:41 عصر
این یه استاندارد واسه Xhtml که توسط w3 قبول شده.
شما باید توی تگ body اینرو اضافه کنید

marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0
shahab_ksh
دوشنبه 07 آبان 1386, 22:49 عصر
باز هم مشکل حل نشد !
miladr
دوشنبه 07 آبان 1386, 22:58 عصر
میشه کل کد صفحه رو بزاری؟
shahab_ksh
دوشنبه 07 آبان 1386, 23:15 عصر
این هم کل صفحه
miladr
دوشنبه 07 آبان 1386, 23:43 عصر
تگ body رو با این عوض کن

<body style=" margin-top: 0; margin-bottom: 0">
miladr
دوشنبه 07 آبان 1386, 23:44 عصر
با این بهتره

<body style=" margin:0; ">
miladr
دوشنبه 07 آبان 1386, 23:47 عصر
با این بهتره

<body style=" margin:0; ">
shahab_ksh
دوشنبه 07 آبان 1386, 23:52 عصر
با هیج کدوم تغییر نکرد شما میتونید فایل رو بردارید تست کنید

و میتونید پست ها رو ویرایش کنید
miladr
سه شنبه 08 آبان 1386, 00:09 صبح
تست کردم که میگم.
اونم بلدم اشتباه شد.
shahab_ksh
سه شنبه 08 آبان 1386, 00:31 صبح
تست کردم که میگم.
اونم بلدم اشتباه شد.



یعنی شما تست کردید مشکلی نداشت ؟
miladr
سه شنبه 08 آبان 1386, 03:29 صبح
والا نه به محض این که کد رو عوض کردم table از همه طرف چسبید به طرفین
mahdi_farhani
سه شنبه 08 آبان 1386, 06:54 صبح
من وقتی اون کدو بر می دارم هیچ اتفاقی نمی افته و فقط Tbale ام 100% میشه ، نه صفحه زوم میشه و قونت ها به هم می خوره . ولی هنوز این روشی که دوستمون گفتن رو امتحان نکردم . ولی حاشیه چه ربطی به صد درصد شدن جدول داره .
shahab_ksh
سه شنبه 08 آبان 1386, 09:25 صبح
من وقتی اون کدو بر می دارم هیچ اتفاقی نمی افته و فقط Tbale ام 100% میشه ، نه صفحه زوم میشه و قونت ها به هم می خوره


مثلا یه کنترل منو داخل صفحه بندازین می بینید که اون کد اولی اثر میزاره رو اندازه فونت



والا نه به محض این که کد رو عوض کردم table از همه طرف چسبید به طرفین




ولی حاشیه چه ربطی به صد درصد شدن جدول داره


میشه کدتون رو آپلود کنید
m.hamidreza
سه شنبه 08 آبان 1386, 09:39 صبح
این یه استاندارد واسه Xhtml که توسط w3 قبول شده.
شما باید توی تگ body اینرو اضافه کنید

marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0

چه ربطی به margin داره !!!
شما این کد رو تست کن :


<div style="position: absolute; left: 50%; top: 50%; width: 100px; height: 30px; z-index: 1" id="layer1">Salam
</div>


حالا اگه تونستی اینو با table درست کنی بهت جایزه میدم ! :چشمک:
shahab_ksh
سه شنبه 08 آبان 1386, 09:48 صبح
به این شکل مشکل کد برطرف شد

برای کسانیکه که سالیان سال هست که از زبان HTML استفاده می کنند خیلی راحت نیست ، یکی از مواردی که در اولین دقایق استفاده از این زبان XHTML برای من پیش آمد مشخصه Height=100% برای تگ Table است .این مشخصه دیگر در زبان XHTML برای تگ Table قابل نسبت دادن نیست و در صورتیکه این مشخصه را در تگ خود قرار بدهید ویرایشگر مربوطه خطاهائی را به شما در این رابطه نمایش می دهد . اما راه حل چیست ؟
برای حل این مشکل دو راه حل وجود دارد ،البته هیچ کدام از این دو راه حل ، به صورت کامل مشکل را حل نمی کنند.
اولین راه حل استفاده از تگ های Div به جای Table است و دیگری استفاده از همین تگ Table است بهمراه css




<!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>

<style type="text/css">

body , html
{
height:100%;
margin:0px;
}

#MainTable
{
height:100%;
width:100%;
}

#MainCell
{
background-color:gray;
height:90%;
}

#HeaderCell
{
height:20px;
background-color:blue;
}

#FooterCell
{
height:20px;
background-color:red;
}

</style>

</head>
<body>

<table id="MainTable">
<tr><td id="HeaderCell"></td></tr>
<tr><td id="MainCell"></td></tr>
<tr><td id="FooterCell"></td></tr>
</table>

</body>
</html>






اما باز هم مشکل در نرم افزار های طراحی مثل Microsoft Web Expression یا VS بر طرف نشد و 100% نشد !
m.hamidreza
سه شنبه 08 آبان 1386, 10:16 صبح
کد من تو VS و Expression مشکلی نداره !
abolfazl585
سه شنبه 08 آبان 1386, 10:23 صبح
عزیزم، اصولا وقتی به یک المنتی، اندازه ای بصورت درصدی داده بشه معنی آن این نیست که درصدی از صفحه باشد.
شما وقتی به یک جدول 100% ارتفاع می دهید، این 100% در آن دقیقا اعمال میشود ولی 100% فضایی که این جدول در داخل المنت دیگری هست را به خود اختصاص می دهد.
یعنی نمیتواند از فضای اختصاصی المنت پدر فراتر رود.

همانطور که خودتان هم در Styleتون اشاره کردید، شما ابتدا خاصیت Body را که پدر در نظر گرفته می شود را 100% کردید و سپی جدول را.
shahab_ksh
سه شنبه 08 آبان 1386, 10:31 صبح
کد من تو VS و Expression مشکلی نداره !


اگه ممکنه صفحتون رو آپلود کنید یعنی شما در ادیتور ها بصورت 100% میبینید ؟
m.hamidreza
سه شنبه 08 آبان 1386, 13:21 عصر
اگه ممکنه صفحتون رو آپلود کنید یعنی شما در ادیتور ها بصورت 100% میبینید ؟

اون کد قسمتی از کدم بود که قبلا Upload کردم مشکلی نداشته ، شما run کردیش دیدی ؟
به کارت اومد ؟
shahab_ksh
سه شنبه 08 آبان 1386, 16:17 عصر
احتمالا این قسمت از کد شما با من فرق داره



<!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">


سایت مایکروسافت رو هم اگه نگاه کنید اونجاهایی که وسط محتوی زیاد نداره آخر صفحاتش به ته نچسپیده مثل

http://www.live.com/
SalarSoft
سه شنبه 08 آبان 1386, 18:38 عصر
مشکل شما با انتخاب حالت رندر صفحه در مرورگر است.
DOCTYPE که یک استاندارد WC3 است نشان میدهد که صفحه شما دارای چه ویژگی هایی ، دارای چه تگ هایی است و نحوه نمایش آنها رو مشخص میکند.

راه حل شما کد زیر است و برای تمامی مرورگر ها درست کار میکنه:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Test DocType</title></head>
<body>
<table cellspacing="1" border="1" style="width: 569px; height: 100%">
<tr>
<td style="table-layout: auto; top: inherit">
&nbsp;</td>
</tr>
</table>
</body>
</html>



شما رو به خوندن بخش "حالت های رندر صفحه در مرورگرها (DOCTYPE)" مقاله زیر دعوت می کنم:

طراحی سایت به صورت Cross Browser (http://barnamenevis.org/forum/showthread.php?t=54639)

.
shahab_ksh
سه شنبه 08 آبان 1386, 21:02 عصر
خوندم ممنون
اما چرا دات نت پیشفرض رو


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

قرار داده این کد hight برای حد اکثر رو ساپورت نمیکنه !

من راه حلی پیدا کردم برای حل مشکل حد اکثر کردن یه جدول در صفحه اما با تگ Form در مستر پیج مشکل پیدا کرد در Firefox یعنی وجود تگ Form در Firefox باعت میشه اون راه حلی که گفتم بی اثر میکنه و ارتفاع 100 % نمیشه کلا

اگه از تگ


"-//W3C//DTD HTML 4.01 Transitional//EN


هم استفاده کنم کنترل هایی در صفحه دارم که ظاهرشون به هم میخوره راه حل چیه؟


آیا شما میتونید در مستر پیج بهمراه تگ


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

یه جدول در صفحه قرار بدیم با سه سطر که سطر اول فقط 20 px سطر سوم 20 px و در نهایت سطر دوم یعنی وسط بقیه صفحه رو بگیره و ContentPlaceHolder درون سطر دوم قرار بگیره !
هم در IE و هم در Firefox بی مشکل باشه !
SalarSoft
چهارشنبه 09 آبان 1386, 17:46 عصر
شما باید طراحی کلی سایتتون روبا یکی از استاندارها از ابتدا هماهنگ کنید تا چنی مشکلی برایتون پیش نیاد.


اما چرا دات نت پیشفرض رو
قرار داده این کد hight برای حد اکثر رو ساپورت نمیکنه !
چون این حالت استاندارد است( Standards mode ) و سایتها باید به اون سمت حرکت کنند و معماری آنها بر اون اساس باشه. گرچه هنوز هم از حالات قدیمی پشتیبانی میشه.
m.hamidreza
چهارشنبه 09 آبان 1386, 18:08 عصر
خوندم ممنون
اما چرا دات نت پیشفرض رو


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
قرار داده این کد hight برای حد اکثر رو ساپورت نمیکنه !

DocType پیش فرض صفحات server-side همونه !

http://www.w3.org/QA/2002/04/Web-Quality
miladr
چهارشنبه 09 آبان 1386, 22:38 عصر
اگه height رو تو style 100% کنی درست نمیشه؟!
iekrang
پنج شنبه 10 آبان 1386, 10:57 صبح
راه حل:
بخش اول (http://www.blog.mehdivk.net/PermaLink,guid,264e319e-f8a7-4820-96b3-b020184653e9.aspx)
بخش دوم (http://www.blog.mehdivk.net/PermaLink,guid,c2862688-aa8f-4cf5-a44d-8bfe7a5a1b70.aspx)
shahab_ksh
دوشنبه 14 آبان 1386, 19:26 عصر
صفحه قبل رو اگه ببینید قبلا این روشها رو تست کردم اما با تگ Form مستر پیج مشکل داره
Mahdi_20
چهارشنبه 28 آذر 1386, 16:15 عصر
اینو ببنید؟!
http://barnamenevis.org/forum/showthread.php?t=88500
shahab_ksh
چهارشنبه 28 آذر 1386, 22:06 عصر
Didam ama baz ham migam


صفحه قبل رو اگه ببینید قبلا این روشها رو تست کردم اما با تگ Form مستر پیج مشکل داره