Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

نحن ننصحك بقوة بترقية متصفحك إلى نسخة أحدث مثل أنترنت اكسيلورر ٨ أو فايرفوكس و الذي سيتيح لك تصفح أفضل ليس لموقعنا فقط بل في كل أرجاء الأنترنت..

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

Post Pic

إضافة عنصر إلى أي مكان في الصفحة بواسطة Css

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

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

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

هيا نطير

المثال هنا صفحة تحتوي على خلفية و صندوق للمحتوى .

و الكود هنا سهل للhtml سنضع التالي


<body>
<div id="wrap">
 النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا
</div>
</body>

و في الCss التالي


body { direction :rtl;text-algin :center;background:url('sky.jpg') repeat center ;}
#wrap { width :800px; margin:0 auto; background-color:white;min-height:200px;margin-top:100px;padding:30px}

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

الطريقة ١ :

اولا أضافة الصورة في اعلى الصفحة مثلا


<img src="plane.png" alt="plane" id="plane" />

<div id="wrap">
 النص هنا
</div>

اضفنا الصورة بطريقة عادية و لكن ما يميزها هنا اننا اخترنا لها التعريف Plane حتى نتمكن من تحريكها لاحقا بواسطة Css .

لاحظ عند عرضنا للصفحة ظهرت الصورة بطريقة عادية و في سياق الصفحة . و ما نريد القيام به الان هو تحريك الصورة و ذلك سيتم بواسطة Css لاحقا .

الطريقة ٢

سأضيف الصورة بطريقة اخرى سأضع منطقة  Div جديدة و اسميها مثلا Plane و اضعها قبل منطقة  Wrap


<div id="plane"></div>
<div id="wrap">

 النص هنا
</div>

و هنا ستلاحظ لو استعرضنا الصفحة ان شيئا لم يتغير و لم تظهر اي طائرة .و لكن مهلا سنضيف Css التالي


#plane {
background:url('plane.png') no-repeat center center;
width:200px;
height:200px;
}

و في السطر الاول حددنا خلفية لمنطقة plane و هو ملف صورة الطائرة plane.png طلبنا ان لاتتكرر الصورة في المنطقة مثل خلفية الصفحة و لكن تظهر مرة واحدة باستخدام الامر no-repeat و ان تظهر في المنتصف افقيا و عموديا من خلال  Center .

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

و الآن ستظهر الطائرة بنفس الشكل السابق .

أين الطائرة

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

هي خاصية تعطي العنصر موقعه اما relevant أو absolute ما الفرق يينهما يمكنك القراءة في هذا الموضوع ..

في مثالنا هذا plane يحتاج لان يكون Absolute .

و سواء أضفت الصورة بالطريقة الأولى أو الثانية ستحتاج إلى


#plane {
position :absolute ;
top:100px;
left:5px;
}


حيث اعطينا الطائرة ان يكون لها position من نوع absolute و تبعد عن الاعلى بمقدار 100px و من اليسار بمقدار  ٥ بكسل بالطبع هناك ايضا خواص bottom و  right لو أحببت .

حمل المثال كامل من هنا

ملاحظة

قد تحتاج إلى إضافة z-index للطائرة و أخر ل wrap  فلو جربت المثال و صغرت النافذة ستظهر الطائرة فوق صندوق النص و لكن يمكنك اعادة ترتيب ذلك عن طريقة z-index .

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

تعليقات الزوار (20)

[+] أضف تعليقك من فضلك



  1. عبد الله كتب:

    بارك الله فيك
    جزاك الله خيرا ….
    عندي استفسار …
    في قالب الوورد بريس في أي ملف أظيف أكواد ال html ؟
    يمكنني تعديل كود ال css في ملف الستايل لكن أين يمكن إضافة أكواد html ?
    بارك الله فيك مرة أخرى


  2. مشكورة الاخت الفاضلة على هذه التلميحة المهمة والمفيدة
    وبما ان الافكار لاحدود لها فيما يخص تقنية CSS فانا احب الاضافة هنا.

    في المثال المذكور بالاعلى سوف نجد بأن العنصر plane# سوف يكون على بعد 100px من اعلى الصفحة و 5px من يسار الصفحة لان الـ position الخاص بالعنصر سيكون بالنسبة للـ body وفي هذه الحالة كلما زاد عرض الشاشة المستخدمة لدينا زاد بُعد الطائرة عن العنصر wrap# .. ماذا لو اردنا ان يكون بعد الطائرة بالنسبة للعنصر wrap# وليس للـ body

    اولاً نقوم بنقل العنصر plane# داخل wrap# ثم نقوم باعطاء العنصر wrap# خاصية الـ position : relative

    ثانياً نقوم باعطاء العنصر plane# قيمة بالسالب لليسار left:-210px وذلك لاجباره على الخروج خارج اطار العنصر wrap#

    وبهذا سوف تصبح الطائرة ملاصقة للعنصر wrap# مهما كان حجم شاشة المستخدم

    شكراً للاخت فاطمة وياريت المزيد من هذه المقالات التي تتيح لنا مشاركة الافكار والخبرات


  3. عبد الله كتب:

    عذرا أختي اتبعتك معي
    لم تنجح العملية :
    http://img14.imageshack.us/img14/7526/istifsar.gif


  4. Moon_queen كتب:

    يعطيج العافيه


  5. Ahmedesign كتب:

    تصحيح:
    body { direction :rtl;text-algin :center;background:url(‘sky.jpg’) repeat center ;}
    text-align NOT text-algin
    شُكراً جزيلاً لكِ


  6. محمد جبلي كتب:

    رائعٌ جداً , أتمنى أن تستمري
    HTML 5 تنتظر شرحكِ لها


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

    حيث انه لا يصح ان يتكرر نفس ال id لعنصرين فى الصفحة بعكس class=”plane” مثلا
    – انا اعرف انه سيعمل لان المتصفحات تتغاضى عن الفرق بينهم و لكن الاصح لو اننا استبدلنا id ب class
    و فى css نستبدل # ب.
    و اشكرك مرة اخرى على الموضوع

    http://www.sa7afa.net


  8. جبران كتب:

    مبدعة اختي،

    درس رائع وسهل وراح نستفيد منه كثير ..


  9. شكرا للجميع على مروركم العطر


  10. راشد كتب:

    الله يجزاكي كل خير استفدت والله من شرحك
    ومن معلوماتك لان اكثر المواقع تشرح بالانجليزي بس ماا فهم معها مضبوط
    واستمري ان شا الله ولكي منا كل الدعاء لك بالخير


  11. يعطيك ألف عافية استفدت كثيرا من شرحك الرائع

    وربي يزيدك علم وتألق ويبارك في وقتك

    جزاك الله خير عن زكاة علمك