قوائم css أو جافا من يساعدني فيها !

Perfect · 03-07-2007, 11:26 PM

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

الإداره الجديده متميزه وماشاء الله عليها عيني عليها كولد cold

محترفي لغات البرمجه والتطوير

أحتاج منكم مساعده حيث في موقعي وأنا اسويه احتجت اسوي قوائم بنوع معين وشفتها بكذا موقع بوريكم موقع منها
http://www.alquma.net/
القائمه اللي على اليمين أحتاج شبيه لها حيث أستطيع وضع background وبمرور الماوس تتغير الخلفية

أنتظركم يا أحبه

محمد الثقفي · 04-07-2007, 12:00 PM

وعليكم السلام

راجع درس الاخ كتوم هنا
http://www.swalif.net/softs/swalif44/softs193292/

وهذا مثال للعمل

http://www.dev4arab.org/ca2oom/example/fast-rollovers

محمد

أحمد عبدالمنعم · 04-07-2007, 03:33 PM

مرحباا

هذه تسمى تأثير hover أو التأرجح على الأزار و القوائم

وسهل جدا ان تصعنها على اى قائمة او زر بواسطة الأمر التالي _ مثال :

كود HTML:

a:hover {
	color: #FFF;
	background-color: #005F9F;
}

وذلك بعد الإنتهاء من ضبط القائمة نفسها بشكل يناسب موقعك ..

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

القائمة ul li :

كود:

<ul>
    <li><a href="index.html">الرئيسية</a></li>
    <li><a href="gallery.html">معرض الصور</a></li>
    <li><a href="products.html">قائمة المنتجات</a></li>
	<li><a href="about.html">عن الموقع</a></li>
</ul>

css :

كود HTML:

ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 150px;
	border-bottom: 1px solid #5D76EF;
}
ul a {
	text-decoration: none;
	display: block;
	width: 138px;
	padding: 5px;
	border-top: 1px solid #5D76EF;
	border-right: 1px solid #5D76EF;
	border-bottom: 0px solid #5D76EF;
	border-left: 1px solid #5D76EF;
}
ul a:link, ul a:visited  {
	color: #0E2E6B;
	background-color: #DDE8FC;
	background-image: url(button-b.gif);
	background-repeat: repeat-x;
	background-position: 0px top;
}
ul a:hover {
	color: #FFF;
	background-color: #005F9F;
	background-image: none;
}

خلفية التدرج اللونى تم وضعها في ( ul a:link, ul a:visited ) والإستغناء عنها في ( ul a:hover )
نوع الخط يمكن ان تغيرة من الجسم body او تضيفة على العنصر a

لو حبيت تزود العرض او تقلله من العنصر ul كما في المثال العرض 150 اما في الوصلات فتم طرح منه قيمة padding يمين ويسار 150 - 10 = 140 وكذلك طرح قيمة الحدود 2 بكسل - 140 = 138 بكسل

ودا كله علشان تظهر القائمة بنفس الشكل على المتصفح التعيس Internet Explorer

والنتيجة //

تحيتي ،،

Perfect · 04-07-2007, 04:50 PM

ماشاء الله عليكم هذا هو المطلوب
الأخ كتوم اصبت كبد الحقيقه لما وضعت الرد الأخير والأخوان الأفاضل ماقصرو فوق
الله يزوجك يا MohDesign :d
الأخ كتوم الصوره وين يكون مسارها حاولت اضعها ولكن ماطلعت معاي

رفعتها لمجلد image رفعتها على الملفات رأساً سويت كذا طريقه وماظهرك الصور ظهرت المربعات بوتأثير الماوس س بدون خلفيه

أحمد عبدالمنعم · 04-07-2007, 06:16 PM

العفو أخي

والصورة توضع بأي مكان فهى مثل بقيه صور الموقع ـ ضعها على نفس مسار الصور التى تظهر
أو يمكن ان تضع الرابط كامل هكذا

كود:

http://www.yoursite.com/images/button-b.gif

تحيتي ،،

Perfect · 04-07-2007, 08:36 PM

woooow ضبطت ميه ميه وخمستعش زياده
ماقصرت والله
بقى هل أستطيع عمل قوائم متفرعه منها ! بنفس هالكود ؟

أحمد عبدالمنعم · 04-07-2007, 10:51 PM

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

أضف هذا الكود الى css

كود:

ul li {
	position: relative;
}
ul li ul {
	list-style: none;
	position: absolute;
	right: 149px;
	top: 0;
	display: none;
	width: 150px;
}
ul li:hover ul { display: block; }

