ال CSS عدوة العربي بشكل غريب

**beshoo** · 26-02-2007

السلام عليكم .

اليكم الكود التالي :

كود HTML:

<html dir=rtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />

<style type="text/css">
    .commentslink {
	        border:dotted thin; 
		padding-bottom: 0;
		padding-left: 0;
		padding-right:20;
		padding-top:0;
		margin-right: 0;
		background-repeat: no-repeat;		
		background-image: url(http://getk2.com/wp-content/themes/k2/images/comment.png);
		background-position:right;
		
    }

</style>
</head>
<body>
	        <div align="center">
			<span class="commentslink">تحرير المقال</span><span> بالعربي</span>			
            </div>
</body>
</html>

هذا الكود اتمنى ان تعرضوه عندك . سوف ترون انه هناك ايقونة صغيرة وبجانبها كلمة تحرير
ولكن الكلام فوق الايقونة ويجب ان يكون بجانبه

الان في حال ازلنا ال dir=rtl تظهر النتيجة جيدة ولكن هذا لا يفيد في حال وجب وضع رمز ال DIR
الان انسى موضوع الرمز . اكتب اي جملة بعد تعملية اغلاق ال SPAN وشاهد النتيجة .....
يقولون اجعل موقعك قياسيا ... كيف والتقنية لا تدعم .

**بكسل مول** · 26-02-2007

اختلف معك في الراي عزيزي ..
الــ css تتعامل بشكل جميل مع اللغة العربية ولم اواجه حقيقة اي مشكلة معها .. فهي بحق تقنية رائعة بكل المقاييس

جرب هذا التعديل على الكود الخاص بك

كود HTML:

<html dir=rtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />

<style type="text/css">
    .commentslink {
	    border:thin dotted; 
		padding-left: 20;
		background-repeat: no-repeat;		
		background-image: url(http://getk2.com/wp-content/themes/k2/images/comment.png);
		background-position: right 50%;
		
    }

</style>
</head>
<body>
	        <div align="center">
			<span class="commentslink">تحرير المقال</span><span> بالعربي</span>
			 </div>
</body>
</html>

واخبرنا النتيجة

**beshoo** · 26-02-2007

ولكن ارجو فتحها على الفاير فوكس

**Flasher** · 26-02-2007

كود HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />

<style type="text/css">
	body {margin:0; direction:rtl}
	ul.menu { 
		margin:0 0 0 0;
		padding:0; list-style:none;
		

	}
	ul.menu li {  margin:0 ; padding-right:20px; float:right}
    ul.menu li.commentslink {
	    border:thin dotted; 
		background-repeat: no-repeat;		
		background-image: url([url]http://getk2.com/wp-content/themes/k2/images/comment.png[/url]);
		background-position: right 50%;
    }

	
	div.center { margin:0 auto ; width:30%}
</style>
</head>
<body>
			<div class="center" >
				<ul class="menu">
					<li class="commentslink">
					تحرير المقال
					</li>
					<li> بالعربي
					</li>
				</ul>
			</div>
			
</body>
</html>

لكن في الاكسبلورر التوسيط مايعمل ..

**Kasper** · 26-02-2007

report a bug

مع انة مالي في css كثير بس اكيد راح تكون مدعومة rtl بشكل كبير لانة اكتشفت ان العبرية تكتب من اليمين لليسار

(كاني جايب شيئ جديد

)

**Ksa Cool** · 26-02-2007

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

ممكن احد يفيدنا؟

http://www.mojaz.net/

**beshoo** · 27-02-2007

لا اريد ان استخدم ال UL اريد حصراال <span>

**محمد 902** · 27-02-2007

هلا أخوي بيشو

تفضل هذا التعديل والصورة بجنب النص

كود:

<html dir=rtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<style type="text/css">
<!--
#commentslink {
	height:16px;
	width:115px;
	display:table;
    }
	#commentslink .img{
	background:#fff url(comment.png) no-repeat right top;
	width:16px;
	height:16px;
	float:right;
	}
	#commentslink .txt{
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	color:#333333;
	font-size:12px;
	text-decoration:none;
	float:left;
	}
-->
</style>
</head>
<body>
			<div align="center">
	        <div id="commentslink">
			<div class="img"></div>
			<span class="txt">تحرير المقال بالعربي</span>			
            </div>
			</div>
</body>
</html>

وغير في رابط الصور ة ...
ونصيحة لو تخلي CSS مفصولة عن الصفحة يعني CSS في ملف خاص لها وتربطها بالصفحة أفضل بكثير .
وطبعاً الكود هذا يعمل بشكل ممتاز على متصفح firefox والأكسبلورا.
وتحيـاتي
محمد

**محمد 902** · 27-02-2007

وفيه طريقة ثـانية وهي المشهورة والمتعارف عليها بالنسبة لوضع صورة بجانب نص.

كود:

<html dir=rtl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<style type="text/css">
<!--
#commentslink {
	height:16px;
	width:121px;
	display:table;
    }
	#commentslink .img{
	background:#fff;
	width:16px;
	height:16px;
	float:right;
	margin:0px;
	padding:0px;
	}
	#commentslink .txt{
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	color:#333333;
	font-size:12px;
	float:left;
	margin:0px;
	padding:0px;
	}
-->
</style>
</head>
<body>
			<div align="center">
	        <div id="commentslink">
			<img src="comment.png" class="img" />
			<span class="txt">تحرير المقال بالعربي</span>			
            </div>
			</div>
</body>
</html>

والطريقة هذي تعمل بشكل ممتاز على المتصفحين Firfoxe والأكسبلورا
أتمنى أني أفدت.

تحياتي
محمد

**محمد 902** · 27-02-2007

وبالنسبة لكلامك بأن التقنية لاتدعم :court:
التقنية تدعم جميع اللغات وبشكل ممتـاز جداً .. حتى العربية
لكن المشكلة في اللي يستخدمها فقط . :nice:

تحيـاتي
محمد

**beshoo** · 27-02-2007

بنالهاية مستحيل ؟ وكل الحلو الباقية هي تحايل . اما بشكل نظامي لا يمكن الداء على الفاير فوكس .

يعني ضعف بالتقنية .

**محمد 902** · 27-02-2007

ماأدري مافهمت وش تقصد ...
الصورة بجنب النص وحطينـاها لك مضبوط ..لاتقول لي مو مضبوطة

وياليت تشرح كلامك الأخير لأن مافهمت منه ولا شيء .. كلمات وحروف ناقصة :looking:

محمد

**Flasher** · 27-02-2007

لا اريد ان استخدم ال UL اريد حصراال <span>

بنالهاية مستحيل ؟ وكل الحلو الباقية هي تحايل . اما بشكل نظامي لا يمكن الداء على الفاير فوكس .

يعني ضعف بالتقنية .

اخي الحبيب بيشو ،

بحث عن المشكلة ووجدتها

ال span ال display عنده افتراضي ليس كال div

اضف

كود:

display: block;

وتنحل المشكلة . .

كود HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />

<style type="text/css">
	body {margin:0; direction:rtl}
 

	
	.commentslink {
		padding-right: 20px;
		display: block; 
		border:thin dotted; 
		background-repeat: no-repeat;		
		background-image: url(http://getk2.com/wp-content/themes/k2/images/comment.png);
		background-position: right 50%;
		width:5em;
	}
	
	

</style>
</head>
<body>

						<span class="commentslink">
						تحرير المقال
						</span>
				
			
</body>
</html>

**سردال** · 27-02-2007

1. قبل كل شيء، يجب أن تكون أوامر HTML وCSS صحيحة وبدون أخطاء.

2. في أول سطر لديك خطأ.

كود:

<html dir="rtl" lang="ar">

هكذا يجب أن تكتب.

3. هل استخدمت أمر DOCTYPE لكي تحدد نوع الوثيقة؟

4. هذا السطر يحوي أمراً غير قياسي:

كود:

<div align="center">

الخاصية align يجب ألا تستخدم هنا، والبديل يكمن في CSS، هذه التقنية ليست عدوة لأي شيء، نحن أعداء ما نجهل.

**beshoo** · 28-02-2007

فعلا سردال نحن اعداء ما نجهل ...

اعترف وبكل فخر اني جاهل بهذة التقنية وها انا اتعلم بكل فخر
Flasher اشكرك جدا فعلتها بحق وعلمتني شيء لا اعرفة .

اشكرك جدا ... بالنهاية اتمنى مرجع يشرح الاوامر مع امثلة
ذهبت الى http://www.w3schools.com/ ولكن لم اجد الكثير وضعت .... اشكركم جدا ..

الموضوع: ال CSS عدوة العربي بشكل غريب

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

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

ال CSS عدوة العربي بشكل غريب

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

مشكلة بظهور الكلمات الدليلية بشكل غريب

ارتفاع اللود بشكل غريب لمدة يومين حتى الان

عدوة لمقاطعة جودادي من يستطيع ذلك ؟

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