المرجوا المساعدة في تصحيح كود css صغير

[sanshik]

السلام عليكم
أنا بدأت في تصميم واجهة موقع العاب فلاش بإستعمال css مع العلم اني مبتدىء في css واواجه اخطاء مثل float و display واخطاء عدم المطابقة مع كل المتصفحات
مشكلتي سأوضحها في صورة وملف ستايل في المرفقات
إضهار الmenu في يمين الصفحة وليس اليسار كما في الصورة
جربت امر ال float و display ولكن لم تنجح معي
ارجوا مساعدتكم في الحل
وتصحيح باقي الاخطاء لو وجدت
تم اضافة ملف html في المرفقات
تحياتي

[Flasher]

وعليكم السلام ورحمة الله
أخي الكريم ضع البنية التي اتبعتها (HTML code)
مبدئيا اشوفك تكرر direction:rtl امر واحد في الbody كافي كذلك display:inline مع الfloating ليس له اي معنى (ربما يتعارض مع متصفحات اخرى لا اعلم ).
ملاحظة اخيرة هناك امر لابد ان تعرفه عندما تتعامل مع الFloating، عندما يكون لديك Container او عنصر حاوي وداخله عنصر عائم Floated فان الحاوي لايجبر الابن على التشكل في المكان المخصص فقط وانما قد يخرج من ابعاد العنصر الحاوي ولهذه المشكلة حل طبعاً.
وللتوضيح اكثر اقرأ هذا الموضوع : Clearing a float container without source markup

[sanshik]

شكرا اخي على الرد
الان فهمت ان علي وضع direction واحد فقط في البودي عوض تكراره كل مرة
اما display & floating ما زلت لا اعرف الكثير عنهما
ارجوا المزيد من التوضيح وكيف اصحح الاخطاء
لقد اضفت ملف html
تحياتي

[Flasher]

عدلت لك الان الكود لتصبح هناك ثلاث اعمدة
CSS

body, html {
	background:url(images/bg.gif) ;
	color:#fff;
	direction:rtl;
}
#wrap {
  width:978px;
  background-color:#CCCCCC;
  margin:0px auto;
  padding:0px;
}
#header {
  background-image: url(images/header.gif);
  width:978px;
  height:200px;
  clear:both;
}
#navads1 {
      height:27px;
      background-image: url(images/nav-1.gif);
	  border: 2px solid #FFFFFF;
}
#lastgamenav {
  height:27px;
  background-image:url(images/nav-1.gif);
  border: 2px solid #FFFFFF;
}
#navads2 {
	background-image:url(images/nav-2.gif);
	border: 2px solid #FFFFFF;
}
#ads-area-1 {
      height:204px;
	  border: 2px solid #FFFFFF;
}
#menu {
	height:27px;
	background-image:url(images/nav-1.gif);
	border: 2px solid #FFFFFF;
}
#last-game-area {
  height:364px;
  border: 2px solid #FFFFFF;
}	
#ads-area-2 {
	height:271px;
	border: 2px solid #FFFFFF;
}

#right {
	 width:204px;
	 float:right;
}

#left {
	 width:352px;
	 float:left;
}

#center {
	width:422px;
	float: right;
}

html

<div id="wrap">
    <div id="header">
    	<h2>games - free flash games - online games</h2>
    </div>
    <div id="right">
        Right
        <div id="navads1">ads1</div>
        <div id="ads-area-1">adsarea</div>
    </div>
    <div id="center">
        Center
        <div id="lastgamenav">last game</div>
        <div id="last-game-area">last-game-area</div>
    </div>
    <div id="left">
        LEFT
        <div id="navads2">ads2</div>
        <div id="ads-area-2">ads-area-2</div>
    </div>
</div>

مع العلم اني عدلت عرض الجانب الايسر ليكونو جميعا متلاصقين.

[sanshik]

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

[sanshik]

مشكلة اخرى وأظن انها الاخيرة لليوم
المشكلة مشروحة في الصورة
http://ennia.110mb.com/games1/p/cssss.PNG
وهنا التصميم علما ان صورة الهيدر لا علاقة لها بالموقع فقط وضعتها حتى انتهي من تصميم الهيدر الخاص يالتصميم.
Untitled Document
المرجوا المساعدة

[sanshik]

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

[Flasher]

مرحبا عذرا على التاخير اخوي
لكن الصورة ليست موجودة..
والجميع هنا من رواد هذا القسم واهل الخبرة اللي اهم اخبر مني ماراح يقصر بالخدمة باذن الله...
بانتظار رابط الصورة.

[ابراهيم العلي]

السلام عليكم ..,
أخي الكريم "sanshik" رابط الصورة غير صحيح أو أنه ممكن تم مسح الصورة ..
أرجو إعادة رفع الصورة . يمكن أقدر اساعدك

