كود الاقسام الفرعية

hossam_h كتب:

تفضل اخي العزيز

https://help.ahlamontada.com/t12180-topic#54941

ويمعنك تعديل الكود بالنسبة للصور

  

AmEr DeSiGN كتب: كيفية انشاء فئة و منتدى فرعى و منتدى ثانوى

الكود:

<span style="font-size: 12px; color: rgb(0, 0, 0);
 font-family: Tahoma; background-color: rgb(255, 255, 255);"
class="genmed"><span class="genmed"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/1010.png"></span></span><div>
   
  <span class="genmed" style="color: rgb(0, 0, 0); font-family:
Tahoma; font-size: 12px;"><span class="genmed"><span
class="genmed"><span style="font-weight:
bold;">::</span><span style="font-weight: bold;"
class="genmed"><span style="color: rgb(0, 0,
128);">[تستطيع]</span></span></span></span></span><span
 style="color: rgb(0, 0, 0); font-family: Tahoma; font-weight:
bold;"> طلب تصميم خاص بمنتداك و الذي يناسب اذواقك ,, وكذالك تستطيع
رؤية ابداعات الاعضاء في مجال التصميم وتقديم النصائح لهم والاستفادة من
خبراتهم فضلاً عن تحديات في التصميم ,, </span>
</div><div>
</div><div align="right">
     
    <div class="list_carousel">
         
   
     <div style="display: block; text-align: start; float: none;
position: relative; top: auto; right: auto; bottom: auto; left: auto;
z-index: auto; width: 360px; height: 113px; margin: 0px; overflow:
hidden;" class="caroufredsel_wrapper">
             
       
    <ul style="text-align: left; float: none; position: absolute;
top: 0px; right: auto; bottom: auto; left: 15px; margin: 0px; width:
360px; height: 60px;" id="foo3">
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f74-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/4a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f74-montada">الأوسمة والرتب</a>
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f100-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/3a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f100-montada">تصاميم الفايس
بوك</a>
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f61-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/1a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f61-montada">الواجهات</a>
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f97-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/2a11.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f97-montada">التواقيع</a>
                </li>
                 
                <li>
                     <a class="topiclast" href="#"> </a>
                </li>
                 
            </ul>
             
        </div>
         
        <div class="clearfix">
             
        </div>
         
    </div>
</div><div align="right">
     
    <div class="list_carousel">
         
   
     <div style="display: block; text-align: start; float: none;
position: relative; top: auto; right: auto; bottom: auto; left: auto;
z-index: auto; width: 360px; height: 113px; margin: 0px; overflow:
hidden;" class="caroufredsel_wrapper">
             
       
    <ul style="text-align: left; float: none; position: absolute;
top: 0px; right: auto; bottom: auto; left: 15px; margin: 0px; width:
360px; height: 60px;" id="foo3">
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f107-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/8a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f107-montada">الطلبات المنتهية</a>
 
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f102-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/7a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f102-montada">التصاميم الاخرى</a>
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f14-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/6a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f14-montada">البنرات اعلانية</a>
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f18-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/5a10.png"></a><a
 الحر"="" alt"الخط="" class="topiclast_title"
href="http://www.orliine.net/f18-montada">الخط الحر</a>
                </li>
                 
                <li>
                     <a class="topiclast" href="#"> </a>
                </li>
                 
            </ul>
             
        </div>
         
        <div class="clearfix">
             
        </div>
         
    </div>
</div><br>

AmEr DeSiGN كتب:هذا الكود

الكود:

<span style="font-size: 12px; color: rgb(0, 0, 0);
 font-family: Tahoma; background-color: rgb(255, 255, 255);"
class="genmed"><span class="genmed"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/1010.png"></span></span><div>
   
  <span class="genmed" style="color: rgb(0, 0, 0); font-family:
Tahoma; font-size: 12px;"><span class="genmed"><span
class="genmed"><span style="font-weight:
bold;">::</span><span style="font-weight: bold;"
class="genmed"><span style="color: rgb(0, 0,
128);">[تستطيع]</span></span></span></span></span><span
 style="color: rgb(0, 0, 0); font-family: Tahoma; font-weight:
