كود اضافة اقسام المنتدى بطريقة منتظمة على الصفحة الرئيسية مثل منتديات vp

.img_list_hp {[size=19][/size]
border: 1px solid #0372BE;[size=19][/size]
padding: 0;[size=19][/size]
float: left;[size=19][/size]
color: #FFF !important;[size=19][/size]
width: auto;[size=19][/size]
font-size: 11px;[size=19][/size]
text-align: center;[size=19][/size]
margin: auto 10px auto auto;[size=19][/size]
border-radius: 6px;[size=19][/size]
-moz-border-radius: 6px;[size=19][/size]
-webkit-border-radius: 6px;[size=19][/size]
}[size=19][/size]
[size=19][/size]
.img_list_hp:hover {[size=19][/size]
background-color: #DCEAF5;[size=19][/size]
}[size=19][/size]
[size=19][/size]
.img_list_hp img {[size=19][/size]
padding: 8px 15px;[size=19][/size]
}[size=19][/size]
[size=19][/size]
.img_list_hp span {[size=19][/size]
background-color: #0372BE;[size=19][/size]
color #FFF;[size=19][/size]
display: block;[size=19][/size]
padding: 0 10px;[size=19][/size]
}[size=19][/size]
.img_list_hp a {[size=19][/size]
color: #FFF !important;[size=19][/size]
text-decoration: none;[size=19][/size]
}[size=19][/size]
#img_list_alt {[size=19][/size]
background-image: url(http://i21.servimg.com/u/f21/11/81/27/88/arrow_10.png);[size=19][/size]
background-repeat: no-repeat;[size=19][/size]
background-position: 20px 0;[size=19][/size]
padding-top: 13px;[size=19][/size]
padding-left: 55px;[size=19][/size]
}

                <script>        jQuery(function() {        jQuery('.img_list_hp img').mouseover(function() {        jQuery('#img_list_alt').html(jQuery(this).attr('alt'));        }).mouseout(function() {        jQuery('#img_list_alt').html('ضع هنا شرح لجميع الاقسام وكيفية الدخول لأى قسم!');        });        });        </script>          <div class="img_list_hp"><a href="اسم القسم فى الرابط"><img height="59" src="صورة القسم" alt="وصف القسم"><span>عنوان القسم </span></a></div>           <div style="clear: both" id="img_list_alt">ضع هنا شرح عام لجميع الاقسام !</div>

[size=19][/size]
<script>[size=19][/size]
jQuery(function() {[size=19][/size]
 jQuery('.img_list_hp img').mouseover(function() {[size=19][/size]
 jQuery('#img_list_alt').html(jQuery(this).attr('alt'));[size=19][/size]
 }).mouseout(function() {[size=19][/size]
 jQuery('#img_list_alt').html('ضع هنا شرح لجميع الاقسام وكيفية الدخول لأى قسم!');[size=19][/size]
 });[size=19][/size]
});[size=19][/size]
</script>

<div class="img_list_hp"><a href="اسم القسم فى الرابط"><img height="59" src="صورة القسم" alt="وصف القسم"><span>عنوان القسم </span></a></div>

<div style="clear: both" id="img_list_alt">ضع هنا شرح عام لجميع الاقسام !</div>