16-01-2011, 12:53 AM
|
رقم المشاركة : 1 |
|
| الان فوتر جاهز بالكامل بتقنية css و بسهووووله في التركيب مساء الخيراات
لفت نظري كثير من الاشخاص يبحث عن هذه التقنيه الجميله والمميزه في المنتديات
مثاااال
وهي نفس الي في موقع روابط بالاسفل
الطريقه سهله
كل الي عليك تفتح قالب الفوتر
وتبحث عن كود: <script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script> ضع مباشره تحتها الكود التالي : بعد التعديل على روابط موقعك والنصوص وغيره | | <table cellpadding="0" class="faras_tab" style="width: 90%"> <tr> <td style="width: 15%"> <ul class="faras_navigations"> <li title="عنوان لقسم"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="عنوان لقسم1"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="عنوان لقسم4"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> </ul> </td> <td style="width: 15%"> <ul class="faras_navigations"> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a> </li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> </ul> </td> <td style="width: 15%"> <ul class="faras_navigations"> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> </ul> </td> <td style="width: 15%"> <ul class="faras_navigations"> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a> </li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> </ul> </td> <td style="width: 15%"> <ul class="faras_navigations"> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a> </li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> </ul> </td> <td style="width: 15%"> <ul class="faras_navigations"> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> <li title="rawabetvb.com"> <a href="http://www.rawabetvb.com/vb/">عنوان نصي</a></li> </ul> </td> </tr> </table>
|
اعمل حفظ
بعدها نروح
تعاريف CSS الإضافية/Additional CSS Definitions
المربع الثاني في اخره ضيف الكود التالي : كود: .faras_tab {
margin: auto;
}
.faras_mtab {
margin: auto;
width: 1000px;
}
img {
border: 0px none;
}
a {
outline: 0px;
}
.faras_hadv {
border: 1px #0099FF dashed;
margin-left: 4px;
}
.faras_adv {
border: 1px #0099FF dashed;
}
.faras_navigations {
margin-right: 5px;
padding-right: 5px;
font-size: 11px;
text-align: right;
margin: auto;
}
.faras_navigations li {
display: inline;
}
.faras_navigations li a {
float: none;
width: 95%;
display: block;
text-decoration: none;
margin: 0 0px;
padding: 2px 2px;
margin-bottom: 2px;
border-bottom: 1px #C0C0C0 dashed;
color: #0099FF;
}
.faras_navigations li a:hover {
font-size: 11px;
color: #808080;
border-bottom: 1px #0099FF dashed;
background-color: #FBFBFD;
}
وعمل حفظ وراح تشاهد النتيجه الموجوده بنفس الي بالصورة
تحياتي للجميع اخوكم فارس
|
| | |