روش های هک کردن Css

شروع موضوع توسط echessdesign ‏25 آگوست 2006 در انجمن زبان HTML

وضعیت موضوع:
موضوع بسته شده است.
  1. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    از طریق CSS روش هایی وجود دارد که بر خلاف متد های متداول می باشد که تاثیر گزاری بر مرور گر می گزارد. به ترتیب زمان به پردازش و مثال زدن در باره آن ها خواهیم پرداخت.
    در این روش Background صفحه شما در مرورگر IE 6.0 سبز و در بقیه مرور گرها قرمز میباشد که عبارتند از: Netscape 7.2, Opera 9.0, FireFox 2.0
    HTML:
     <style type="text/css">
    body {background: red; * background: green; }
    </style>
    جالب اینجاست که در خود نرم افزار FrontPage 2003 , Background صفحه قرمز هست!
    لطفا با نظرات ارزنده خود مارا در جهت کیفیت مقالات بهتر یاری فرمایید.

    منبع: تارنمای پارسیان
     
    نوشته شده توسط echessdesign در ‏25 آگوست 2006
    paysokhan، imsiso، sulduz و 25 نفر دیگر از این ارسال تشکر کرده اند.
  2. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    بسیاری از طراحان CSS از تنظیماتی در کدهایشان بهره می گیرند که CSS Hack نام دارد. در واقع CSS Hack راهی است برای اینکه برخی از مرورگرها را مجبور کنیم تا کدهای css معینی را نادیده بگیرند. ما این کا را با قرار دادن کاراکترهای و نشانه های ویژه ای در فایل CSS تعریف می کنیم. برای مثال، یکی از بدترین حالات در هنگام طراحی با CSS، مدل جعبه ایی (Box model) است. IE5 و IE5.5 ویندوز در CSS1 این مدل را با گذاشتن لبه و لایه گذاری (border and padding) درون عرض مشخص شده بجای بیرون، به غلط تفسیر می کنند.

    برای مثال کد زیر را در نظر بگیرید که بر اساس آن در همه مرورگرها برای عنصر header عرضی به پهنای 10em خواهیم داشت بجز IE5 که عرضی به پهنای 5em را بر می گرداند.
    ( IE5 دو مقدار padding و border را در هنگام برآورد طول در هم می آمیزد)
    HTML:
     #header {
      padding: 2em;
      border: 0.5em;
      width: 10em
    }  
    راه حل این مشکل توسط جناب Tantek celik در اینجا حل شده است و باعث شده که وی به خاطر این هک در میان css کاران معروف شود. برای شناسایی مرورگر و ارسال دستور css متناسب با آن از شیوه زیر استفاده می شود:
    HTML:
     #header {
      padding: 2em;
      border: 0.5em;
      width: 15em;
      voice-family: "\"}\"";
      voice-family: inherit;
      width: 10em
    }
     
    نکته مهم در اینجاست که IE5 اولین مفدار برای عرض را بکار خواهد گرفت یعنی همان 15em. دقت کنید ما قصد داشتیم عرضی به پهنای 10em داشته باشیم اما چون در IE5 این مقدار به دلایل ذکر شده در فوق به 5em نزول می یافت مقدار را 15 کردیم تا با 5 تای کاسته شده مقدار مطلوب به دست آید. حال برای آنکه مقدار فوق (همان 15em) در مرورگرهای دیگر در نظر گرفته نشود مقدار عرض را پس از دوخط دستوری فوق برابر 10em در نظر می گیریم. با این کار در هر دو نوع مرورگر ما عرضی به پهنای 10em خواهیم داشت. این تنها یکی از موارد رفع این مشکل بود.
    وجود اینکه CSS Hack از این طریق بسیار ساده و کاراست اما در برخی موارد سبب می شود المان های موجود اعتبار خود را در W3C از دست بدهند. برای این منظور از یک زبان برنامه نویسی مانند PHP برای شناسایی مرورگر و ارسال کدهای CSS متناسب با آن استفاده می شود که حتما در مقالات آینده بدان خواهم پرداخت.
    منبع: alvanweb.com
    نویسنده: تارنمای پارسیان
     
    نوشته شده توسط echessdesign در ‏25 آگوست 2006
    webmasterafkari، mazyar_f، meher و 4 نفر دیگر از این ارسال تشکر کرده اند.
  3. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    روش ساختن Box با موقعیت ثابت در صفحه - Position: fixed

    در این روش ، از طریق CSS ما Box می سازسم که در حالت Position:absolute موقعیت ثابت در صفحه می گیره و با حرکت ScrollBar موقعیت او عوض نمیشه!!!! من در Opera 7.6 , Netscape 7.0 , FirefOx 2.0 امتحان کردم جواب داد، متاسفانه در IE 6.0 جواب نداد! باز هم IE متفاوت از دیگران، من IE 7.0 رو PC ندارم، دوستانی که دارند امتحان کنند که کد ها به درساتی انجام میشه یا نه؟ و نتیجه رو اعلام کنند.

    HTML:
     <style type="text/css">
    /* <![CDATA[ */

    body {
        margin: 0;
        padding: 1em 12em 1em 2em;
        }

    #menu {
        position: fixed;
        _position:absolute;
        top: 1em; right: 1em; width: 10em;
        margin: 0;
        background: yellow;
        }

    /* ]]> */
    </style>
     
    ]

    اینم کد BODY
    HTML:
     <h1>Position:fixed Example</h1>

    <p id="menu">This box has 'position:fixed', fixed to 'absolute' in Windows MSIE</p>
    <p><a href="http://download.echessdesign.com/template">Download free web site template 2006</a></p>
    <p><a href="http://download.echessdesign.com">FREE Download mambo, joomla,..</a></p>
    <p><a href="http://javascript.echessdesign.com">FREE Javascript source</a></p>
    <p><a href="http://download.echessdesign.com/template">Download free web site template 2006</a></p>
    <p><a href="http://download.echessdesign.com">FREE Download mambo, joomla,..</a></p>
    <p><a href="http://javascript.echessdesign.com">FREE Javascript source</a></p>
    <p><a href="http://download.echessdesign.com/template">Download free web site template 2006</a></p>
    <p><a href="http://download.echessdesign.com">FREE Download mambo, joomla,..</a></p>
    <p><a href="http://javascript.echessdesign.com">FREE Javascript source</a></p>
    <p><a href="http://download.echessdesign.com/template">Download free web site template 2006</a></p>
    <p><a href="http://download.echessdesign.com">FREE Download mambo, joomla,..</a></p>
    <p><a href="http://javascript.echessdesign.com">FREE Javascript source</a></p>
    <p><a href="http://download.echessdesign.com/template">Download free web site template 2006</a></p>
    <p><a href="http://download.echessdesign.com">FREE Download mambo, joomla,..</a></p>
    <p><a href="http://javascript.echessdesign.com">FREE Javascript source</a></p>
    <p><a href="http://download.echessdesign.com/template">Download free web site template 2006</a></p>
    <p><a href="http://download.echessdesign.com">FREE Download mambo, joomla,..</a></p>
    <p><a href="http://javascript.echessdesign.com">FREE Javascript source</a></p>
    <p><a href="http://download.echessdesign.com/template">Download free web site template 2006</a></p>
    <p><a href="http://download.echessdesign.com">FREE Download mambo, joomla,..</a></p>
    <p><a href="http://javascript.echessdesign.com">FREE Javascript source</a></p>
    <p><a href="http://download.echessdesign.com/template">Download free web site template 2006</a></p>
    <p><a href="http://download.echessdesign.com">FREE Download mambo, joomla,..</a></p>
    <p><a href="http://javascript.echessdesign.com">FREE Javascript source</a></p>
    <p><a href="http://download.echessdesign.com/template">Download free web site template 2006</a></p>
    <p><a href="http://download.echessdesign.com">FREE Download mambo, joomla,..</a></p>
    <p><a href="http://javascript.echessdesign.com">FREE Javascript source</a></p>
    <p><a href="http://download.echessdesign.com/template">Download free web site template 2006</a></p>
    <p><a href="http://download.echessdesign.com">FREE Download mambo, joomla,..</a></p>
    <p><a href="http://javascript.echessdesign.com">FREE Javascript source</a></p>  
    منبع: تارنمای پارسیان
     
    نوشته شده توسط echessdesign در ‏27 آگوست 2006
    masco، michelangelo، toxin و 9 نفر دیگر از این ارسال تشکر کرده اند.
  4. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    ساختن مربع یا مستطیل با گوشه های گرد، البته این آنوزش ارتباطی با هک CSS نداره، اما خوب تایپیکی مناسب تر ندیدم!!!
    در ابتدا ما 2 تا باکس می خوایم. در باکس اول قرار هست ابعاد کوچک تری نسبت به باکس دوم بدیم به علت: این که در باکس دوم یک دایره گنده داریم که می خوایم یه تیکه اون رو از طریق باکس اول جدا کرده و فضای اضافی را حذف کنیم:
    HTML:
     #box1 {position:absolute; top:0; left:0; width:20px; height:20px; color:red; background:transparent; overflow:hidden;}  
    خوب حالا می خوایم باکس دوم رو طراحی کنیم، اما ما یک دایره می خوایم، خوب نظرتون در باره یک نقطه بزگ چیه؟ آره ما یک نقطه بزرگ می سازیم و این باکس را در باکس اول قرار میدیم
    HTML:
      #Box2 {position:absolute; color:red; background:transparent; font: normal 150px arial,verdana,sans-serif; line-height:40px;}
    نظرتون چیه؟ خوب با تغیر موقعیت باکس دوم ، می تونید قسمت های دیگه دایره رو هم جدا کرده و گوشه های دیگر را بسازید. کد کلی: در HEAD
    HTML:
      <style type="text/css">
    #box1 {position:absolute; top:0; left:0; width:20px; height:20px; color:red; background:transparent; overflow:hidden;}
    #Box2 {position:absolute; color:red; background:transparent; font: normal 150px arial,verdana,sans-serif; line-height:40px;}
    </style>
     
    در BODY
    HTML:
      <div id="box1"><div id="box2">&bull;</div></div>
     
    نوشته شده توسط echessdesign در ‏8 سپتامبر 2006
    webmasterafkari، good luck، baviran و 6 نفر دیگر از این ارسال تشکر کرده اند.
  5. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    خوب بریم سر هک کردن CSS . مطمینن شما با فرمان @import آشنایی دارید. برای لینک کردن یک CSS خارجی به صفحه. فرمان کلی به این شکل هست:
    HTML:
     <style type="text/css"> @import url('style.css'); </style>  
    خوب حالا با این روش برای نوشتن پسوند CSS موافقین؟
    HTML:
     <style type="text/css">  @import url('style.%63ss'); </style>  
    این روش در تمام نسخه های IE از 4.0 به بعد در محیط ویندوز و IE در محیط مکینتاژ جواب میده، در Opera, Firefox, Netscape تست شد بدون مشکل. موفق باشید

    منبع: تارنمای پارسیان
     
    آخرین ویرایش: ‏8 سپتامبر 2006
    نوشته شده توسط echessdesign در ‏8 سپتامبر 2006
    o_real_love، Goback، baviran و 5 نفر دیگر از این ارسال تشکر کرده اند.
  6. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    درود بر شما
    شاید بار ها برای شما پیش او مده که به سادگی یک شی رو در جدول، هم از نظر افقی و هم از نظر عمودی در وسط قرار دادید.
    خوب بحث CSS که پیش اومد و قرار شد که ساختار صفحه با CSS طراحی بشه، سوالی پیش اومد مه تراز کردن از نظر افقی با سادگی امکان پزیر بود:
    HTML:
     text-align:center
    اما از نظر عمودی این سوال پیش اومد که چگونه امکان پذیره؟؟؟؟ یعنی واقعا با CSS نمی توان به این مهم دست یافت!!!!!!!
    نه عجله نکنید همیشه یه راه حلی هست، نظرتون در باره CSS Hack چیه؟

    موافق باشید با اصطلاحا حک کردن CSS و یا به نظر خودم ،همون اصطلاح دور زدن CSS به این مهم دست پیدا کنیم، تراز کردن جعبه چه از نظر افقی و چه از نظر عمودی:
    HTML:
     <style type="text/css">
    body, html {
        border:0;
        margin:0;
        padding:0;
    }
    body {
        background:silver;
        text-align:center;
    }

        /* styles for IE 5 Mac */
        #centerwrap {
            background-color:#fcc;
            width:720px;
            height:420px;
            margin:10px auto;
            position:relative;
        }
       
        #content {
            background-color:#fff;
            position:absolute;
            top:10px;
            left:10px;
            height:380px;
            width:670px;
            padding:10px 20px 10px 10px;
            overflow:auto;
        }
        /* commented backslash hack  - invisible to IE 5 \*/
        #centerwrap {
            position:absolute;
            margin:-210px 0 0 -360px;
            left:50%;
            top:50%;
        }
        /* end hack */
        </style>

     
    این رو هم بی زحمت در body کپی کنید:
    HTML:
     <div id="centerwrap">
        <div id="content">
            <h1>وسط قرار گرفتن جعبه از نظر عمودی و افقی</h1>
    <p>www.echessdesign.com</p>
    <div id="labfooter">
        <p><a href="http://www.echessdesign.com">طزاحی وب سایت</a> | <a href="http://javascript.echessdesign.com/">بانک کامل جاوا اسکریپت</a></p>
    </div>
    </div>
    </div>
     
    منبع: تارنمای پارسیان
    سوالی هم دارید بفرمایید تا جواب بدم
     
    نوشته شده توسط echessdesign در ‏27 مارس 2007
    webmasterafkari، baran17862، گلنسا و 17 نفر دیگر از این ارسال تشکر کرده اند.
  7. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    دورد بر دوستان گرامی
    نظرتون چیه اگر آموزش ایندفعه CSS ارتباطی به hack CSS نداشته باشه، فکر کنم این آموزش که در رابطه با گالری عکس هست پر کاربرد برای شما طراحان وب باشه.
    یه نگاهی به گذشته بندازیم، زمانی که با جداول کر می کردیم و قصد داشتیم که زمانی که موس رو بر روی یک عکس که در خانه ای از جدول قرار داشت ببریم ، سپس سایز اون عکس 2 یا چند برابر اندازه معمول خودش بشه، اون وقت تغییر اندازه اون عکس بر اندازه خانه اون جدول تاثیر می گزاشت در نتیجه ما یه تغییری در کل طراحی صفحه خودمون میدیدم. (این حرف من زمانی صدق نمیکرد که اندازه آن خانه از جدول که عکس در آن قرار دارد ، بزرگتر از زمانی باشد که عکس با رفتن موس بر روی آن بزرگ میشد)
    انعطاف ناپذیری جدول همیشه آزار دهنده بود و همیشه جایگزینی رو برای خود می طلبید، خوب رفتیم سر اصل ماجرا، یعنی (CSS) ، قابل توجه استادانی که به استفاده از CSS در طراحی ساختار صفحه اعتقادی ندارند!!!!
    خوب بریم سر توضیح این نوع از گالری:
    موافق باشید در ابتدا CSS رو صفحه و بررسی کنیم:
    در ابتدا یه صفحه طراحی میکنیم که رنگ پس زمینه خاکستری باشه، فاصله ها رو از اطراف صفر می کنیم و موقعیت المانها در صفحه رو در حالت افقی در مرکز قرار میدهیم:
    HTML:
      body {padding:0; margin:0; text-align:center; background:#999;}  
    -------
    خب حالا ما یک جعبه می خوایم که محتویات اون عکس های گالری ماست، خصیصه هایی که برای آن در نظر میگیریم برابر است با فاصله از بالا 10% و محتویات در حالات افقی در مرکز جهت وسط چین شدن عکس ها که همونطور که در مراحل بعدی می بینید این خصیصه در این جعبه فقط باعث تاثیر گزاری در IE میشه:
    HTML:
     #wrp {padding:0; margin:10% auto 0 auto; background:silver; text-align:left;}
    ------
    نظرتون در باره لیست های ترتیبی چیه؟ ما از طریق لیست های ترتیبی ul > li موقعیت قرار گرفتن عکس ها رو مشخص می کنیم, اندازه عکس ها رو بهش میدهیم و موقعیت قرار گرفتن عکس ها را از سمت چپ در نظر میگیریم:
    HTML:
     #wrp li {
        width:100px; height:100px; list-style:none; float:left; margin:5px;
    }
    -----------------------------
    خوب موقعیت لینک های صفحه رو مشخص میکنیم، زیرا عکس ها لینک میشن به هر آدرس دلخواه و با این خصیصه ها که ابعاد لینک ها برابر با با ابعاد عکس و موقعیت برابر با در جریان بودن و جهت انکه تاثیر گزاری بر block-level باشد، مقدار خصیصه display رو برابر با block قرار میدیم:
    HTML:
     #wrp a {position:absolute; width:100px; height:100px; float:left; display:block;}
    -----------------
    سایز اندازه عکس های لینک شده رو میدهیم:
    HTML:
     #wrp a img {border:0; width:100px; height:100px;}
    -------------------------------
    خب زمانی که موس یر روی لینک ها میره قراره که اندازه اون ها عوض شه و برتری بر روی عکس های اطراف رو با z-index نشان مدهیم
    HTML:
     #wrp a:hover {position:absolute; width:200px; height:200px; z-index:999;}
    -------------------------
    رسدیم به آخرین مرحله، پیشاپیش یه خسته نباشی جهت مار مشقت باری که انجام دادین رو بهتون می گم!!
    خب حالا زمانی که موس بر روی عکس ها میره قراره که اندازه اونها عوض شه و کاملا در وسط عکس کوچیک بیفته، ما این حرکت رو با بردین عکس بزگتر به بالا و چپ انجام میدهیم، اگه در نظر بگیریم که مختصات صفحه در بالا سمته چپ برابر با صفر و صفر باشه، ما عکس رو 50 تا به بالا و چپ می بریم و همونطور که میدونید چون خارج از مختصات بردار فرضی ما میشه مقدار ما منفی میشه، یعنی top:-50px , left:-50px;
    HTML:
    #wrp a:hover img {
        width:200px; height:200px;position:absolute; left:-50px; top:-50px; border:1px dotted #fff;
    }  
    ------------------------
    کد های کلی CSS:
    HTML:
      <style type="text/css">
    body {
        background:#999; text-align:center;
    }
    #wrp {
        padding:0; margin:10% auto 0 auto; background:silver; text-align:left;
    }
    #wrp li {
        width:100px; height:100px; list-style:none; float:left; margin:5px;
    }
    #wrp a {
        position:absolute; width:100px; height:100px; display:block; float:left;
    }
    #wrp a img {
        width:100px; height:100px; border:0; float:left;
    }
    #wrp a:hover {
        position:absolute; width:200px; height:200px; z-index:999;
    }
    #wrp a:hover img {
        width:200px; height:200px;position:absolute; left:-50px; top:-50px; border:1px dotted #fff;
    }
    </style>
    -********--------------*****************---------------********---------
    خوب حالا بریم سر کد های بدنه صفحه که فکر نمی کنم اصلا نیازی به تو ضیح داشته باشه:
    HTML:
     <body>
    <div id="wrp">
    <ul>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    <li><a href="www.echessdesign.com"><img src="echess.jpg" alt="" /></a></li>
    </ul>
    </div>
    </body>  
    *---------------------***************----------------
    تموم شد ، این نمونه مثال
    *-----------------
    البته کمی و کاستی در توضیحات من آماتور زیاد بود، استادان احساس می کنند نیاز به توضیح داره زحمت بکشند بفرمایند، هر سوالی دارید بفرمایید.
    منبع: تارنمای پارسیان
     
    نوشته شده توسط echessdesign در ‏31 مارس 2007
    tarenoco، baviran، mrpsd و 2 نفر دیگر از این ارسال تشکر کرده اند.
  8. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    درود بر شما
    در رابطه با سایتی که طراحی کردید باید ارز کنم خدمدتتون که در ادامه فرمایشی که استاد گرامی سجاد جان فرمودند، چند نکته جهت تکمیل صحبت ها:
    1- چرا زبان سایت که پیش فرض فارسی بود ، از رمز گزاری utf-8 استفاده نکردید؟ سایت شما در Opera اصلا خوانا نیست!!!1
    HTML:
    <meta http-equiv="Content-Type" content="text/html"; charset="windows-1256">
    -----------

    2- خصیصه media=all رو فراموش کردید؟
    HTML:
    <link rel="stylesheet" type="text/css" href="style/style.css" />
    ---------------

    3- اگر سایت بر پایه CSS هست، پس تگ فونت به چه منظور استفاده شده؟
    HTML:
    <font color="#FF8000">
    -------------

    4- خطاهای HTML صفحه خودتان رو ملاحظه بفرمایید
    ------------

    5- به جای تعریف جداگانه لینک ها و لینک های بازدید شده می توانی از:
    HTML:
    #navigationi li a
    --------------

    6- سایت شما در سایز 800*600 هم اسکرول افقی میندازه:
    HTML:
    .main{
    border:1px;
    border-style:solid;
    border-color:#CCCCCC;
    background-color:#FFFFFF;
    border-top:2px;
    border-top-style:solid;
    border-bottom:none;
    width:700px;
    padding-bottom:30px;
    }
    .makaan {
    margin-right:140px;
    margin-left:140px;
    }
    شما 700 پیکسل رو به main دادین، 140پیکسل از دو طرف به makann دادی، 700 + 140 +140 = 980
    -----------------

    7- متوجه احترام شما به سایت پارسی زبان میشم که اسکرول رو به سمت چپ منتقل کردید، اما این رو هم در نظر داشته باشید که در حال حاضر تنها مرورگر IE از آن پشتیبانی می کنه و این کار سرانجامی به جز به هم ریختگی سایت شما در مرورگر های دیگه، سرانجامی نداره!!!
    ----------------

    8- شما باید قابلیت های دیگر CSS رو در طراحی صفحه به نمایش بزارید، قابلیتی که یک کاربران با ورود به سایت، تفاوت رو احساس کنه. انعطاف پذیری که در CSS هست و در Table نیست
    --------------

    موفق باشید

    منبع: تارنمای پارسیان
     
    نوشته شده توسط echessdesign در ‏4 آوریل 2007
    Saeed، sajjad_eb و soroorweb از این ارسال تشکر کرده اند.
  9. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
  10. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    موضوع: رفع مشکل ناسازگاری طراحی وب سایت در IE با دیگر مرورگرها
    دورد بر شما
    همیشه IE یه مشکلی داره در نمایش ندادن همسان با دیگر مرورگرها!!!
    بار ها شده زمان طراحی وب سایت، وقتی که از وب سایت خود در مرورگر های متداول (مرورگرهای متداول دنیا شامل: IE, NS, FF, Opera, AOL browser, Safari) نمایش میگیرید، وب سایت شما در تمام مرورگر ها به غیر از IE به یک شکل نمایش داده میشه!!!
    به مثال زیر توجه کنید:
    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=utf-8" />
    <title>www.echessdesign.com</title>
    <style type="text/css">
    body {
        padding:0; margin:0; background: silver;
    }
    #echessdesign {
        width:300px; background:#f9f; height:50px; margin:0 100px 0 0; float:right;
    }
    </style>
    </head>

    <body>
    <div id="echessdesign">
    <a href="www.echessdesign.com">www.echessdesign.com</a>
    </div>
    </body>

    </html>
     
    در این مثال، باکسی که طراحی کردیم ،در مرور گر هایی به غیر از IE، در فاصله 200 پیکسلی سمت راست صفحه نمایش داده میشه. اما این فاصله در IE بیشتر است!!! و خیلی از مشکلات دیگر،...
    ------
    یکی از راه حل های رفع این مشکل بدین صورت است که ما برای IE فایل CSS جدایی طراحی کنیم ، که فقط مرور گر IE از آن استفاده کنه و دیگر مرور گر ها از فایل CSS پیش فرض طراحی صفحه استفاده کنند.
    سوال اینجاست که ما چگونه این نکته رو به مرورگر های مختلف بفهمونیم که این فایل CSS خاص، فقط در IE لود بشه؟؟
    راه حل اینجاست شما باید از یک فرمان شرطی که در head صفحه درج میشه استفاده کنید:
    HTML:
     <!--[if IE]>
    <style type="text/css">
    body {
        background: silver;
    }
    </style>

    <![endif]-->  
    --------------

    در صورت اینکه از این صفحه نمایش بگیرید متوجه میشید که تنها در IE، پس زمینه صفحه به رنگ خاکستری در میاد. شما در بین تگ های:
    HTML:
     <!--[if IE]>
    insert code
    <![endif]-->  
    می توانید : فایل های CSS ، کد های HTML ، کد های JavaScript ،... دیگر کد های مورد نظر خود تون رو قرار بدهبد که فقط در مرورگر IE نمایش داده بشه.
    --------------------
    نکته قابل ذکر دیگر این است که: شما می توانید فایل CSS پیش فرض رو به صفحاتتان لینک کنید و در زیر آن تغییراتی که باید در IE انجام شود را در زیر آن درج کنید. با این کار ، تمام مرورگر ها از فایل CSS پیش فرض شما استفاده می کنند و IE علاوه بر آن فایل CSS پیش فرض، از فایل CSS که در حلقه قرار گرفته نیز استفادی میکند.
    مثال:
    HTML:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>www.echessdesign.com</title>
    <style type="text/css">
    body {
        background: silver;
    }
    </style>


    <!--[if IE]>
    <style type="text/css">
    body {
        background: red;
    }
    </style>

    <![endif]-->

    </head>
       
    --------------------


    در صورتی که در نظر داشته باشید که نسبت به نسخه های مختلف IE ، فایل های متفاوتی لود شوند، می توانید با درج نسخه IE مورد نظر خود، تغییرات را اعمال کنید:

    HTML:
     <!--[if IE]>
    jahate namayesh dar IE
    <![endif]-->
     
    --
    HTML:
     <!--[if IE 5]>
    jahate namayesh dar IE 5
    <![endif]-->
     
    ----
    HTML:
     <!--[if IE 5.0]>
    jahate namayesh dar IE 5.0
    <![endif]-->
     
    -------

    HTML:
     <!--[if IE 5.5]>
    jahate namayesh dar IE 5.5
    <![endif]-->
     
    ----
    HTML:
      <!--[if IE 6]>
    jahate namayesh dar IE 6
    <![endif]-->
     
    ------
    HTML:
     <!--[if IE 7]>
    jahate namayesh dar IE 7
    <![endif]-->
     
    --------
    HTML:
      <!--[if gte IE 5]>
    jahate namayesh dar IE 5 va noskhe haye balatar
    <![endif]-->
     
    -------
    HTML:
     <!--[if lt IE 6]>
    jahate namayesh dar noskhehaye kam tar IE 6
    <![endif]-->
     
    -------

    HTML:
     <!--[if lte IE 5.5]>
    jahate namayesh dar IE 5.5 va noskhe haye kam tar az IE 5.5
    <![endif]-->
     
    ---------

    HTML:
     <!--[if gt IE 6]>
    jahate namayesh dar noskheh haye balatar az IE 6
    <![endif]-->  
    ---------

    استادان ارجمند که نیازی به تکمیل این توضیحات میبینند، لطفا زحمتش رو بکشند.
    پرسشی باشه در خدمتت شمام.
    منبع: تارنمای پارسیان
     
    آخرین ویرایش: ‏23 آوریل 2007
    نوشته شده توسط echessdesign در ‏23 آوریل 2007
    webmasterafkari، bluekerm، baviran و 10 نفر دیگر از این ارسال تشکر کرده اند.
  11. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    CSS expression

    برای همه‌ی توسعه دهندگان وب حقیقت تلخی‌ست که بزرگ بودن یک تصویر می‌تواند ساختار صفحه را بر هم بزند! تصویر بالا را ببینید، زیاد بودن عرض تصویر موجب شده ستون سمت راست (یا چپ) از جای اصلی خود خارج شده و کل ساختار صفحه برهم بخورد.
    این مشکل بیشتر وقتی خود را نشان می‌دهد که قرار است مشتری خود تصاویری را همراه با دیگر اطلاعاتش به سیستم وارد کند و خراب شدن ساختار صفحه در این میان اصلا جالب نیست و جلوگیری از چنین اتفاقی واقعا لازم و ضروری است.

    برای حل این مشکل البته راه‌های فراوانی هست. کنترل اندازه‌ی عکس هنگام upload (بالاگذاری!) آن اولین راه حلی است که به ذهن می‌رسد (در اینجا فرض می‌کنیم سیستم مدیریت برای سایت در نظر گرفته شده که امکان آپلود کردن فایل را به مشتری می‌دهد. مثلا یک CMS). اما اعمال چنین محدودیتی برای همه‌ی تصاویر که قرار است توسط سیستم آپلود شود زیاد جالب نیست چرا که مشخص نیست کدام تصویر قرار است در کجا قرار بگیرد و حداکثر اندازه مجاز برایش چقدر خواهد بود و پیاده سازی سیستمی برای مدیریت همه‌ی حالت‌ها مثل یک کابوس خواهد بود. ضمن آنکه اگر مشتری بخواهد طراحی سایت را تغییر بدهد باید برای تنظیم مجدد اندازه‌ها به شما مراجعه کند که خوشایند مشتری نیست هرچند که شما را خوشحال می‌کند!
    مشکلات دیگری هم هست. ممکن است تصویر از راه‌‌های دیگری (مثلا با FTP) به سرور فرستاده شده باشد یا اصلا روی سرور دیگری باشد.

    راه دیگر اینست که با استفاده از شناسه‌ی width برای تگ‌های img در CSS همه‌ی تصاویر را با اندازه‌ای متوسط نمایش دهیم!!! به صورت زیر.
    HTML:
    .cntnt img { width: 300px; }
    <div class="cntnt"><img src="pic.jpg" /></div>
    اما راه حل بهتر با استفاده از CSS:
    در CSS شناسه‌ای وجود دارد که به وسیله‌ی آن می‌توان حداکثر یا حداقل اندازه‌ی طول یا عرض عناصر را مشخص کرد.
    HTML:
    max-width, min-width, max-height, min-height
    HTML:
    .cntnt img { max-width: 300px; }
    <div class="cntnt"><img src="pic.jpg" /></div>
    این دقیقا همان چیزی‌ست که دنبالش بودیم. حالا می‌توان مشخص کرد همه‌ی تصاویر تا زمانی که عرض آنها کوچکتر از 300px هستند با اندازه‌ی اصلی و تصاویر با عرض برزگتر از 300px با اندازه‌ی 300px نمایش داده شوند. اما خبر بد اینست که Internet Explorer اصلا این شناسه‌ها را در نظر نمی‌گیرد و کار خود را می‌کند! برعکس FireFox به‌خوبی با این کدها مشکل را حل می‌کند.
    پیش از آنکه طرفداران FireFox خوشحال شوند از این همه برتری FireFox و حماقت IE، به نکته‌ای که دلیل اصلی نوشته شدن این نوشته است اشاره می‌کنم: CSS expression.

    CSS expression امکانی‌ست که IE ورژن ۵ به بعد از آن پشتیبانی می‌کند به‌وسیله‌ی این امکان می‌توان در فایل‌های CSS از کدهای JavaScript برای داشتن تنظیمات هوشمندتر استفاده کرد البته FireFox از امکان درک و تحلیل این expressionها عاجز است! به صورت زیر:

    HTML:
    width: expression( javascript code);
    برگردیم به مسئله‌ی اصلی. مشکل را در FireFox حل کردیم. برای حل مشکل در IE با استفاده از expressionهای گفته شده، خط زیر را هم به CSS اضافه می‌کنیم.
    HTML:
    .cntnt img {
    max-width: 300px;
    width : expression(this.width < 300 ? "auto":"300px");
    }
    <div class="cntnt"><img src="pic.jpg" /></div>
    جمله‌ی مشخص شده یک عبارت (اپراتور؟) شرطی است که JavaScript آنرا از زبان C قرض گرفته! A?B:C به این صورت است که اگر A درست باشد B برگردانده می‌شود در غیر این صورت C. کلمه کلیدی this هم در JavaScript به شی یا المان جاری اشاره می‌کند. در خط بالا this.width در واقع به شناسه‌ی width از المان img اشاره دارد که اگر از 300 کوچکتر باشد مقدار شناسه‌ی width در CSS برابر auto می‌شود (یعنی هرآنچه هست!) در غیر این صورت برابر 300px می‌شود. و در هیچ حالتی بیشتر از 300px نخواهد بود که مقصود ماست.

    اگر مرورگرهای دیگر هم CSS expressionها پشنیبانی کامل می‌کردند می‌شد با آن معجزات فراوانی کرد که در حالت عادی نیاز به کدنویسی فراوان با DHTML دارد.

    http://javascript.echessdesign.com/img/index008.gif

    مثلا برای متمایز کردن سطرهای یک جدول از یکدیگر (شکل بالا) سمت کلاینت به‌جای سمت سرور می‌توان از CSS expression استفاده کرد. البته فقط در IE کار می‌کند.
    HTML:
    .t1 tbody tr {
    background-color: expression(this.sectionRowIndex % 2 == 0 ? "#cccccc" : "#e5e5e5");
    }
    استفاده‌های ساده‌ی دیگری هم می‌توان داشت. مثال پایین به ما کمک می‌کند که یک المان را نسبت به اندازه مرورگر در صفحه قرار دهیم. بدیهی است که موقعیت این المان وابسته به اندازه مرورگر است.
    HTML:
    #mybox {
    position: absolute;
    width: 100px;
    height: 100px;
    padding: 10px;
    left: expression(document.body.offsetWidth - 130 + "px");
    top: expression(document.body.offsetHeight - 130 + "px");
    background: red;
    }
    <div id="mybox">my box here</div>
    البته برای این کار راه حل ساده‌تر و عمومی‌تری هم هست! این نکته فقط به عنوان یک نمونه گفته شد.
    HTML:
    #mybox {
    position: absolute;
    width: 100px;
    height: 100px;
    padding: 10px;
    right: 25px;
    bottom: 25px;
    background: red;
    }
    <div id="mybox>my" box here</div>
    با استفاده از همین چند خط می‌توان کارهای دیگری نیز کرد که معمولا نیاز طراحان است. با همین چند خط کد می‌توان این مشکل را تا حدودی حل کرد. به این صفحه نگاه کنید.
    HTML:
    min-height:600px;
    height:expression(this.scrollHeight > 600 ? "auto":"600px");

    منابع: ashoob.net , حل مشکل max width در IE

    نویسنده: تارنمای پارسیان
     
    نوشته شده توسط echessdesign در ‏21 می 2007
    webmasterafkari، baviran، pouya saadeghi و 8 نفر دیگر از این ارسال تشکر کرده اند.
  12. NabiKAZ

    NabiKAZ Well-Known Member

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

    سلام
    فرصتی شد روی مقاله شما کار کنم.
    ظاهراً این دستور expression فقط برای IE کار میکنه و در FF جواب نمیده !
    با این حساب خیلی از توانایی ها و قدرت این دستور عملاً غیر قابل استفاده میشه مگر اینکه معادلی در CSS برای اون وجود داشته باشه که اغلب اینطور نیست !
    بزارید با یه سوال منظورم رو برسونم.
    دو تگ div به همچسبیده شده به عنوان ستون یک و دو داریم، اولی عرض ثابت 200 پیکسل رو داره و دومی بایستی تمامی فضای خالی باقیمانده از عرض مرورگر رو پوشش بده.
    کد زیر در IE جواب مسئله است، اما برای FF چه راهی پیشنهاد میکنید ؟!
    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=utf-8" />
    <title>div1 div2</title>
    </head>
    <style type="text/css">
    * {
        margin:0; padding:0;
    }
    #div1 {
        float:right;
        width:200px;
        background-color:#0dd;
    }

    #div2 {
        float:right;
        width: expression(document.body.offsetWidth - 200 + "px");
        background-color:#dd0;
    }

    </style>
    <body>

            <div id="div1">
            div1
            </div>
           
            <div id="div2">
            div2
            </div>

    </body>

    </html>

     
    نبی
     
    نوشته شده توسط NabiKAZ در ‏5 ژوئن 2007
    echessdesign و pouya saadeghi از این پست تشکر کرده اند.
  13. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    البته اینم باید درنظر داشت که expression چیزی جز جاوا اسکریپت در دل css نیست، خب پس میشه اونو ازش خارج کرد به این شکل مشکل رو در IE و FF حل کرد:
    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=utf-8" />
    <title>div1 div2</title>
    <script type="text/javascript">
    function setwidth() {
    document.getElementById("div2").style.width = document.body.offsetWidth - 200 + "px";
    }
    setInterval("setwidth()", 1);
    </script>

    <style type="text/css">
    * {
        margin:0; padding:0;
    }
    #div1 {
        float:right;
        width:200px;
        background-color:#0dd;
    }

    #div2 {
        float:right;
        background-color:#dd0;
    }

    </style>
    </head>

    <body onload="setwidth()">

            <div id="div1">
            div1
            </div>
           
            <div id="div2">
            div2
            </div>

    </body>

    </html>

     
    اما آیا برای حل این مشکل حتماً باید به جاوا اسکریپت متوصل شد؟!
     
    آخرین ویرایش: ‏5 ژوئن 2007
    نوشته شده توسط NabiKAZ در ‏5 ژوئن 2007
    echessdesign و pouya saadeghi از این پست تشکر کرده اند.
  14. 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=utf-8" />
    <title>div1 div2</title>

    <style type="text/css">
    * {
        margin:0; padding:0;
    }
    #div1 {
        float:right;
        width:200px;
        background-color:#0dd;
    }

    #div2 {
        float:left;
        background-color:#dd0;
        width:100%;
    }

    </style>


    </head>

    <body>
           
            <div id="div2">
                <div id="div1">
                div1
                </div>
            div2
            </div>

    </body>

    </html>

     
     
    نوشته شده توسط NabiKAZ در ‏5 ژوئن 2007
    pouya saadeghi و echessdesign از این پست تشکر کرده اند.
  15. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    رفع مشکل حاشیه دوبرابر در Ie

    رفع مشکل حاشیه دوبرابر در IE

    سلام ،

    زمانی که از margin:100px برای یک div استفاده میکنید. در FF همون فاصله 100px رو از حاشیه اعمال میکنه اما در IE به اشتباه دو برابر این مقدار یعنی 200px رو اعمال میکنه !!!
    میتونید کد زیر رو در IE و FF مقایسه کنید:
    HTML:

    .floatbox {
      float: left;
      width: 150px;
      height: 150px;
      margin: 5px 0 5px 100px;
      /*This last value applies the 100px left margin */
      }
     
    برای اینکه در FF و IE به صورت یکسان و حاشیه صحیح نمایش داده شود.
    کافیست که از display: inline; استفاده نمائید.

    یعنی کد تکمیل شده بالا بدین صورت خواهد شد:
    HTML:

    .floatbox {
      float: left;
      width: 150px;
      height: 150px;
      margin: 5px 0 5px 100px;
      display: inline;
      }
     
    امیدوارم مفید بوده باشه

    منبع

    نبی
     
    آخرین ویرایش: ‏7 ژوئن 2007
    نوشته شده توسط NabiKAZ در ‏7 ژوئن 2007
    pouya saadeghi، absdostan، zoghal و 2 نفر دیگر از این ارسال تشکر کرده اند.
  16. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    درود بر شما
    نظرتون در رابطه با حک کردن خصیصه طول در IE چیه؟
    طول به شکل ساده برای OP و FF
    HTML:
    width:200px
    ////
    طول با ! ، برای IE 7
    HTML:
    !width:400px;
    ////
    طول با _ ، برای IE 6
    HTML:
    _width:800px;
    ---
    (در نوشتنن باید ترتیب را رعایت کنید).
    مثال:
    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>

    <title>echess design</title>

    <meta    http-equiv="Content-Type"           content="text/html; charset=utf-8" />

    <style type="text/css">
    #wrp{
    background:red;
    width:200px;
    !width:2000px;
    _width:800px;
    }
    </style>
    </head>

    <body>
    <div id="wrp">
    www.echessdesign.com
    </div>

    </body>

    </html>


     
    پاینده باشید.

    منبع: تارنمای پارسیان
     
    آخرین ویرایش: ‏2 دسامبر 2007
    نوشته شده توسط echessdesign در ‏2 دسامبر 2007
    webmasterafkari، pouya saadeghi، amirkhoshhal و 4 نفر دیگر از این ارسال تشکر کرده اند.
  17. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    درود بر شما
    آیا می شه دو کلاس متفاوت رو هم زمان به یک div اختصاص داد؟
    شاید موضوعه غیر منطقی باشه اما امکان پذیر است و تنها کافیه که شما بین دو کلاس از یک فاصله استفاده فرمایید...
    در مرورگر های زیر پشتیبانی می شه:
    IE 7
    Op 9.26
    FF 2.0.0.4

    نمونه مثال:
    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=utf-8" />
    <title>cccccccc</title>
    <style>
    .amd {
        background:fuchsia;
    }
    .cmd {
        border:3px solid green;
    }
    </style>
    </head>

    <body>
    <div class="amd cmd">
    cccccccc
    </div>
    </body>

    </html>
     
    منبع: تارنمای پارسیان
     
    نوشته شده توسط echessdesign در ‏30 مارس 2008
    pouya saadeghi از این پست تشکر کرده است.
  18. echessdesign

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

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    حک کردن سریع خصیصه min-height در مرورگر IE
    HTML:
    selector {
      min-height:500px;
      height:auto !important;
      height:500px;
    }
    البته همون طور که در نظر دارید از !important جهت حک کردن در نسخه 7 مرورگر IE استفاده می شود.

    درمرورگر های زیر پشتیبانی می شوند:
    IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

    منبع: تارنمای پارسیان
     
    آخرین ویرایش: ‏30 مارس 2008
    نوشته شده توسط echessdesign در ‏30 مارس 2008
    aydinp، mf2fx، pouya saadeghi و یک نفر دیگر از این ارسال تشکر کرده اند.
  19. Mds

    Mds Active Member

    ارسال‌ها:
    239
    تشکر شده:
    60
    امتیاز دستاورد:
    28
    این هم یه سایت خیلی مفید در رابطه با هک CSS .
    به درد من که خیلی خورد ، امیدوارم برای شما هم مفید باشه . :wink:

    http://www.webdevout.net/css-hacks
     
    نوشته شده توسط Mds در ‏16 آوریل 2008
    leomostafa از این پست تشکر کرده است.
  20. meysamz

    meysamz Member

    ارسال‌ها:
    285
    تشکر شده:
    104
    امتیاز دستاورد:
    16
    یک راه ساده برای جدا کردن IE با سایر مرور گر ها وجود داره که مقادیری که قرار در IE جور دیگری باشند را در یک کلاس همنام + * html قرار بدیم.
    HTML:

    *html .test /* IE */
    {
        height:20px;
    }
    .test /* Other Browser */
    {
        height:30px;
    }
     
     
    آخرین ویرایش: ‏22 آوریل 2008
    نوشته شده توسط meysamz در ‏22 آوریل 2008
    mf2fx، pouya saadeghi، leomostafa و یک نفر دیگر از این ارسال تشکر کرده اند.
وضعیت موضوع:
موضوع بسته شده است.

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