منتدى استراحات زايد - [ html] أنشاء قائمة أفقية مميزة ورائعة

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

وقبل كل شيء يجب عليك ان تتعلم لغة html وايضا css لكي تكون خبرة وايضا من اجل حل مشاكل واخطاء التي تقع فيها

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

والان كيفية وضع القائمة لدينا أفقيا من خلال CSS؟

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

الكود الدي ساضعه الان هو من اجل جعل الاقسام في سطر واحد

خاص بي

/* Je sélectionne les du menu horizontal */
ul#menu_horizontal li {
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
}
ul#menu_horizontal {
list-style-type : none; /* Car sinon les puces se placent n'importe où */
}

والان كيف تغير مكان اي قسم في اي جهة تريده يمين او http://www.traidnt.net/vb/images/img...014/09/817.png

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

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

اليك شكل

تغير بسيط فقط

هدا كود css لنجاح عملية

ul#menu_horizontal { /*Ici , c'est ma configuration, à vous de la changer */

width : 600px;

height : 25px;

list-style-type : none; /* Car sinon les puces se placent n'importe où */

}

ul#menu_horizontal li {

padding : 0 0.5em; /* Pour espacer les boutons entre eux */

}

li.bouton_gauche {

float : left;

}

li.bouton_droite {

float : right;

}

صورة عن شكل

http://www.traidnt.net/vb/images/img...014/09/818.png
والان كيف وضع ايقونات بجانب اقسام

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

فقط ابحت عن طول صورة لكل قسم وتكون بصيغة .png وضعها اليك شكل كود نهائي

http://vb.ma7room.com/accueil.pngAccueil
http://vb.ma7room.com/news.pngNews
http://vb.ma7room.com/livredor.pngLivre d'or
http://vb.ma7room.com/team.pngAdmin
http://vb.ma7room.com/mp.pngContact

الان نظيف كود css لكي يظهر شكل حقيقي والاخير للقائمة رائسية

ul#menu_horizontal {

width : 600px;

height : 30px;

margin : 2em 0 0 0;

padding : 0;

background-color : #f4f9fd;

border : 1px dashed black;

list-style-type : none;

}

ul#menu_horizontal li {

padding : 0 0.5em;

line-height : 30px;

}

ul#menu_horizontal li.bouton_gauche {

float : left;

border-right : 1px dashed black;

}

ul#menu_horizontal li.bouton_droite {

float : right;

border-left : 1px dashed black;

}

ul#menu_horizontal a {

color : black;

text-decoration : none;

padding : 0 0.5em;

font : 0.8em "Trebuchet MS";

}

ul#menu_horizontal a:hover { text-decoration : underline; }

ul#menu_horizontal a img {

border : none;

padding : 0 0.3em;

}

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