bold;"> طلب تصميم خاص بمنتداك و الذي يناسب اذواقك ,, وكذالك تستطيع
رؤية ابداعات الاعضاء في مجال التصميم وتقديم النصائح لهم والاستفادة من
خبراتهم فضلاً عن تحديات في التصميم ,, </span>
</div><div>
</div><div align="right">
     
    <div class="list_carousel">
         
   
     <div style="display: block; text-align: start; float: none;
position: relative; top: auto; right: auto; bottom: auto; left: auto;
z-index: auto; width: 360px; height: 113px; margin: 0px; overflow:
hidden;" class="caroufredsel_wrapper">
             
       
    <ul style="text-align: left; float: none; position: absolute;
top: 0px; right: auto; bottom: auto; left: 15px; margin: 0px; width:
360px; height: 60px;" id="foo3">
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f74-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/4a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f74-montada">الأوسمة والرتب</a>
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f100-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/3a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f100-montada">تصاميم الفايس
بوك</a>
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f61-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/1a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f61-montada">الواجهات</a>
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f97-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/2a11.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f97-montada">التواقيع</a>
                </li>
                 
                <li>
                     <a class="topiclast" href="#"> </a>
                </li>
                 
            </ul>
             
        </div>
         
        <div class="clearfix">
             
        </div>
         
    </div>
</div><div align="right">
     
    <div class="list_carousel">
         
   
     <div style="display: block; text-align: start; float: none;
position: relative; top: auto; right: auto; bottom: auto; left: auto;
z-index: auto; width: 360px; height: 113px; margin: 0px; overflow:
hidden;" class="caroufredsel_wrapper">
             
       
    <ul style="text-align: left; float: none; position: absolute;
top: 0px; right: auto; bottom: auto; left: 15px; margin: 0px; width:
360px; height: 60px;" id="foo3">
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f107-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/8a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f107-montada">الطلبات المنتهية</a>
 
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f102-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/7a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f102-montada">التصاميم الاخرى</a>
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f14-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/6a10.png"></a><a
 class="topiclast_title"
href="http://www.orliine.net/f14-montada">البنرات اعلانية</a>
                </li>
                 
                <li>
   
                  <a style="" class="topiclast"
href="http://www.orliine.net/f18-montada"><img
src="http://i39.servimg.com/u/f39/15/56/98/16/5a10.png"></a><a
 الحر"="" alt"الخط="" class="topiclast_title"
href="http://www.orliine.net/f18-montada">الخط الحر</a>
                </li>
                 
                <li>
                     <a class="topiclast" href="#"> </a>
                </li>
                 
            </ul>
             
        </div>
         
        <div class="clearfix">
             
        </div>
         
    </div>
</div><br>

باتباع الشرح الذي وضعه عبد السلام
ضع هذا الكود بوصف المنتدى وعدل روابط الاقسام والصور ان اردت

الكود:

<div align="right">
   
   <div class="list_carousel">
      
      <div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 360px; height: 113px; margin: 0px; overflow: hidden;">
         
         <ul id="foo3" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 15px; margin: 0px; width: 360px; height: 60px;">
            
            <li>
                <a href="رابط الموضوع1" class="topiclast"><img src="رابط الصورة1" /></a><a href="رابط الموضوع1" class="topiclast_title">اسم الموضوع 1</a>
            </li>
            
            <li>
                <a href="رابط الموضوع 2" class="topiclast"><img src="رابط الصورة2" /></a><a href="رابط الموضوع2" class="topiclast_title">اسم الموضوع2</a>
            </li>
            
            <li>
                <a href="رابط الموضوع3" class="topiclast"><img src="رابط الصورة3" /></a><a href="رابط الموضوع3" class="topiclast_title">اسم الموضوع3</a>
            </li>
             
            <li>
                <a href="رابط الموضوع4" class="topiclast"><img src="رابط الصورة4" /></a><a href="رابط الموضوع4" class="topiclast_title">اسم الموضوع4</a>
            </li>
            
            <li>
                <a href="#" class="topiclast"> </a>
            </li>
            
         </ul>
         
      </div>
      
      <div class="clearfix">
         
      </div>
      
   </div>
</div>

الكود:

.list_carousel {
    margin: 20px auto auto;
    position: relative;
    width: 360px;
}
.list_carousel ul {
    display: block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.list_carousel li {
    border-radius: 20px 20px 20px 20px;
}
.list_carousel li a.topiclast {
    display: block;
}
.list_carousel li a.topiclast img {
    -moz-transition: all 0.8s ease-in-out 0s;
    background-color: rgba(255, 255, 255, 0);
    border: 5px solid #FFFFFF;
    border-radius: 70px 70px 70px 70px;
    box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.32), 11px 8px 10px rgba(0, 0, 0, 0.09) inset;
    height: 50px;
    opacity: 0.3;
    width: 50px;
}
.list_carousel li a.topiclast img:hover {
    -moz-transform: rotate(360deg);
    opacity: 1;
}
.list_carousel li a.topiclast_title {
    color: gray;
  font-weight: bold;
    font: 16px mdgess1;
}
.list_carousel li {
    color: #999999;
    display: block;
    float: left;
    font-size: 40px;
    margin: 6px;
    padding: 0;
    text-align: center;
}
.list_carousel.responsive {
    margin-left: 0;
    width: auto;
}

new.moon كتب:مرحبا بك عزيزي..

تفضل الطريقة

الكود

الكود:

<div align="right">
   
   <div class="list_carousel">
      
      <div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 360px; height: 113px; margin: 0px; overflow: hidden;">
         
         <ul id="foo3" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 15px; margin: 0px; width: 360px; height: 60px;">
            
            <li>
                <a href="رابط الموضوع1" class="topiclast"><img src="رابط الصورة1" /></a><a href="رابط الموضوع1" class="topiclast_title">اسم الموضوع 1</a>
            </li>
            
            <li>
                <a href="رابط الموضوع 2" class="topiclast"><img src="رابط الصورة2" /></a><a href="رابط الموضوع2" class="topiclast_title">اسم الموضوع2</a>
            </li>
            
            <li>
                <a href="رابط الموضوع3" class="topiclast"><img src="رابط الصورة3" /></a><a href="رابط الموضوع3" class="topiclast_title">اسم الموضوع3</a>
            </li>
              
            <li>
                <a href="رابط الموضوع4" class="topiclast"><img src="رابط الصورة4" /></a><a href="رابط الموضوع4" class="topiclast_title">اسم الموضوع4</a>
            </li>
            
            <li>
                <a href="#" class="topiclast"> </a>
            </li>
            
         </ul>
         
      </div>
      
      <div class="clearfix">
         
      </div>
      
   </div>
</div>

وكود سي اس اس

الكود:

.list_carousel {
    margin: 20px auto auto;
    position: relative;
    width: 360px;
}
.list_carousel ul {
    display: block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.list_carousel li {
    border-radius: 20px 20px 20px 20px;
}
.list_carousel li a.topiclast {
    display: block;
}
.list_carousel li a.topiclast img {
    -moz-transition: all 0.8s ease-in-out 0s;
    background-color: rgba(255, 255, 255, 0);
    border: 5px solid #FFFFFF;
    border-radius: 70px 70px 70px 70px;
    box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.32), 11px 8px 10px rgba(0, 0, 0, 0.09) inset;
    height: 50px;
    opacity: 0.3;
    width: 50px;
}
.list_carousel li a.topiclast img:hover {
    -moz-transform: rotate(360deg);
    opacity: 1;
}
.list_carousel li a.topiclast_title {
    color: gray;
  font-weight: bold;
    font: 16px mdgess1;
}
.list_carousel li {
    color: #999999;
    display: block;
    float: left;
    font-size: 40px;
    margin: 6px;
    padding: 0;
    text-align: center;
}
.list_carousel.responsive {
    margin-left: 0;
    width: auto;
}

لا تنسى التعديل على كود الهتميل ووضع التعديلات كما وضعت لك الاسم بالعربي للمواضيع والصور