→ Next

روابط (41)

الخميس 23 أكتوبر 2008

3 تعليقات »

ابتسامات Gmail

الخميس 23 أكتوبر 2008

لاحظت مؤخرا إضافة بعض التحسينات على بريد Gmail، مثل الإطار الملون

input:focus { border:2px solid #73A6FF }

ومنذ قليل وجدت ايقونة جديدة صفراء انضمت للمحرر  WYSIWYG ..

سيظل بريد Gmail البريد المفضل بخصائصه المذهلة، التي تزدهر يوما بعد آخر ..

4 تعليقات »

روابط (40)

الإثنين 20 أكتوبر 2008

7 تعليقات »

هذه المدونة

الأحد 19 أكتوبر 2008

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

  1. تطوير: مقالات وأخبار متنوعة عن التطوير، tips وأفكار عن css، صور من flickr .. الخ
  2. دروس: دروس css xhtml (بالنسبة ل php لا فائدة من كتابة دروس لا تسمن ولا تغني من جوع، فهناك مقالات وكتب متخصصة، وأؤمن أن تعلم لغة برمجة لا يتأتى بالدروس، ونصيحتي هي: كتاب محترم + manual php + مدونة أجنبية متخصصة فقط في PHP +  الممارسة والتطبيق كل يوم .. )
  3. روابط: روابط متنوعة، لكن معظمها متعلق بالتطوير، أتعرف عليها وأحتفظ بها لمشاركتها مع الزوار

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

أرغب أن تحتوي مدونتي على أشياء مفيدة مثل (دروس) يمكن الرجوع إليها والاستفادة من بعض أفكارها، أما المواضيع الشخصية أو الأخبار التي تستهلك في حينها، فتلك لا أهمية لها، الأمر شبيه بالرجوع لمجلات أو جرائد قديمة لمعاودة الاطلاع عليها

ارى بعض المدونات العربية مليئة بالتصانيف والاقسام و tags واشياء أخرى، وكما اراها حرية شخصية ورغبة صاحب المدونة، فنفس الأمر بالنسبة لي

حان الوقت لأفكر في أفكار وأشياء جديدة ومفيدة، للحديث عنها في هذه المدونة

8 تعليقات »

position في css

الأربعاء 15 أكتوبر 2008

هذا درس بسيط وسريع لاستخدام position ب css
لدينا، صندوق عرضه وارتفاعه 400px يحتوي على صندوقين بعرض وارتفاع 150px:

كود XHTML:

<div id='box'>
  <div id='box-1'></div>
  <div id='box-2'></div>
</div>

صندوق عرضه وارتقاعه 400px مع border للصندوق لتحديده

كود CSS:

#box {width: 400px; height: 400px; border: 2px solid #eee}

باستعمال الخاصية position: absolute وإعطاء قيم ل top و left سأضيف ما يلي

#box-1 {
  position: absolute;
  top: 40px; left: 80px;
  background: #669933;
  width: 150px; height: 150px
}

الصندوق الأول ذو اللون الأخضر يقع على ارتفاع 40px من (الصندوق الأم أم من أعلى الصفحة ؟ )، وعلى مسافة تبعد ب 80px من اليسار
اما الصندوق الثاني (يمكن ان يكون صورة أو نص أو …):

#box-2 {
  position: absolute;
  top: 100px; left: 150px;
  background: #AE8AB7;
  width: 150px; height: 150px
}

مثال هنا:

الصندوقين الاخضر والبنفسجي لا علاقة لهما بالصندوق الأول وغير مرتبطين به، وللتأكد من ذلك يكفي أن أغير مكان الصندوق الأم الى الوسط:

#box {margin: 0 auto}

الان سيتغير مكان الصندوق الرئيسي ليظهر في وسط الصفحة، لكن لن ينتقل الصندوق الاول والثاني معه وسيظلان في يسار الصفحة

Demo 1

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

#box {position: relative}

Demo 2

خلاصة الدرس:
كيفية استعمال absolute وفائدة relative

3 تعليقات »

→ Next