منتدى إماراتي منوع يحتوي على عدة أقسام جديدة و منوعة لإرضاء كل الأذواق
 
باب بيتنا  الرئيسيةالرئيسية  س .و .جس .و .ج  بحـثبحـث  اضف بن كودك  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

 شرح وضع الروابط على الهيدر بتقنية css

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
نفر جديد
|| عضو متوآصَلْ ~
 || عضو متوآصَلْ  ~
avatar

• أنـٍُا • أنـٍُا : ذكر
• مشآرڪَآتيّ • مشآرڪَآتيّ : 172
• آلنقآط : 390
• تَسجيليّ : 28/09/2012
• اوسمتي

مُساهمةموضوع: شرح وضع الروابط على الهيدر بتقنية css    الجمعة أكتوبر 19, 2012 5:50 am


شرح وضع الروابط على الهيدر بتقنية css


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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

-بطريقه قائمه ويتم اخفاء النصوص وتفعيل روابط علي الصورة
وهذه الطريقه للروابط المتجانبه بجانب بعضها كمثل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

بطريقه روابط منفصله ويتم اعطاء كل رابط كلاس خاص به مع position خاص
وهذه الطريقه للازرار المتفرقه عن بعضها كمثل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الطريقه الاولي :

بعد توزيع الهيدر ستكون هذه اكواد الصناديق

كود PHP:

<div id="head">
<
div class="hed-right">div>
<
div class="hed-left">div>
div>


3 صناديق = هيدر كامل + هيدر يمين+ هيدر يسار
تمام
بالهيدر المثال الجهه اليمين من الهيدر بها اربع ازرار بجانب بعضها

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وهذا الصندوق الخاص بالصورة

كود PHP:

<div class="hed-right">div>


وخواص css الخاصه به


كود PHP:

.hed-right {
background-image: url('images/jo_05.gif');
background-repeat: no-repeat;
height: 184px;
width: 340px;
float: right;
position: relative;
}
الخواص المعتادين عليها بالتوزيع مع زياده خاصيه

كود PHP:

position: relative;
لاستطيع التحكم بمحاذاه ما ساضعه بداخله
الان سادرج بداخله div اخر وبداخله قائمه باربع بنود لان الصورة بها 4 ازرار

كود PHP:

<div class="hed-right">
<
div id="lest-right">
<
ul>
<
li>li>
<
li>li>
<
li>li>
<
li>li>
ul>
div>
div>
واعطيت الصندوق المحيط بالقائمه id خاص

كود PHP:

id="lest-right"


ووضعت له خواص

كود PHP:

#lest-right {
width: 100%;
position: absolute;
top: 150px;
}
العرض 100% سياخد كل عرض الصورة اليمين للهيدر
position: absolute; ليتم اعتماد محاذاته بناء علي الصندوق الام وهو صاحب كلاس .hed-right ..
قمت باعطائه position: relative; لهذا السبب .

الخاصيه top: 150px; ليأخذ محاذاه من الاعلي بمقدار 150 بكسل ويكون فوق الازرار تماما .


الان ناتي لخواص ul القائمه الموجوده بداخل #lest-right

هذه خواص ul توضع هكذا

كود PHP:

#lest-right ul {
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0px;
}
خاصيه list-style-type: none ليتم اخفاء بنود القائمه وجعلها بلا علامات جانبيه
العرض 100% لياخد كل عرض الجهه اليمين للهيدر
margin & padding اصفار بلا قيم لتجنب الفراغات بين البنود li

ناتي للبنود li

كود PHP:

<li>li>
<
li>li>
<
li>li>
<
li>li>


قم بادخال الروابط a ثم ادخال span بداخل الروابط مع كتابه الروابط والنصوص للازرار
محتاجين 4 ازرار = رئيسيه وتحكم وتعليمات وخروج


كود PHP:


<li><a href="hh"><span>homespan>a>li>
<
li><a href="cc"><span>cpanelspan>a>li>
<
li><a href="rr"><span>faqspan>a>li>
<
li><a href="oo"><span>outspan>a>li>
هذه البنود بالروابط بداخلهم span محيط بالنصوص

بالنهايه سيكون الصندوق اليمين للهيدر كامل هكذا


كود PHP:

<div class="hed-right">
<
div id="lest-right">
<
ul>
<
li><a href="hh"><span>homespan>a>li>
<
li><a href="cc"><span>cpanelspan>a>li>
<
li><a href="rr"><span>faqspan>a>li>
<
li><a href="oo"><span>outspan>a>li>
ul>
div>
div>
ناتي لخصائص البنود li

