/
  • فیکس کردن یک دایو در بالای صفحه

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

    حالت موضوعی | حالت خطی فیکس کردن یک دایو در بالای صفحه
    نویسنده پیام
    ImanAzadi آفلاین
    عضو مهم
    ****

    ارسال‌ها: 250
    تاریخ عضویت: ۱۳۹۲ اسفند ۲
    اعتبار: 0
    تشکرها : 37
    ( 12 تشکر در 10 ارسال )
    ارسال: #1
    فیکس کردن یک دایو در بالای صفحه
    با سلام


    من با استفاده از div و استایل های display:table , display:table-row; , display: table-cell; یک جدول درست کردم

    حالا میخوام سطر اول جدول یا همون div با آی دی header زمانیکه صفحه اسکرول میخوره ، فیکس بشه ( position:fix)

    هر کاری کردم نشد ، قالب بهم میریزه

    این نکته رو بگم نمیخوام استایل های فعلی تغییر کنند منظورم کلاس a,b,c میخوام جدولم با دایو باشه نه با تگ table , ...

    کد:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>




    <style>


    .a
    {
        display:table;    
    }


    .b
    {
        display:table-row;    
    }
    .c
    {
        display: table-cell;
        height:25px;
        text-align:center;
        vertical-align:middle;
        width:180px;
        border: solid 1px #000000;
    }




    </style>
    </head>


    <body>


    <div style=" width:900px; margin:0 auto; border: solid 1px; background-color:#CFEBF9;">


    <div >


    <div id="header"  class="a" style="background-color:#A996DD;">




    <div class="b">
    <div class="c">titleA</div>
    <div class="c">titleB</div>
    <div class="c">titleC</div>
    </div>


    </div>
    <div  class="a">




    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>


    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>


    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>


    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>


    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>


    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>


    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>




    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>


    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>


    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>
    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>


    <div class="b">
    <div class="c">a</div>
    <div class="c">b</div>
    <div class="c">c</div>
    </div>


    </div>




    </div>


    </div>




    </body>
    </html>

    دوستان کارم خیلی لنگ این قضیه هست

    خیلی هم وقت گذاشتم و سرچ کردم چیزی پیدا نکردم
    ۱۳۹۴ بهمن ۲۲ ۰۵:۲۸ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    « قدیمی تر | تازه‌ تر »

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


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