وبعدها تعدل القائمة وتضع القوائم الفرعية بهذا الشكل

كود:

<ul>
    <li><a href="index.html">الرئيسية</a></li>
    <li><a href="gallery.html">معرض الصور</a>
	<ul>
        <li><a href="gallery1.html">قائمة الصور 1</a></li>
        <li><a href="gallery2.html">قائمة الصور 2</a></li>
        <li><a href="gallery3.html">قائمة الصور 3</a></li>
        <li><a href="gallery4.html">قائمة الصور 4</a></li>
    </ul>
	</li>
    <li><a href="products.html">قائمة المنتجات</a>
	<ul>
        <li><a href="gallery1.html">قائمة المنتجات 1</a></li>
        <li><a href="gallery2.html">قائمة المنتجات 2</a></li>
        <li><a href="gallery3.html">قائمة المنتجات 3</a></li>
        <li><a href="gallery4.html">قائمة المنتجات 4</a></li>
    </ul>
	</li>
	<li><a href="about.html">عن الموقع</a></li>
</ul>

والنتيجة //

تحيتي ،،

Perfect · 04-07-2007, 11:41 PM

ياخي والله إنك أبدعت
الله يطول بعمرك يا كتوم ويرزقك من حيث لا تحتسب
(f)

Perfect · 06-07-2007, 02:49 AM

من جديد نعود نحاول أن نستفيد من الأخ الخبير في css كتوم
حاولت أخلي النص متوسط

كود:

ul {
	font-family: Microsoft Sans Serif;
	font-size: 8pt;
	text-align: center;
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 150px;
	border-bottom: 1px solid #5D76EF;
}

بس ما نفعش

أحمد عبدالمنعم · 06-07-2007, 04:12 PM

مرحبااا أخي Perfect

لن يصلح التوسيط لانك أضفته الى العنصر ul كما انك كذلك اضفت نوع الخط اليه
وانا ذكرت لك انه لو اردت التحكم في الخط وتغير نوعه يكون ذلك من العنصر a فقط فـ منه تضع نوع الخط وتوسطة هكذا ..

كود:

ul a {
	text-decoration: none;
	display: block;
	width: 138px;
	padding: 5px;
	border-top: 1px solid #0E2E6B;
	border-right: 1px solid #0E2E6B;
	border-bottom: 0px solid #0E2E6B;
	border-left: 1px solid #0E2E6B;
	text-align: center;
	font-family: "Microsoft Sans Serif";
	font-size: 8pt;
}

تحيتي ،،

Perfect · 06-07-2007, 05:45 PM

عزيزيca2oom
ياليت بريدك للمراسله في شي خاص احتاجك فيه خارج هذا الموضوع

Perfect · 06-07-2007, 06:46 PM

العملية إلى الآن ناجحة ولكن بدأت تحدث مشاكل
القوائم شغاله تمام forefox لكن مشكله في internet expoler مايظهر القائمه المتفرعه

أحمد عبدالمنعم · 06-07-2007, 06:50 PM

بريدى بإسم ca2oom على hotmail

اما القائمة أنا جربتها على IE 7 وظهرت بدون مشاكل وكذلك جربتها على جميع المتصفحات الأخرى لدي وتعمل بدون مشاكل ابداً ( Opera , Firefox , Avant , Maxthon )

ربما تستخدم نسخه قديمة من IE وهنا تظهر مشكلة لانه لا يدعم CSS بشكل صحيح

x_yousef_x · 07-07-2007, 01:51 AM

السلام عليكم

اخوي الكريم ليه لم تجرب برنامج فايروركس

يسوي لك قوائم مسندلة براحة تامه

وبشكل هذا

http://www.traidnt.net/vb/showthread.php?t=372848

تحياتي

المواضيع المشابهه
الموضوع	كاتب الموضوع	القسم	الردود	آخر مشاركة
ممكن قوائم بريديه فيها ميلات بريدية كتيرر او عناوين بريدية عربية؟؟	4planner.com	الويب والويب 2.0 والـ Semantic Web	1	24-06-2004 06:34 AM
CSS بسهولة (2)	سردال	الويب والويب 2.0 والـ Semantic Web	16	11-03-2004 04:28 AM
فضل العشر الأواخر وليلة القدر( كل ما تريده حول الموضوع هنا )	السائل	القسم العام	3	06-12-2001 01:00 AM
قوائم البريديه ومجموعات الاخبار وكيفيه التسجيل والمشاركه فيها	سلفادور	القسم العام	0	03-06-2000 09:59 PM

أدوات الموضوع
مشاهدة نسخة مطبوعة إرسال هذه الصفحة