/
  • مشکل استفاده از float

  • ارسال پاسخ   امتیاز موضوع:
    • 1 رأی - میانگین امیتازات: 2
    • 1
    • 2
    • 3
    • 4
    • 5

    حالت موضوعی | حالت خطی مشکل استفاده از float
    نویسنده پیام
    php آفلاین
    hossein
    ****

    ارسال‌ها: 629
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #1
    مشکل استفاده از float
    یه موضوع دیگه در مورد float کردن یک شیء یا یک تگ مثل div هست .

    شاید تا حلا از این خاصیت css زیاد استفاده کرده باشین ولی من میخوام در مورد این خاصیت یه نکته مهم بگم .

    float کردن یک عنصر ان را از جریان کلی سند خارج و اگر بعد از ان یک عنصر block-level باشد ان نیز عنصر شناور شده را نادیده میگیرد .

    یه مثال میزنم تا با امتحان اون متوجه جریان بشین .
    کد:
    <style>
       #number1{
          width:800px;
          height:200px;
          border:1px solid #FF0000;
          float:left;
       }
       #number2{
      
          width:400px;
          height:200px;
          border:2px solid #0000FF;
      
      
       }
    </style>
    </head>

    <body>
       <div id="number1">div 1 with float=left</div>
      
       <div id="number2">div 2 without float</div>
    </body>

    خوب با اجرای این کد می بینید که دو تا div روی هم می افتن و حلا راه حل چیه .

    بعد از استفاده از float بایداز خاصیت clear استفاده کرد تا محدوده ی شیء شناور مشخص بشه .

    میشه این کار رو به صورت زیر انجام داد

    کد:
    <style>
       #number1{
          width:800px;
          height:200px;
          border:1px solid #FF0000;
          float:left;
       }
       #number2{
      
          width:400px;
          height:200px;
          border:2px solid #0000FF;
      
      
       }
    </style>
    </head>

    <body>
       <div id="number1">div 1 with float=left</div>
       <div style="clear:left"></div>
       <div id="number2">div 2 without float</div>
    </body>
    __________________________________________________________________________
    ۱۳۸۷ بهمن ۲۷ ۰۲:۱۴ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : Alimokhlesi amir.s
    molana آفلاین
    چالیست - chalist
    *******

    ارسال‌ها: 1,772
    تاریخ عضویت: ۱۳۸۷ آذر ۳۰
    اعتبار: 60
    تشکرها : 1644
    ( 1550 تشکر در 1015 ارسال )
    ارسال: #2
    RE: مشکل استفاده از float
    یه کار دیگه هم می شه کرد
    اگه به شماره 2 خاصیت Float:left رو هم اضافه کنی باز این اتفاق نمی افته.

    که البته این بستگی به اندازه شماره 1 داره.

    در کل اون کاری که شما می گین بهتره و مطمئن تر
    سپاس
    __________________________________________________________________________
    همه جوره اش رو داریم ظاهرن
    ۱۳۸۷ بهمن ۲۷ ۰۳:۵۰ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط :
    php آفلاین
    hossein
    ****

    ارسال‌ها: 629
    تاریخ عضویت: ۱۳۸۷ دي ۴
    اعتبار: 13
    تشکرها : 467
    ( 798 تشکر در 277 ارسال )
    ارسال: #3
    RE: مشکل استفاده از float
    حق با شماست ولی با اینکار ممکنه از وسط margin بخوره .

    در کل بستگی به شکلی داره که در نظر دارین به وجود بیارین .

    ولی میشه هر دو راه رو جایگذین هم کرد .
    __________________________________________________________________________
    (آخرین ویرایش در این ارسال: ۱۳۸۷ بهمن ۲۷ ۰۸:۴۵ عصر، توسط php.)
    ۱۳۸۷ بهمن ۲۷ ۰۸:۴۱ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط :
    molana آفلاین
    چالیست - chalist
    *******

    ارسال‌ها: 1,772
    تاریخ عضویت: ۱۳۸۷ آذر ۳۰
    اعتبار: 60
    تشکرها : 1644
    ( 1550 تشکر در 1015 ارسال )
    ارسال: #4
    RE: مشکل استفاده از float
    چرا opera, FF, chrome اینو درست نمایش می دن ولی IE گند می زنه؟؟؟؟
    چی کار کنم که درست بشه؟

    کد:
    <!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>Untitled Document</title>
    <style>
    @charset "utf-8";
    /* CSS Document */

    body
    {
        font-family:tahoma, arial;
        font-size:11px;
        font-style:normal;
        font-weight:normal;
        color:#003366;
        margin:0px;
        background-color:#e9eef7;
        
        
    }


    #leftmenu
    {
        width:180px;
        float:left;
        margin:10px;
    }

    #rightmenu
    {
        width:180px;
        float:right;
        margin:10px;
    }
    #bodyart
    {
        float:left;
        width:540px;
        margin-top:10px;
        border:1px #000000 solid;
        
    }

    div
    {
        border:1px solid #000000;
    }
    </style>
    </head>

    <body>
    <table width="952" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td scope="col">
        <div id="leftmenu">left</div>
        <div id="bodyart">asd</div>
        <div id="rightmenu">right</div>
        </td>
      </tr>
    </table>

    </body>
    </html>

    درست شد
    فهمیدم مشکل از کجا بود
    از اون xmlns که در واقع تعیین می کنه که html شما xhtml باشه
    اونو که حذف کردم تقریبا همشون یکی شدن.
    دی
    __________________________________________________________________________
    همه جوره اش رو داریم ظاهرن
    (آخرین ویرایش در این ارسال: ۱۳۸۷ بهمن ۲۹ ۰۳:۳۴ عصر، توسط molana.)
    ۱۳۸۷ بهمن ۲۹ ۰۳:۲۲ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط :
    « قدیمی تر | تازه‌ تر »

    ارسال پاسخ
    پرش به انجمن:


    کاربرانِ درحال بازدید از این موضوع: 1 مهمان
    IranPHP.org | تماس با ما | بازگشت به بالا | بازگشت به محتوا | بایگانی | پیوند سایتی RSS