السلام عليكم
بناء على طلب بعض الاخوه

هذا فوتر css
طبعا هذا فوتر لقيته في ترايدنت وجبته لكم

هذا شكل الفوتر




حسنا ، لآ بأس بـِه ،،

نأتي الان لطريقة التركيب بالمنتدى ،

أولا نذهب الى قالب الفوتر ، ونضع هذا الكود بنهاية القالب ،

<!--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 ونضيف الكود التالي في اخره

#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*/

لم يتبقى سوى تعدي الروابط الى مايهم موقعك
وتعديل روابط الصور

الصور مرفقه

تقبلو تحياتي