السلام عليكم،
كيف استطيع اظهار قائمة متسلسلة OL افقيا ؟
يحيث تظهر هكذا : 1 2 3
بدلا من :
1
2
3
لأني جربت الخاصية : display : inline ولم تنجح معي.
شكراً.
السلام عليكم،
كيف استطيع اظهار قائمة متسلسلة OL افقيا ؟
يحيث تظهر هكذا : 1 2 3
بدلا من :
1
2
3
لأني جربت الخاصية : display : inline ولم تنجح معي.
شكراً.
كود PHP:
<style type="text/css">
ul.vlist li {
float:right
}
</style>
<ul class="vlist">
<li>Google</li>
<li>YahOO</li>
<li>Microsoft</li>
</ul>
__________________
Keepondev | مدونه شديد التخصص فى الجافاسكربت
جافاسكربت الموجهه بالكائنات | أنماط تصميم جافاسكربت
كود PHP:
ul{
text-decoration: none;
}
li {
display: inline;
}
<ul>
<li>Google</li>
<li>YahOO</li>
<li>Microsoft</li>
</ul>
__________________
شبكة ومنتديات مسدار
شكرا لكما.
ولكن لماذا تختفي أرقام الترتيب ؟
حول <ul></ul> إلى <ol></ol>
حتى تتحول إلى أرقام بدلاً من bullets
__________________
شبكة ومنتديات مسدار
هذه تعمل على الفايرفوكس فقط لم أجد ما يعمل على الإكسبلورر بعد
كود:<style type="text/css"> * {margin:0;padding: 0;} #decimal li {float:left; margin: 0 10px 0 30px;} </style> <ol id="decimal"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>
__________________
Mohamed Amin
Ui & Web Designer
graphic_designer2007#hotmail.com
استخدم inline هي افضل من float
عندما تكون القائمة أفقية ستختفي علامات الترقيم
لذلك يتم وضع العلامات كخلفيات صور.
كما يلي :
راجع الصورة بالمرفقات ضعها بملف الصوركود PHP:
<style type="text/css">
* {margin:0;padding: 0;}
#decimal li{
display: inline;
margin: 5px;
padding: 0 10px 0 30px;
background:transparent url(images/img09.gif) no-repeat left center;
}
</style>
<ol id="decimal">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
__________________
شبكة ومنتديات مسدار
شكرا لك أخي محمد أمين على المساهمة في الرد.
أي مسدار :
أردت استعمال قائمة الـ <ol> حتى احصل على أرقام امام كلمات الخطوة النشطة.
ولكن بما أن الأرقام لا تظهر فيمكنني أن استعمل مكانها - كما اشرت اليه سلفا - صور لأرقام واستبدل <ol> بـ <ul>.
ولكن المرفق لا يظهر عندي ثم أني احتاج الى ارقام باللون الرمادي ان امكن.
ربما سبب الـ IE 5.5 الذي استعمله الآن مع Win ME
شكراً.
الكود بالمرفقات
التعديل الأخير تم بواسطة apitos ; 06-02-2009 الساعة 02:17 AM
أخي
الصورة بالمرفقات
و هي عبارة عن صورة صغيرة جدا
آآآآد حبة العدس هههههههههههه
نزلها في فولدر images
و حا تشتغل على طول
أو أعمل واحدة جديدة بالفوتوشوب
أو دور على واحدة جاهزة في الانترنت للارقام
__________________
شبكة ومنتديات مسدار
فعلت مرارا ولم احصل على شيء للأسف !!على واحدة جاهزة في الانترنت للارقام
حسنا اذا قررت الإستعاضة بالأيقونات عن الأرقام ...
أنصحك باستخدام background-image ل ال(li)
ولا تستعمل list-style-image
الأول أفضل فى التحكم بكثير ..
ويمكننى إضافة مثال كود إذا أردت
__________________
Mohamed Amin
Ui & Web Designer
graphic_designer2007#hotmail.com
مرحبا أخي محمد،
تفضل بالمثال مشكوراً.
لو تستخدم ال DreamWeaver كمنصة عمل ستجد التحكم سهل بالbackground position
والpadding وال margins
هذا افضل بكثير من الlist bullets والتى تكاد أن تكون منعدمة التحكم وقد تفسد التصميم
تحياتى
كود:</head> <style type="text/css"> <!-- .nav li { display: inline; background: url(accept.png) no-repeat 3px; margin: 5px; padding:10px 0 10px 20px; } --> </style> </head> <body> <ul class="nav"> <li>Home</li> <li>Services</li> <li>Contact</li> </ul> <body/>
__________________
Mohamed Amin
Ui & Web Designer
graphic_designer2007#hotmail.com
شكرا لك اخي محمد.
انا فعلا استخدم الدريم ويفر النسخة 8 ولكن لا اتقنه جيدا حتى استطيع التحكم بالـ background-position و الـ padding و الـ margin.
- فهل من توضيح على ذلك ان امكن ؟
- لماذا لم تستعمل transparence كما في مثال الأخ مسدار ؟
لأن صور الـ png تظهر بخلفيات رمادية في IE6.
شكراً.
التعديل الأخير تم بواسطة apitos ; 07-02-2009 الساعة 03:50 AM
يمكنك استبدال الصورة بأى امتداد تريده .. ولكن أنصحك بعدم الإهتمام ب IE6
وهناك وسائل لتخطى مشكلة الtranserancy
هنا عدة طرق للتغلب على تلك المشاكل
اتكلم
إذا لاحظت هناك فى هذا السطر
background: url(accept.png) no-repeat 3px;
القيمة 3px
معناها 3px أفقى ولو وضعت قيمة بجوارها ستكون قيمة على المحور الرأسى بالسالب أو بالموجب
__________________
Mohamed Amin
Ui & Web Designer
graphic_designer2007#hotmail.com