چند تا سوال ریز درمورد تگ div

شروع موضوع توسط NabiKAZ ‏4 جولای 2006 در انجمن زبان HTML

  1. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    حتما تست کردم که میگم.
    مال شما چون ستون ها کوتاه بودند و چیزی توشون نوشته نشده بود کار میکرد ولی این کد رو ببینید:
    HTML:

     <!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=windows-1256" />
    <title>Untitled 2</title>
    <style type="text/css">
    .c1, .c2 {
        width:200px;
        height:100%;  
        float:left;
        background:#E0EFFC;
    }
    .c2 {
        background:#FFCCFF;
    }
    </style>
    </head>
    <body>
    <div class="c1">dsfsd fsdfsdfs<br>dsfsd fsdfsdfs<br>dsfsd fsdfsdfs<br>dsfsd fsdfsdfs<br></div>
    <div class="c2">dsfsd fsdfsdfs<br></div>
    </body>

    </html>
     
    تشکر
     
    نوشته شده توسط NabiKAZ در ‏26 نوامبر 2006
  2. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    سلام این آموزش لز طریق margin منفی هست.
    مطمینن مشکلت حل می شه:
    HTML:
      <!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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>
    <style type="text/css">

    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }

    b{font-size: 110%;}
    em{color: red;}

    #maincontainer{
    width: 840px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    }

    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    }

    #topsection h1{
    margin: 0;
    padding-top: 15px;
    }

    #contentwrapper{
    float: left;
    width: 100%;
    }

    #contentcolumn{
    margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    }

    #leftcolumn{
    float: left;
    width: 180px; /*Width of left column in pixel*/
    margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
    background: #C8FC98;
    }

    #rightcolumn{
    float: left;
    width: 190px; /*Width of right column*/
    margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
    background: #FDE95E;
    }

    #footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }

    #footer a{
    color: #FFFF80;
    }

    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }

    </style>

    <script type="text/javascript">
    /*** Temporary text filler function. Remove when deploying template. ***/
    var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*3)]+" ")
    }
    </script>

    </head>
    <body>
    <div id="maincontainer">

    <div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>

    <div id="contentwrapper">
    <div id="contentcolumn">
    <div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div>
    </div>
    </div>

    <div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div>

    </div>

    <div id="rightcolumn">
    <div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>
    </div>

    <div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

    </div>
    </body>
    </html>
     
     
    نوشته شده توسط echessdesign در ‏1 دسامبر 2006
  3. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
     
    نوشته شده توسط echessdesign در ‏1 دسامبر 2006
  4. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    سلام
    از پاسخت ممنونم ولي به جواب نرسيدم ،
    من كد شما رو در اينترنت اكسپلورر باز كردم ولي ارتفاع دو ستون راست و چپ يكي نبود !!!

    نبي
     
    نوشته شده توسط NabiKAZ در ‏2 دسامبر 2006
  5. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    خب! یادش بخیر اینجا !
    تاپیک خوبی شده بود...گرچه هنوز هم سوالات بی جواب درش به چشم میخوره.... شاید بشه دوباره زندش کرد!

    آخرین پست مربوط به 11 آذر 1385 بود.
    اکنون 21 شهریور 1386 است.

    ××××××××××××××××××××

    یه سوال داشتم گفتم همینجا بگم.

    به این کد یه نگاهی بندازید و در IE6 و FireFox مقایسه کنید:
    HTML:

    <div style="width:700px; height:100px; background:#ccc;">
        <h1 style="font:10pt tahoma; margin:30px; background:#eee;">salam</h1>
    </div>
     
    یه ایراداتی در نحوه نمایش در FireFox به چشم میخوره.

    حالا به این کد نگاه کنید:
    HTML:

    <div style="width:700px; height:100px; background:#ccc; border:1px solid #fff;">
        <h1 style="font:10pt tahoma; margin:30px; background:#eee;">salam</h1>
    </div>
     
    میبینید که در IE6 و FireFox یکسان نمایش داده میشه !

    وقتی دو کد رو مقایسه کنید میبینید که تفاوت تنها در border:1px solid #fff; است.

    سوال اینجاست ، مگر این کد چیکار میکنه که در نحوه نمایش در FireFox تا این حد تاثیر گذاره ؟!
    حالا اگر نخوایم از border استفاده کنیم تکلیف چیه ؟!

    تشکر
    نبی
     
    آخرین ویرایش: ‏12 سپتامبر 2007
    نوشته شده توسط NabiKAZ در ‏12 سپتامبر 2007
  6. mossy

    mossy Member

    ارسال‌ها:
    140
    تشکر شده:
    21
    امتیاز دستاورد:
    16
    border: none;​
    بايد درست بشه بدون اينكه حاشيه رو نمايش بده اما اين هم اصولش نيست چرا كه بايستي حالت شناور بودن يك ديويژن حتما مشخص باشه . ربطي به المنتهاي استفاده شده نداره.
    دليل اينه كه هر استايل فرمت خودش رو داره و بايستي مقدارهاش مشخص باشه و اگر مشخص نباشه ممكنه در برخي مرورگرها طور ديگري عمل كنه كه كنترل شده نيست.
     
    نوشته شده توسط mossy در ‏12 سپتامبر 2007
    NabiKAZ از این پست تشکر کرده است.
  7. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    نه نمیشه
    قبلاً امتحانش کرده بودم ، البته border:0 رو . در هر حال هیچکدومش مشکل رو حل نکرد.

    تشکر
     
    نوشته شده توسط NabiKAZ در ‏12 سپتامبر 2007
  8. tabib_m

    tabib_m Member

    ارسال‌ها:
    689
    تشکر شده:
    268
    امتیاز دستاورد:
    16
    بهش که ور رفتم، فهمیدم که Firefox دنبال یک مبدأی برای شروع margin: 30px میگرده.
    در صورتی که توی div مربوطه هیچ عبارتی وجود نداشته باشه و برای div هم هیچ border ی (مرزی) تعیین نشده باشه، فایرفاکس هیچ مبدأی برای ایجاد فاصله پیدا نمیکنه! که فکر میکنم این یک ایراد از طرف فایرفاکس باشه (جستجو نکردم، رو حساب فکر میگم!)
    البته راه حل که داره، ولی خوب ایرادی هست که بررسیش خوبه :)
    برای مثال میشه border رو transparent داد.

    موفق باشید.
     
    نوشته شده توسط tabib_m در ‏12 سپتامبر 2007
    NabiKAZ از این پست تشکر کرده است.
  9. amirabbas_p30magazine

    amirabbas_p30magazine Member

    ارسال‌ها:
    700
    تشکر شده:
    410
    امتیاز دستاورد:
    16
    اپرا هم مثل فایر فاکس نشونش میده
    فقط IE اون margin رو به حساب میاره. من هر چی گشتم نتونستم چیزی پیدا کنم.
    من این مشکل رو تو سایت سایت پوینت مطرح کردم. شاید اونجا کسی جواب بده
     
    نوشته شده توسط amirabbas_p30magazine در ‏12 سپتامبر 2007
    NabiKAZ از این پست تشکر کرده است.
  10. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    درود بر شما
    به نظر من IE کد ها را به اشتباه تفسیر می کنه، به صورت عادی، تفسیر درست کد ها همونی هست که OP, FF نشون میدهند.
    اما اینجا خصیصه Border چه تاثیری داره برای من جای تعجب داره....
     
    نوشته شده توسط echessdesign در ‏12 سپتامبر 2007
    NabiKAZ از این پست تشکر کرده است.
  11. amirabbas_p30magazine

    amirabbas_p30magazine Member

    ارسال‌ها:
    700
    تشکر شده:
    410
    امتیاز دستاورد:
    16
    خیلی جالب شد. تو CSS ما margin collapsing داریم ولی فکر نمی کردم margin collapsing روی عناصری که داخل هم قرار گرفته باشند هم عمل کنه. اینجا هم margin collapsing اتفاق میافته. این دو تا مقاله خیلی میتونه کمک کنه

    http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php
    و
    http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/

    برای رفع مشکل باید به اون div یک پیکسل padding اضافه کرد که margin های دو عنصر (0 برای div و 30 برای h1) با هم تماس نداشته باشند. اون border هم دقیقا همین کار رو می کرد و اجازه تماس margin ها با هم رو نمی داد تا margin collapse اتفاق بیافته. کد رو اگر اینطوری کنیم مشکل حل میشه

    کد (Text):
    <div style="width:700px; height:100px; background:#ccc; padding: 1px 0;">
        <h1 style="font:10pt tahoma; margin:29px 30px; background:#eee;">salam</h1>
    </div>
    دلیل اینکه IE صفحه رو به شکل دلخواه ما نشون میده برای اینه که این خودش یه باگ توی IE هستش. IE وقتی یه عنصری HasLayout داشته باشه ، margin اون عنصر collapse نمیشه. وقتی شما به یه عنصری width میدی اون عنصر از دید IE دارای haslayout میشه. حالا شما اگر اون width رو حذف کنی توی IE هم margin ها جمع میشن
     
    نوشته شده توسط amirabbas_p30magazine در ‏12 سپتامبر 2007
    echessdesign، NabiKAZ و tabib_m از این ارسال تشکر کرده اند.
  12. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    خب! میبینم که ذهن همه اساتید رو به خودش مشغول کرده ، اصولاً من توی پیدا کردن اینجور ایرادات ریز و باگ های عجیب و غریب تبحر خاصی دارم :-D قبلاً یه اشکال عجیب توی اکسز پیدا کرده بودم که همه بعد از کلی تعجب اعتراف کردند باگ مایکروسافته. یا در مورد یکی از کمپوننت های vb ، ...
    خب خود شیرینی بسه ;-)


    طبیب جان border:1px transparent جواب نمیده ، اما border:1px solid #fff جواب میده ، که میشه رنگ حاشیه رو همرنگ زمینه انتخاب کرد، ولی فضای 1 پیکسلی که اشغال میکنه خیلی ستمه !!!

    ولی خودم یه راه باحال پیدا کردم ولی خداییش بعد از اینکه دیدم جواب داد ، خودم کلی خندم گرفت ! :))
    HTML:

    <div style="width:700px; height:100px; background:#ccc;"><span style="font-size:0;">&nbsp;</span>
        <div style="font:10pt tahoma; margin:30px; background:#eee;">salam</div>
    </div>
     
    شاید راه بهتری هم باشه.

    تشکر
    نبی
     
    نوشته شده توسط NabiKAZ در ‏12 سپتامبر 2007
  13. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    ببخشید پست آخر آقای امیرعباس رو بعد از اینکه اون پست بالایی رو نوشتم دیدم !
    روش ایشون هم خوب بود. ولی حداقل مزیتی که روش من داشت این بود که نیازی نیست خودتون رو درگیر جمع و تفریق margin و padding کنید.
    اون مقالات هم با اینکه فقط عکساشو دیدم به نظر جالب می اومدند. مخصوصاً از عکس اون کولیس دیجیتالیه خیلی خوشم اومد :D

    تشکرات
     
    نوشته شده توسط NabiKAZ در ‏12 سپتامبر 2007
  14. amirabbas_p30magazine

    amirabbas_p30magazine Member

    ارسال‌ها:
    700
    تشکر شده:
    410
    امتیاز دستاورد:
    16
    هم اون روشی که من گفتم و هم اون روشی که شما پیدا کردی هر جفتش این کار رو میکنه که اجازه نمیده مارجین دو تا عنصر با هم تماس داشته باشند. ایرادی که اضافه کردن تگ span هست اینه که این تگ span دیگه semantic نیست. شما کدی به صفحه اضافه می کنید که فقط برای نمایش ظاهر صفحه هست در صورتی که بر اساس طراحی استاندارد باید content از presentation جدا باشه.

    من یه بار یه یک ساعتی دنبال یه خط کش خوب مثل اون گشتم ولی چیزی پیدا نکردم. امروز که این تاپیک رو دیدم برای من یه تیر و دو نشون بود. هم فهمیدم margin collapse برای عناصر nested هم کار میکنه و دومی هم پیدا کردن همون کولیسه بود
    هم خودش رو دانلود کردم و هم کرکش رو پیدا کردم

    خودش:
    کد (Text):
    http://www.iconico.com/caliper
    شماره سریالش:
    کد (Text):

    8289-1412-2942
    8138-4413-7426
    و یه چیز به درد بخور دیگه هم داره که حین استفاده از این کولیس به درد می خوره اون هم ذره بینه

    این هم لینک دانلود ذره بینش که مجانی هم هست
    کد (Text):
    http://www.iconico.com/magnifier/
     
    آخرین ویرایش: ‏12 سپتامبر 2007
    نوشته شده توسط amirabbas_p30magazine در ‏12 سپتامبر 2007
    NabiKAZ، mossy، echessdesign و یک نفر دیگر از این ارسال تشکر کرده اند.
  15. mossy

    mossy Member

    ارسال‌ها:
    140
    تشکر شده:
    21
    امتیاز دستاورد:
    16
    اين كاليپر چه باحاله!
    ممنون از اينكه معرفي كردي.
    منم با اسپن و استايل داخل صفحه موافق نيستم!
    پرزنت هميشه بايد از استايل جدا باشه كه به اميد خدا و لطف رزمندگان وب 2 انشاء الله اچ تي ام ال در آينده اي نه چندان دور ديگه از اين مدل غلط چيدمان در صفحات وب پشتيباني نخواهد كرد.
    پس بكوشيد در تحصيل علوم آينده كه آخرت نزديك است:oops:
    موفق باشيد
     
    نوشته شده توسط mossy در ‏13 سپتامبر 2007
    NabiKAZ از این پست تشکر کرده است.
  16. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    سلام ؛

    در مورد این کد:

    HTML:

    <!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-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>title</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
        list-style-type: none;
    }
    </style>
    </head>

    <body>

    <ul>
        <li>title</li>
        <li>
            <ul>
                <li>item1</li>
                <li>item2</li>
            </ul>
        </li>
    </ul>

    </body>

    </html>
     
    آیا اینجا هم margin collapsing اتفاق می افتد؟
    و یا یک bug IE است؟

    اگر نخواهیم کلاس اختصاصی برای تگها تعریف کنیم راه حل چیست؟

    متشکرم
    نبی
     
    نوشته شده توسط NabiKAZ در ‏18 اکتبر 2007

به اشتراک بگذارید