كيف استطيع اظهار قائمة متسلسلة أفقيا ؟

**apitos** · 03-02-2009

السلام عليكم،

كيف استطيع اظهار قائمة متسلسلة OL افقيا ؟

يحيث تظهر هكذا : 1 2 3

بدلا من :

1
2
3

لأني جربت الخاصية : display : inline ولم تنجح معي.

شكراً.

**مصطفى فرغلى** · 04-02-2009

كود PHP:


<style type="text/css">
ul.vlist li {
    float:right
}
</style>
<ul class="vlist">
<li>Google</li>
<li>YahOO</li>
<li>Microsoft</li>
</ul>

**مسدار** · 04-02-2009

كود PHP:


ul{
    text-decoration: none;
}
li {
   display: inline;
}
<ul>
<li>Google</li>
<li>YahOO</li>
<li>Microsoft</li>
</ul>

**apitos** · 05-02-2009

شكرا لكما.

ولكن لماذا تختفي أرقام الترتيب ؟

**مسدار** · 05-02-2009

المشاركة الأصلية كتبت بواسطة apitos مشاهدة المشاركة

شكرا لكما.

ولكن لماذا تختفي أرقام الترتيب ؟

حول <ul></ul> إلى <ol></ol>
حتى تتحول إلى أرقام بدلاً من bullets

**Mohamed Amin** · 05-02-2009

هذه تعمل على الفايرفوكس فقط لم أجد ما يعمل على الإكسبلورر بعد

كود:

 
<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>

**مسدار** · 05-02-2009

المشاركة الأصلية كتبت بواسطة Mohamed Amin مشاهدة المشاركة

هذه تعمل على الفايرفوكس فقط لم أجد ما يعمل على الإكسبلورر بعد

كود:

 
<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>

استخدم 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>

راجع الصورة بالمرفقات ضعها بملف الصور

**apitos** · 06-02-2009

شكرا لك أخي محمد أمين على المساهمة في الرد.

أي مسدار :

أردت استعمال قائمة الـ <ol> حتى احصل على أرقام امام كلمات الخطوة النشطة.

ولكن بما أن الأرقام لا تظهر فيمكنني أن استعمل مكانها - كما اشرت اليه سلفا - صور لأرقام واستبدل <ol> بـ <ul>.

ولكن المرفق لا يظهر عندي ثم أني احتاج الى ارقام باللون الرمادي ان امكن.

ربما سبب الـ IE 5.5 الذي استعمله الآن مع Win ME

شكراً.

الكود بالمرفقات

**مسدار** · 06-02-2009

المشاركة الأصلية كتبت بواسطة apitos مشاهدة المشاركة

شكرا لك أخي محمد أمين على المساهمة في الرد.

أي مسدار :

أردت استعمال قائمة الـ <ol> حتى احصل على أرقام امام كلمات الخطوة النشطة.

ولكن بما أن الأرقام لا تظهر فيمكنني أن استعمل مكانها - كما اشرت اليه سلفا - صور لأرقام واستبدل <ol> بـ <ul>.

ولكن المرفق لا يظهر عندي ثم أني احتاج الى ارقام باللون الرمادي ان امكن.

ربما سبب الـ IE 5.5 الذي استعمله الآن مع Win ME

شكراً.

الكود بالمرفقات

أخي
الصورة بالمرفقات
و هي عبارة عن صورة صغيرة جدا
آآآآد حبة العدس هههههههههههه
نزلها في فولدر images
و حا تشتغل على طول
أو أعمل واحدة جديدة بالفوتوشوب
أو دور على واحدة جاهزة في الانترنت للارقام

**apitos** · 06-02-2009

على واحدة جاهزة في الانترنت للارقام

فعلت مرارا ولم احصل على شيء للأسف !!

**Mohamed Amin** · 06-02-2009

حسنا اذا قررت الإستعاضة بالأيقونات عن الأرقام ...
أنصحك باستخدام background-image ل ال(li)
ولا تستعمل list-style-image

الأول أفضل فى التحكم بكثير ..
ويمكننى إضافة مثال كود إذا أردت

**apitos** · 06-02-2009

مرحبا أخي محمد،

تفضل بالمثال مشكوراً.

**Mohamed Amin** · 07-02-2009

لو تستخدم ال 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/>

**apitos** · 07-02-2009

المشاركة الأصلية كتبت بواسطة Mohamed Amin مشاهدة المشاركة

لو تستخدم ال 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/>

شكرا لك اخي محمد.

انا فعلا استخدم الدريم ويفر النسخة 8 ولكن لا اتقنه جيدا حتى استطيع التحكم بالـ background-position و الـ padding و الـ margin.

- فهل من توضيح على ذلك ان امكن ؟

- لماذا لم تستعمل transparence كما في مثال الأخ مسدار ؟

لأن صور الـ png تظهر بخلفيات رمادية في IE6.

شكراً.

**Mohamed Amin** · 07-02-2009

يمكنك استبدال الصورة بأى امتداد تريده .. ولكن أنصحك بعدم الإهتمام ب IE6
وهناك وسائل لتخطى مشكلة الtranserancy
هنا عدة طرق للتغلب على تلك المشاكل
اتكلم
إذا لاحظت هناك فى هذا السطر
background: url(accept.png) no-repeat 3px;
القيمة 3px
معناها 3px أفقى ولو وضعت قيمة بجوارها ستكون قيمة على المحور الرأسى بالسالب أو بالموجب

الموضوع: كيف استطيع اظهار قائمة متسلسلة أفقيا ؟

أدوات الموضوع

بحث في الموضوع

كيف استطيع اظهار قائمة متسلسلة أفقيا ؟

المواضيع المتشابهه

لا استطيع الدخول الى لوحة تحكم قائمة البريد - عاجل يرجال المساعدة!!!!!!!!!!!!!!!!!

الحاجة أم الإختراع ( 11 ) : نقل ملفات متسلسلة من موقع لآخر !!

سكربت جافا يعكس الصورة أفقيا أو عموديا

الي خبراء النيوك لا استطيع دخول المنتدى ولا قائمة الاعضاء

ضوابط المشاركة