ورود

~~Eshpilen~~ · 23-09-1394، 10:12 ق.ظ

دیگه خودمم از جدول خسته شدم! واقعا شلوغ و پر دردسره.
اینه که گفتم بذار بجای جدول از div و float و اینا استفاده کنیم ببینیم چی میشه.

الان این نمونه رو نگاه کنید.

من میخوام اون دکمه send از نظر طراز در سطر بیاد بین دوتا چکباکس واقع بشه.
میتونم این کار رو با اضافه کردن margin-top انجام بدم، ولی این روش فیکس شده است و با توجه به اندازهء عناصر و حذف و اضافه شدن اونا تغییر نمیکنه.
یه روشی که بصورت خودکار این کار رو انجام بده در هر شرایطی دکمه رو بیاره دقیقا وسط Div1 طراز کنه چطوری میشه یا نمیشه؟

***ADMIN*** · 23-09-1394، 10:46 ق.ظ

<div class="vcenter">
    <div class="w80">
         <p><label>...<input type="checkbox" /></label></p>
         <p><label>...<input type="checkbox" /></label></p>
    </div>
    <div class="w20">
        <input type="submit" value="Send" />
    </div>
</div>

.vcenter {
    vertical-align: middle;
}
.w20 {
    display:inline-block;
    width:20%;
}
.w80 {
    display:inline-block;
    width:80%;
}

~~Eshpilen~~

کار نداد مهندس!
این کد که شما گذاشتی همه رو بصورت عمودی میچینه.
فکر کنم منظور منو متوجه نشدید.
تصویر ضمیمه رو نگاه کن. من فقط میخوام دکمهء send یخورده بیاد پایین تر که دقیقا بین دو تا سطر div1 قرار بگیره.

***ADMIN*** · 23-09-1394، 11:30 ق.ظ

شرمنده یادم رفته بود کلاس vcenter رو باید به خود عنصر بدیم نه به والدش! این کد رو ببینید:

<!doctype html>
<html>
    <head>
        <title>DIV DEMO</title>
        <meta charset="utf-8" />
        <style type="text/css">
            div {
                border: solid 1px #000;
            }
            .vcenter {
                vertical-align:middle;
            }
            .w80 {
                display:inline-block;
                width:70%;
            }
            .w20 {
                display:inline-block;
                width:20%;
            }
        </style>
    </head>
    <body>
    <div>
        <div class="w80 vcenter">
            <p><label>Test <input type="checkbox" /></label></p>
            <p><label>Test <input type="checkbox" /></label></p>
        </div>
        <div class="w20 vcenter">
            <input type="submit" value="Send" />
        </div>
    </div>
    </body>
</html>

~~Eshpilen~~ · 24-09-1394، 12:28 ق.ظ

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

<html>
<head>
<title>SMS server interface</title>
<style>

#container {
    border:1px solid red;
    overflow: auto;
    display: table;
}

#left2rows {
	float:left;
}

#btn {
    display: block;
    vertical-align: middle;
}

#button-wrapper {
    border: 1px solid blue;
    display: table-cell;
    vertical-align: middle;
}

</style>
<script>
</script>
</head>
<body onload='loaded()'>
<table width='100%' height='100%' id=outer_table><tr><td align=center valign=center>
<h3 align=center>SMS server interface</h3>
<form action='' method=post>
<table id=form_area>
<tr><td>Number: <input name=number type=text></td></tr>
<tr><td valign=top>
<table cellpadding=0 cellspacing=0>
<tr valign=top align=center><td rowspan=2 style='padding: 0px; padding-top: 5px'>Message:<br><br><button id=dir_btn onclick='change_dir(this); return false;'>RTL</button></td></tr>
<tr valign=top align=center><td><textarea name=message rows=5 id=message_texta dir=ltr></textarea></td></tr>
</table>
</td></tr>
<tr><td align=center>

<!-- ############################# -->

<div id=container>
<div id=left2rows>
<div style="text-align: right">
Via device built-in SMS app:<input type=checkbox>
<br>Save copy in sent box:<input type=checkbox>
</div>
</div>
<div id=button-wrapper><input type=submit value=Send id=btn></div>
</div>

<!-- ############################# -->

</td></tr>
</table>
</form>
</td></tr></table>
</body>
</html>

ظاهرا این display: table و display: table-cell توی این موارد خیلی به درد میخوره. فکر کنم درواقع اینطوری مرورگر داره از همون الگوریتم و منطق table استفاده میکنه؛ فقط فرقش اینه دیگه کلی تگ مربوط به table رو نمیذاری و کد شلوغ و درهم نمیشه.

bobsilon · 24-09-1394، 03:46 ب.ظ

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style media="screen">
       body {
           background: #4296CE;
       }
       body * {
           box-sizing: border-box;
       }

       .form {
           max-width: 300px;
           background: #B5B663;
           margin: 0 auto;
           padding: 10px;
           border: 4px solid #333;;
       }

       .form .row     { width: 100%; }
       .form .row > * { display: inline-block; }

       .form .row-1 > *      { vertical-align: top; }
       .form .row-1 button   { width: 20%; }
       .form .row-1 textarea { width: 75%; }

       .form .row-2 > *          { vertical-align: middle; }
       .form .row-2 .form-block  { width: 80%; }
   </style>
</head>
<body>
   <form class="form" action="#" method="post">
       <div class="row row-1">
           <button>RTL</button>
           <textarea name="msg-body" rows="6" ></textarea>
       </div>

       <div class="row row-2">
           <div class="form-block">
               <div class="form-group">
                   <input type="checkbox" name="via-device" id="via-device">
                   <label for="via-device">Via device built-in SMS app</label>
               </div>

               <div class="form-group">
                   <input type="checkbox" name="save-copy" id="save-copy">
                   <label for="save-copy">Save copy in sent box</label>
               </div>
           </div> <!-- .form-block -->

           <button type="button" name="button">Send</button>
       </div>
   </form>
</body>
</html>

~~Eshpilen~~ · 24-09-1394، 08:32 ب.ظ

ولی واسه من اینجوری نشون میده (در فایرفاکس 40 تحت ویندوز):

~~Eshpilen~~ · 24-09-1394، 08:34 ب.ظ

جدول رو دست کم گرفتی Big Grin

الان این اگر با جدول بود عمرا در مرورگر بنده و شما اینقدر تفاوت نمیکرد.

bobsilon · 25-09-1394، 08:41 ق.ظ

خوب این نیاز به css reset داره تا فایرفاکس یا هر مرورگر دیگه‏ ای، پیش فرض های خودش رو به صفحه تحمیل نکنه.
تو کروم درست نشون میده، باید گشت و پیدا کرد که چه صفت پیش فرضی تو فایرفاکس باعث میشه تا همچین اتفاقی بیوفته.

اما به هر حال به راحتی میتونید max-width فرم رو برابر 400 کنید. گذشت اون زمونی که از جدول استفاده میشد. Smile

bobsilon · 25-09-1394، 08:58 ق.ظ

پیدا کردم، مشکل اندازه فونت بودش، تو فایرفاکس پیشفرض فونت ها درشت تر از کروم هست. من هم چون اندازه بلاک چک باکس ها رو چون درصدی دادم، فضای بیشتری اشغال میکرد و جایی واسه اون دکمه نمیموند و نهایتاض میرفت زیر چکباکسها.
به جای راه حل قبلی میشه سلکتور * body رو اینطوری نوشت:

body * {
    box-sizing: border-box;
    font-size: 11px;
}

کار دیگه ای هم میشه کرد، width بلاک چک باکس ها رو کمتر کرد تا جا واسه دکمه هم بمونه، مثلاً:

.form .row-2 .form-block  { width: 70%; }

~~Eshpilen~~

اینم جواب نداد!

نقل قول:گذشت اون زمونی که از جدول استفاده میشد

ولی ظاهرا Layout جدولی از بعضی جهات ثبات بیشتری داره.

اگر بخوایم Layout کاملا بدون جدول درست کنیم، لازمه توی تمام مرورگرهای اصلی تستش کنیم. تازه اونم در چندین نسخه از هر کدام! خب بنظرم این کار راحتی نیست و شاید بعضی جاها به دلایلی نشه یا صرف نکنه. تازه با کوچکترین تغییر پیشبینی نشده در مرورگر یا تنظیمات و پیکربندی سیستم و مرورگر کاربر ممکنه Layout بهم بریزه.

خوبی جدول اینه میشه با ضریب اطمینان بالایی مطمئن بود در تمام مرورگرهای اصلی چه گذشته و چه آینده، همونطور که پیشبینی شده نمایش داده میشه.

بنظر من کلا نباید روی این چیزا زیاد تعصب و اصرار داشت. اصلا چه اشکالی داره از ترکیبی از جدول و CSS با هم استفاده کنیم! مثل همون کاری که من کردم. چندتا جدول بیرون گذاشتم ولی دیدم اگر بازم اضافه کنم دیگه خیلی درهم برهم و شلوغ میشه، پس یه قسمت جدید محدود رو رفتم با CSS درست کنم.

بنظر من اینا همه ابزار هستن و هر ابزار رو باید جایی استفاده کرد که بهتر کار میده کار رو راحتتر و سریعتر میکنه. گرچه ابزارش قدیمی باشه ممکنه بعضی جاها هنوزم بهترین گزینه باشه. ضمنا بحث HTML هست که بهرصورت خیلی چیز مهمی نیست که بگیم حالا زیاد استاندارد کار نکردیم چی میشه! آسمون که به زمین نمیاد!! مثلا برنامهء جاوا انترپرایز نیست که Big Grin

شخصا تاحالا کم پیش نیامده سایتهایی دیدم که مقداری از نظر Layout درهم ریخته بودن حتی بنوعی که گاهی کار کردن با اونا خیلی سخت میشده یا حتی غیرممکن. سایتهای همچین درپیتی هم نبودن، گاهی حتی سایتهای نسبتا معروف بودن. منظورم اینه هرچیزی که جدیدتره مدرن تره استانداردتره لزوما همه چیزش بهتر و مناسب نیست. بعضی چیزهای جدید نقاط ضعف و مشکلات خودشون رو هم دارن. از AJAX بگیر تا همین Tableless design.

البته نمیدونم چرا از display: table و display: table-cell کمک نگرفتید. با اینا شاید مشکل حل میشد.

bobsilon

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

نقل قول:Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute role="presentation" for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.

~~Eshpilen~~ · 28-09-1394، 10:09 ق.ظ

ناراحت نباش بابا نظر خودم رو کلی گفتم واسه هرکسی که میخونه Big Grin

آخه کلا اکثریت ملت اینطوری هستن که یه استاندارد یا فناوری جدیدی میاد فکر میکنن به هر قیمتی باید همه چیز رو ببرن تحت اون و استاندارد و فناوریهای قدیمی دیگه شدن اخ!
یادمه یه زمانی مثلا یه شرکت رفته بودم استخدام بشم، اون زمانها که دات نت نسبتا تازه اومده بودن، بعد توی اون شرکته داشتن کار میکردن یه برنامه رو که قبلا با سی++ نوشته بودن ببرن تحت دات نت!! من گفتم بابا آخه واسه چی مگه چه ضرورتی داره تازه سی++ که پرفورمنس بهتری داره!
بنظر من بعضی وقتا حتی فناوریهای قدیمی بهتر کار میکنن به دلایلی.
خودم اخیرا مثلا ایمیل یاهو که داشتم سویچ کردم به حالت قدیمی کلاسیکش، چون حالت ایجکس سنگین بود لود و عملیاتش اکثرا کند و دردسرساز میشد. جالب اینکه وقتی سویچ کردم به کلاسیک متوجه شدم که سرعت و راحتی کار باهاش واقعا بیشتر هم هست. حالا شاید روی رایانه های قوی بروز و اینترنت با سرعت خوب، ایجکسش بهتر باشه، ولی هنوزم بخش عمده ای از رایانه ها و اینترنت مردم جهان از نوع متوسط و نسبتا ضعیف هست.
حالا ملت خیلیا اصرار دارن همه چیز رو بکنن ایجکس! اونم وقتی اونقدری مایه نمیذارن نمیتونن یه چیزی بی نقص درست کنن.
یه فرضی هم که بعضیا توی برنامه نویسی میذارن اینکه مثلا سیستم خودشون قوی هست و برنامه رو توی همون توسعه و تست میکنن و میدن بیرون، بدون اینکه روی سیستمهای ضعیف تر و حداقل متوسط هم یه تستی چیزی بزنن و تطبیق بدن اگر لازم باشه.
همینطور حتی دربارهء چیزهایی مثل Tableless design هم بنظر من لزوما نباید اصرار باشه. میشه جدول رو با روش CSS هم ترکیب کرد.
تازه توی همین منبعی که شما گذاشتی گفته اگر این کار رو کردید یه role="presentation" بذارید واسه جدول؛ یعنی نمیگه نه حتما هیچوقت نباید استفاده کرد هیچکس حق نداره استفاده کنه.
ضمنا به این مثال ها ماجرای XHTML رو هم باید اضافه کنیم که یک استانداردی بود که در عمل روشن شد تصمیم درستی نبوده، و شکست خورد: http://hamidreza-mz.tk/?p=958
بنظر من بهرحال آدم نباید در برنامه نویسی زیاد به خودش سخت بگیره بی دلیل. چه توی مسائلی مثل رعایت استاندارد یا استفاده از آخرین فناوری های روز باشه و چه در مسائلی مثل بهینه سازی که قبلا سرش بحث زیاد کردیم.
کلا جوگیری و افراط توی این مسائل پدیدهء متداولی هست.
حالا یجایی هست مثلا شرکت و برنامهء بروزی میخواد باشه، کار تیمی هست، باید استاندارد باشه، این مسائل مهمتر میشن.

bobsilon

نه بابا چه ناراحتی، فقط متوحه نشدم مخاطبت کلی هست.
یک راه جدیدتر هم هست و اون استفاده از flexbox هستش. یه تنه همه جور layout رو حریفه، اما مشکلی که داره اینه که مرورگرهای جدید ساپورتش میکنن.
CSS3 Flexbox Properties Demo

ورود
نام‌کاربری
رمزعبور:	فراموشی رمزعبور
	مرا به‌خاطر بسپار.