الدرس الأول: سلسلة دروس تصميم المواقع باستخدام الCSS

[الحقيقه والواقع]

رائع ما شاء الله لا قوة إلا بالله

جزاك الله خيرا

[ahmed100]

السلام عليكم ورحمة الله وبركاته ..

أشكرك أخي عمــاد على هذا الدرس وننتظر منك المزيد

وإنتظر التطبيــق

[isader.com]

4AMIN: ما شاء الله عليك أخي... تطبيقك للدرس رائع.. و الصراحه أعجبتني الخلفيه اللي وضعتها في الرأسيه..

اذا سويت تصميم بالفوتوشوب و قصصته هل في صعوبة إذا أردت تحويله إلى xhtml >>>مع اني ما اتوقع .

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

اللحين لو شيكت على التطبيق في w3 ممكن أني ما ألقى ولا خطا ؟؟

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

اشكرك أخي 4AMIN

[isader.com]

الحقيقه والواقع: شكراً لك أخي و الله يجزيك كل خير

[isader.com]

قريباً ان شاء الله الدرس الثاني...

و بانتظار تطبيقك.. :nice:


شكراً لك..

[ahmed100]

هذا هو تطبيقي للدرس :

http://www.mwaheb.net/free/mobde3/webdesign/index.html

ملاحظة : الموقع سيظهر بشكل جيد على متصفح الفايرفوكس، حيث أن الإكسبلورر لن يعرض قائمة الروابط والتي في هذه الصورة :

http://www.mwaheb.net/free/mobde3/we.../infirefox.jpg

سؤال أخي عماد ،، هل لديك هاك أو كود جافا سكربت لإظهار الموقع في الإكسبلورر كما يظهر في فايرفوكس؟ أرجوا أن تفيدنا .

وشكراً

[isader.com]

السلام عليكم أخي أحمد..

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

بالفعل إنك مبدع... يعني اسم على مسمى..

بارك الله فيك.. و كثر من أمثالك..

بالنسبة للمشكله التي تواجهها في القائمة الرئيسية
فحقيقة لم تتح لي الفرصه بعد لتفحص الكود و رؤية مكان العله..

لكن بعد أن ألقيت نظرة سريعه (جدا) على الكود.. فأظن أن هناك مشكلة في الخاصية float .. أي أنك قد وضعتها في مكان لا يجب وضعها فيه.. طبعا في الستايل الخاص في وسوم القائمة و الصندوق الذي يحويها..

لا أستطيع أن أجزم الأمر.. لكن حاول أن تبني الكود الخاص بالقائمة من جديد .. و تأكد من أنك تقوم بوضع الأوامر الصحيحة في المكان المناسب...

تحيتي لك..

عماد الصدر

[ahmed100]

أشكرك أخي عمــاد ..

طبقت ما قلته قبل ذلك ولكن ظهرت لي مشاكل في Explorer، وضعت خاصية Float في الأماكن المقصودة لكي لا تظهر مشاكل أكثر في Expolrer ولكن هذا لم يأثر أيضاً فالواجهه لم تتغير في الإكسبلورر بإزاله الخاصية .

قمت بتعديل الملف قبل ذلك أيضاً توافق مع الإكسبلورر ولم يتوافق مع الفايرفوكس ( مع وجود أخطاء في ملف css ! )

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

أشكرك أخي عمـــاد مرة أخرى وفي إنتظار الدروس القادمة

[elkaser]

يعطيك العافية أخي عماد

اخي لدي استفسار اخر كيف يمكن تحويل هذا الكود من html الى css & xhtml
??? وهو عبارة عن جدول

وهذا هو الكود الذي عملته لوضع مثال html

