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

apitos · 03-02-2009, 10:36 PM

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

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

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

بدلا من :

1
2
3

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

شكراً.

مصطفى فرغلى · 04-02-2009, 09:38 AM

كود 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, 10:42 AM

كود PHP:

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

apitos · 05-02-2009, 07:03 PM

شكرا لكما.

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

مسدار · 05-02-2009, 08:50 PM

إقتباس:

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

شكرا لكما.

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

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

Mohamed Amin · 05-02-2009, 10:37 PM

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

كود:

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

مسدار · 06-02-2009, 12:26 AM

إقتباس:

المشاركة الأصلية بواسطة 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 · 03:17 AM

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

أي مسدار :

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

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

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

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

شكراً.

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

مسدار · 06-02-2009, 03:22 AM

إقتباس:

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

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

أي مسدار :

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

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

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

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

شكراً.

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

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

apitos · 06-02-2009, 03:29 AM

إقتباس:

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

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

Mohamed Amin · 06-02-2009, 05:11 AM

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

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

apitos · 06-02-2009, 11:53 PM

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

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

Mohamed Amin · 07-02-2009, 02:47 AM

لو تستخدم ال 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 · 04:50 AM

إقتباس:

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

لو تستخدم ال DreamWeaver كمنصة عمل ستجد التحكم سهل بالbackground position
والpadding وال margins
هذا افضل بكثير من الlist bullets والتى تكاد أن تكون منعدمة التحكم وقد تفسد التصميم
تحياتى

كود:

</head> <style type="text/css">  </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, 03:12 PM

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

apitos · 09-02-2009, 03:29 PM

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