فـوتـر جميل وانيق بتقنية الـ Css







السلام عليكم ورحمة الله وبركاته ، أول موضوع لي بهالقسم ، اتمنى ان ينال على رضاكم فوتر بتقنية الـ Css اولا دعونا نقف قليلا ونستعرض الناتج النهائي للعمل هذه صوره نهائيه من العمل ،

حسنا ، لآ بأس بـِه ،، نأتي الان لطريقة التركيب بالمنتدى ، أولا نذهب الى قالب الفوتر ، ونضع هذا الكود بنهاية القالب ،

رمز Code:
<!--Start Footer-->
<div id="footer">

 <div class="pal-girl">
    
     <h3> <img src="images/stick-footer.png" alt="myforum" /> نبذه تعريفيه</h3>
        
        <p>فوتر بتقنية Css مقدم من فلسطينيه وافتخر عضوه بمعهد ترايدنت - الاعدادات الشامله للاستايل فوتر بتقنية Css مقدم من فلسطينيه وافتخر عضوه بمعهد ترايدنت - الاعدادات الشامله للاستايل فوتر بتقنية Css مقدم من فلسطينيه وافتخر عضوه بمعهد ترايدنت - الاعدادات الشامله للاستايل</p>
            
    </div>
        <div class="pal-girl">
         <h3> <img src="images/link-footer.png" alt="myforum" /> الوصول السريع</h3>
            
            <ul>
             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
                             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
                                             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
                                                             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>            </ul>
        </div>
 

        <div class="pal-girl">
          <h3><img src="images/link-footer.png" alt="myforum" /> الوصول السريع</h3>
            
            <ul>
              <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
                             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
                                             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
          <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>            </ul>
        </div>
 
 
        <div class="pal-girl">
         <h3><img src="images/link-footer.png" alt="myforum" /> الوصول السريع</h3>
            <ul>
             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
                             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
                                             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
                                                             <li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
            </ul>
        </div>
 

</div>

جميل جدا ، الى الان ما زالت الامور على ما يرام ، وكل شئ تحت السيطره اظن ان التعديل سهل ، حسنا ، نأتي الان لكود Css في الستايل المراد اضافة القالب لَه نذهب الى Css رئيسي ، ثــم بنهاية الصفحه نذهب الى تعاريف CSS الإضافية/Additional CSS Definitions ونضع هذا الكود ،

رمز Code:
#footer {
 width:auto;
        cursor: crosshair
 margin:auto;
 height:220px;
 color:#c3c3c3;
 direction:rtl;
 background-color: #dddddd;
 }
img{
 border:none;
}
 
.pal-girl{
 float:right;
 width:230px;
 padding:10px;
 border-right:1px dashed #666;
 }
.pal-girl h3{
 font-family:"Arial Black", Gadget, sans-serif;
 font-size:16px;
 color:#FFF;
 font-weight:bold;
 background-color:#0a95b8;
 padding-right:10px;
 margin-bottom:3px;
 }
 
.pal-girl ul li {
 list-style-type:none;
        text-decoration: none;
 padding:5px;
 cursor: crosshair;
 float: right;
 } 
.pal-girl p {
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 color:#696969;
 text-align: justify;
 }
.pal-girl ul li a {
 color:#1c6b7f;
 text-decoration: none;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 12px;
 }
.pal-girl ul li a:hover{
 color:#FFF;
}
.pal-girl ul li:hover{
 cursor: crosshair;
 background-color: #0e83a0;
 color: #FFF;
 }
/*End footer style*/

وكذا يكون لديك قالب فوتر بتقنية الـ Css جميل وانيق وسريَع وله فوائد كثيره وعديده اتمنى ان يكون الموضوع حاز على رضاكم وان شاء الله الاضافات وتعديلات القوالب النادره جدا سوف يتم اضافتها في القسم لكم مني ارق واجمل تحيه مكلله بالورود

 


http://www.traidnt.net/vb/traidnt1572531/