بناء على طلب بعض الاخوه
هذا فوتر 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 ونضيف الكود التالي في اخره
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*/لم يتبقى سوى تعدي الروابط الى مايهم موقعك
وتعديل روابط الصور
الصور مرفقه
تقبلو تحياتي
تحياتي
\
