أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

منتدى شروحات ودروس منتديات PBBoard

فوتر css جميل وبسيط

الصفحة 2 من 3

الأخيرة

: فوتر css جميل وبسيط

23-11-2010 04:30 مساءً

sinan

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

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

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

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

الصور مرفقه

تقبلو تحياتي

: تم تحرير الموضوع بواسطة :sinan بتاريخ: 23-11-2010 04:31 مساءً

  link-footer.png تحميل png مرات التحميل :(28)
الحجم :(0.618) KB

  plus-li.png تحميل png مرات التحميل :(28)
الحجم :(1.383) KB

  stick-footer.png تحميل png مرات التحميل :(23)
الحجم :(0.618) KB

: فوتر css جميل وبسيط

23-11-2010 05:03 مساءً [1]

larini

بارك الله فيك

فوتر css جميل وبسيط

: فوتر css جميل وبسيط

23-11-2010 05:35 مساءً [2]

sinan

المشاركة الأصلية كتبت بواسطة: larini
بارك الله فيك

شكرا لمرورك
تقبل تحياتي

: فوتر css جميل وبسيط

23-11-2010 05:49 مساءً [3]

cherire

رااااائع

: فوتر css جميل وبسيط

23-11-2010 05:54 مساءً [4]

sinan

المشاركة الأصلية كتبت بواسطة: g-scripts.com رااااائع

: فوتر css جميل وبسيط

23-11-2010 05:57 مساءً [5]

cherire

ارجووك تابع طلبي

https://pbboard.info/forums/t3336

فوتر css جميل وبسيط

: فوتر css جميل وبسيط

23-11-2010 06:04 مساءً [6]

sinan

المشاركة الأصلية كتبت بواسطة: g-scripts.com ارجووك تابع طلبي

https://pbboard.info/forums/t3336

ان شاء الله تلاقي اعضاء يقبلون في العرض الي قدمته ويحولون لك الستايلات
تحياتي

: فوتر css جميل وبسيط

23-11-2010 07:01 مساءً [7]

محمد الصاوي

لن يعمل بشكل سليم الا في حالة استبدال images بـ {$image_path}

فبدلا من images/plus-li.png

نكتب {$image_path}/plus-li.png

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

تحياتي

: فوتر css جميل وبسيط

24-11-2010 04:32 مساءً [8]

sinan

المشاركة الأصلية كتبت بواسطة: محمد الصاوي لن يعمل بشكل سليم الا في حالة استبدال images بـ {$image_path}

فبدلا من images/plus-li.png

نكتب {$image_path}/plus-li.png

ارجو ان تقوم بالتعديل تحياتي

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

: فوتر css جميل وبسيط

24-11-2010 04:58 مساءً [9]

ابو عبد الله

جزاك الله خيرا

: فوتر css جميل وبسيط

24-11-2010 09:00 مساءً [10]

sinan

المشاركة الأصلية كتبت بواسطة: حسان جزاك الله خيرا

ويجزيك كل خير اخي العزيز
تقبل تحياتي

: فوتر css جميل وبسيط

25-11-2010 10:02 صباحاً [11]

G u e v a r a

تمت الاضافه والتقييم ++ فوتر css جميل وبسيط

http://www.my-groups.com/netlog

لكن لو سمحت توسطه فـ وسط الصفحه
<<~ اذا ما وضح قصدي شاهد نهايه الفوتر في موقعي فوتر css جميل وبسيط

\

ارق التحايا لك فوتر css جميل وبسيط

: فوتر css جميل وبسيط

25-11-2010 02:35 مساءً [12]

sinan

المشاركة الأصلية كتبت بواسطة: G u e v a r a تمت الاضافه والتقييم ++
http://www.my-groups.com/netlog

لكن لو سمحت توسطه فـ وسط الصفحه
<<~ اذا ما وضح قصدي شاهد نهايه الفوتر في موقعي \

ارق التحايا لك

استخدم هذا اضفت حقل جديد

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 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>

الصفحة 2 من 3

الأخيرة

المواضيع المتشابهه
عنوان الموضوع	الكاتب	الردود	الزوار	آخر رد
الحمد لله تم تثبيت المنتدى بشكل جميل	samaaegy	3	313	Soliman
أريد التحويل الى منتداكم الجميل	ohbrahim	1	245	ohbrahim
لدي رمز غوغل ادسنس لم اجد صفحة HTML المناسبة لوضع كود التحقق في نسختكم الجميلة 3.04	بوزاري	13	1309	بوزاري
كود بسيط مدتة 5 دقيق استماع تلاوة من القرآن الكريم بصوت جميل	BlackCat2014	0	440	BlackCat2014
كواد سورة الشرح بصوت خاشع جميل	BlackCat2014	0	343	BlackCat2014

الكلمات الدلالية

لا يوجد كلمات دلالية ..

« مَلَفْ [css] مَعْ اَلْشَرْحْ | درس ثاني في توزيع css ببرنامج دريمر لمرحله لأوله في توزيع للمبتدئين »

الساعة الآن 09:59 AM