كود PHP:

#lest-right ul li {
width: 80px;
float: right;
height: 30px;
}
العرض 80 بكسل تقريبا مثل عرض الزر علي الصورة
float محاذاه لليمين للازرار جميعها
الارتفاع للزر تقريبا 30 بكسل .

خصائص الروابط a

كود PHP:


#lest-right ul li a {
display: block;
width: 80px;
height: 30px;
}
ارتفاع وعرض نفس li بنفس مساحه الزر تقريبا
مع طريقه عرض display: block; ليتم تحديد عرض وارتفاع للرابط ليمليء فوق الزر كله ...

اخر خاصيه بالطريقه الاولي هي للوسم span لاخفاء النصوص المدرجه علي الروابط حتي لا تظهر نصوص علي الصورة .

كود PHP:

#head span {
display:none;
}
يتم اخفاء ما بداخل الوسم بهذه الخاصيه
لاحظو اعطيت span للهيدر كله #head وليس للصندوق اليمين حتي لا اضطر لاضافته مرتين مره للصندوق الايمن ومره لليسار ...

اتمني ان تكون الطريقه مفهومه وغير مبهمه
انتهت الطريقه الاولي ..

الطريقه التانيه

بنفس الشغل ولاكن كل رابط سيكون مستقل بنفسه كلاس خاص به +position خاص ليتم تحديد مكانه فوق الصورة .

التطبيق علي الصورة بالجهه اليسار

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

اعطي صندوق الهيدر بالجهه اليسري خاصيه

كود PHP:

position: relative;
هذا صندوق الجهه اليسري من الهيدر

كود PHP:

<div class="hed-left">
div>
لأفترض سأضع رابط علي زر راسلني
قم بادخال رابط a بداخله span واكتب نص بداخل ال span

كود PHP:

<div class="hed-left">
<
a class="contact" href="contact.php"><span>راسلنيspan>a>
div>
اعطيت الرابط كلاس خاص به لاعطائه خواص مستقله
الان الرابط بداخل ال div بالجهه اليسري
قم باعطائه هذه الخواص

كود PHP:

a.contact {
width: 70px;
height: 40px;
display: block;
position: absolute;
top: 10px;
left: 10px;
}
الارتفاع والعرض 70×40 بنفس حجم الزر تقريبا علي الصورة
العرض block ليتم تحديد ارتفاع وعرض الرابط
position: absolute; لياخد الرابط محاذاته من الصندوق الام صاحب الخاصيه position: relative هو الـ div left للهيدر.
top: 10px; المحاذاه من الاعلي للزر يبعد عن اعلي اليسار بمقدار 10 بكسل = 10 بكسل المسافه بين اخر الزر واعلي الهيدر
left: 10px; محاذاه 10 بكسل من اليسار هي المسافه بين الزر واخر الهيدر ..

بالطريقه الاولي وضعت خاصيه الاخفاء للوسم span فلا داعي لاعطائه مره اخري فالتطبيق للهيدر كـكل
تقريبا انتهت الطريقه ولاكن زياده ساضع جميع الاكواد للاربع ازرار بالجهه اليسري
الجهه اليسري كتوزيع

كود PHP:

<div class="hed-left">
<
a class="contact" href="contact.php"><span>راسلنيspan>a>
<
a class="regestr" href="rrrrr.php"><span>تسجيلspan>a>
<
a class="options" href="sss.php"><span>خياراتspan>a>
<
a class="up" href="link.php"><span>مركزspan>a>
div>
الاربع روابط للازرار كل رابط بكلاس خاص لياخذ محاذاه مختلفه عن الاخر

خواص css للازرار الاربعه

كود PHP:

a.contact {
width: 70px;
height: 40px;
display: block;
position: absolute;
top: 10px;
left: 10px;
}
a.regestr {
width: 70px;
height: 40px;
display: block;
position: absolute;
top: 110px;
left: 15px;
}
a.options {
width: 70px;
height: 40px;
display: block;
position: absolute;
top: 60px;
left: 90px;
}
a.up {
width: 70px;
height: 40px;
display: block;
position: absolute;
top: 10px;
left: 170px;
}
نفس الخواص ولاكن الاختلاف فقط ف position لكل زر لياخذ كل رابط مكانه فوق الازرار ..
انتهي الشرح للطريقتين واتمني ان تكون الفكره وصلت !

منقول للأفادة
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
شرح وضع الروابط على الهيدر بتقنية css
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات شمعة الامارات :: °•| {الأقسام التجاريـﮧ |•° :: تطوير المواقع-
انتقل الى: