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

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

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

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

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

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

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

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

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

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

كود PHP:

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

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

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

كود PHP:

وخواص 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:

واعطيت الصندوق المحيط بالقائمه 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:

قم بادخال الروابط 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:

لأفترض سأضع رابط علي زر راسلني
قم بادخال رابط 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 لكل زر لياخذ كل رابط مكانه فوق الازرار ..
انتهي الشرح للطريقتين واتمني ان تكون الفكره وصلت !

منقول للأفادة

» آخر المواضيع بطريقة مميزة في قائمة المنتديات - الهيدر/الفوتر
» иєω sτyℓє fяσм sнαqωα بتقنية ČŚѕ للنسخ 3.8
» برنامج NuxTools v1.3.0 لزخرفة الكلام بثلاث اشكال واختصار الروابط
» سيارة بيجو ثلاثه عجل بتقنية بي أم دبليو الألمانية bmw