<table cellpadding="0" cellspacing="0" border="1" width="100%">
  <tbody>
    <tr>
      <td valign="top" align="center" bgcolor="#999999"><font
 color="#ffffff"><b>لا تعمل!<br>
      </b></font></td>
      <td valign="top" align="center" bgcolor="#999999"><font
 color="#ffffff"><b>الاستماع<br>
      </b></font></td>
      <td valign="top" align="center" bgcolor="#999999"><font
 color="#ffffff"><b>حفظ<br>
      </b></font></td>
      <td valign="top" align="center" bgcolor="#999999"><font
 color="#ffffff"><b>اسم<br>
      </b></font></td>
      <td valign="top" width="25" align="center" bgcolor="#999999"><font
 color="#ffffff"><b>رقم</b></font></td>
    </tr>
    <tr>
      <td valign="middle" align="center">تبليغ..<br>
      </td>
      <td valign="middle" align="center"><img
 src="http://www.palintefada.com/arabic/modules/Songs/images/speaker.gif"
 alt="" width="20" height="19">
      <br>
      </td>
      <td valign="middle" align="center"><img height="23" width="20"
 alt=""
 src="http://www.palintefada.com/arabic/modules/Songs/images/zx190.gif">
      <br>
      </td>
      <td valign="middle" align="right">كتائب الاقصى ضحو<br>
      </td>
      <td valign="top" width="25" align="center">1<br>
      </td>
    </tr>
    <tr>
      <td valign="middle" align="center">تبليغ..<br>
      </td>
      <td valign="middle" align="center"><img
 src="http://www.palintefada.com/arabic/modules/Songs/images/speaker.gif"
 alt="" width="20" height="19">
      <br>
      </td>
      <td valign="middle" align="center"><img
 src="http://www.palintefada.com/arabic/modules/Songs/images/zx190.gif"
 alt="" width="20" height="23">
      <br>
      </td>
      <td valign="middle" align="right">استشهادي يا ارضي استشهادي<br>
      </td>
      <td valign="top" width="25" align="center">2<br>
      </td>
    </tr>
    <tr>
      <td valign="middle" align="center">تبليغ..<br>
      </td>
      <td valign="middle" align="center"><img
 src="http://www.palintefada.com/arabic/modules/Songs/images/speaker.gif"
 alt="" width="20" height="19">
      <br>
      </td>
      <td valign="middle" align="center"><img
 src="http://www.palintefada.com/arabic/modules/Songs/images/zx190.gif"
 alt="" width="20" height="23">
      <br>
      </td>
      <td valign="middle" align="right">شعر الدعاس<br>
      </td>
      <td valign="top" width="25" align="center">3<br>
      </td>
    </tr>
  </tbody>
</table>

وشكرا

وبارك الله فيك ووفقكم

[elkaser]

نحن ننتظر

[isader.com]

السلام عليكم جميعاً


أعتذر أولاً على تأخري بالرد على الأخوه.. و لكن الحقيقه أني إنشغلت بعض الشيء في الأيام القليله الماضيه بالدراسه.. أعاننا الله و إياكم عليها

أخي أحمد..
أعتذر عن التأخير.. و الحقيقه اني لم القي نظره بعد على المشكله في صفحتك.. لكني سأقوم بذلك قريباً..


أخي الكاسر:

تفضل:

<table class="media">
    <tr>
      <th>heading1</th>
      <th>heading2</th>
      <th>heading3</th>
      <th>heading4</th>
      <th>heading5</th>
    </tr>
    <tr>
      <td align="center">link</td>
      <td align="center"><img src="http://www.palintefada.com/arabic/modules/Songs/images/speaker.gif" alt="" width="20" height="19" /></td>
      <td align="center"><img height="23" width="20" alt="" src="http://www.palintefada.com/arabic/modules/Songs/images/zx190.gif" /></td>
      <td align="center">First</td>
      <td align="center">1</td>
    </tr>
    <tr>
      <td align="center">link</td>
      <td align="center"><img src="http://www.palintefada.com/arabic/modules/Songs/images/speaker.gif" alt="" width="20" height="19" /></td>
      <td align="center"><img src="http://www.palintefada.com/arabic/modules/Songs/images/zx190.gif" alt="" width="20" height="23" /></td>
      <td align="center">Second</td>
      <td align="center">2</td>
    </tr>
    <tr>
      <td align="center">link</td>
      <td align="center"><img src="http://www.palintefada.com/arabic/modules/Songs/images/speaker.gif" alt="" width="20" height="19" /></td>
      <td align="center"><img src="http://www.palintefada.com/arabic/modules/Songs/images/zx190.gif" alt="" width="20" height="23" /></td>
      <td align="center">Third</td>
      <td align="center">3</td>
    </tr>
</table>

أما بالنسبه لملف الCSS فهو كالتالي:

.media{display:table; padding:0;spacing:0;border:1px #000000 solid; width:100%;}
.media th{background-color:#999999; align:center; font-weight:bold; color:#FFFFFF; border:1px #888888 solid;}
.media td{display:table-cell; background-color:#DDDDDD;}

أرجو أن يكون هذا ما تريد ...

بالتوفيق لك و لموقعك ...



و مازلنا بانتظار تطبيق الدرس لباقي الأعضاء..


اذا لم يكن هناك تطبيق للدروس.. فما فائدة هذه الدروس اذا؟!


السلام عليكم

[elkaser]

مشكور حبيبي الله يسعدك وينجنك في الدراسة
بارك الله فيك

[شــــــامل]

الله يرزقك الفردوس الاعلى

اشكرك يامبدع

:nice: