• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
فیکس کردن یک دایو در بالای صفحه
#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 مهمان