أخوك .. ابراهيم

[sanshik]

غريب كانت تشتغل عادي والان لا توجد
المهم اشكركم مسبقا على تعاونكم
والصورة هنا يا رب تشتغل :d
http://www7.0zz0.com/2008/07/18/02/167449420.png

[Flasher]

بسيطة، الفكرة يكون هناك عمودين بدل من ثلاثة والعمود الثاني بداخله عمودين ثم عنصر clear ثم الجزء العريض..

body, html {
	background:url(images/bg.gif) #000;
	color:#fff;
	direction:rtl;
}
#wrap {
  width:978px;
  background-color:#CCCCCC;
  margin:0px auto;
  padding:0px;
  display: inline-block;
}
#header {
  background-image: url(images/header.gif);
  width:978px;
  height:200px;
  clear:both;
}
#navads1 {
      height:27px;
      background-image: url(images/nav-1.gif);
	  border: 2px solid #FFFFFF;
}
#lastgamenav {
  height:27px;
  background-image:url(images/nav-1.gif);
  border: 2px solid #FFFFFF;
}
#navads2 {
	background-image:url(images/nav-2.gif);
	border: 2px solid #FFFFFF;
}
#ads-area-1 {
      height:204px;
	  border: 2px solid #FFFFFF;
}
#menu {
	height:27px;
	background-image:url(images/nav-1.gif);
	border: 2px solid #FFFFFF;
}
#last-game-area {
  height:364px;
  border: 2px solid #FFFFFF;
}	
#ads-area-2 {
	height:271px;
	border: 2px solid #FFFFFF;
}

#right {
	 width:204px;
	 float:right;
}



#main {
	width:774px;
	float: right;
}

#main #m_right {
	 width:422px;
	 float:right;
}

#main #m_left {
	 width:352px;
	 float:right;
}

#bar {
	background-color: yellow;
	color: black;
}

<div id="wrap">
    <div id="header">
    	<h2>games - free flash games - online games</h2>
    </div>
    <div id="right">
        Right
        <div id="navads1">ads1</div>
        <div id="ads-area-1">adsarea</div>
    </div>
    <div id="main">
        <div id="m_right">
        	RIGHT
            <div id="lastgamenav">last game</div>
            <div id="last-game-area">last-game-area</div>
        </div>
        <div id="m_left">
            LEFT
            <div id="navads2">ads2</div>
            <div id="ads-area-2">ads-area-2</div>
    	</div>
        <div style="clear:both"></div>
        <div id="bar"> Main content..........................................
        </div>
    </div>
    
</div>

بالتوفيق

[sanshik]

شكرا على المساعدة مرة اخرى
لدي سؤال اخر عن امكانية عمل جداول ب css وتكون متوافقة مع المعايير القياسية
هل يمكن ذلك؟
وهل هناك طريقة جيدة لترتيب الصور الصغيرة(عدد كبير) مع وضع عناوين تحتها؟
رفعت صورة للشكل التقريبي الدي اريد الحصول عليه
http://www3.0zz0.com/2008/07/20/12/785293494.png
ما الحل؟؟
ارجوا المساعدة وارفاق الكود لو امكن ..
أيضا ارى في بعض المدونات والمواقع رمز صغير يشبه هذا الشكل ولكنه اصغر منه وشكله اجمل ويوضع بجانب القائمة او اي ليست.. الرمز شبيه بـ ..(>>) الشكل الموجود بين قوسين
لو عرفته المرجو طريقة او الكود الدي يستعمل فيه
شكرا
تحياتي

[sanshik]

اعتذر لكم عن الازعاج
لدي مشكلة اخرى في قائمة صممتها ب css لاول مرة لكن النتيجة لم تخرج جيدة وهذا طبيعي
هذه صورة القائمة توضح الفرق بين متصفح ie6 و firefox والاخطاء الموجودة في القائمة
http://www2.0zz0.com/2008/07/20/15/331313079.jpg
وهنا الرابط المباشر للقائمة
Untitled Document
وهنا رابط التحميل لتصحيح الكود
http://ennia.110mb.com/menu/menu.zip
طول القائمة : 316 px
عرض القائمة : 204 px
خصصت للقائمة div id بنفس طول وعرض القائمة (ليس هناك مشكل؟)
اتمني ان تساعدوني في تصحيح الاخطاء ..وتعلم css لان طريقتي الوحيدة في التعلم هي التطبيق والتصحيح
وتحياتي

[sanshik]

أين انتم يا خبراء

[sanshik]

هل ازعجتكم لهذه الدرجة؟
ارجوك يا مشرف انا انتظر مساعدتك وهذه اخر مرة اطلبك فيها لانه يبدو انك مشغول
لم يبقى سوى مشكلة القائمة اما الجدول وجدت درس يشرح الطريقة