في التصاميم المعقدة و التي تحتوي على عدد من العناصر في الصفحة ستحتاج إلى طريقة لتحريك العنصر في الصفحة يمينا او يسارا خارج نطاق او تسلسل الصفحة . فيما يلي الطريقة للقيام بذلك بواسطة 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 .
بقلم : فاطمة العمادي
أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .
تابعنا على
التصنيفات:
- التصوير الضوئي
- المدون الضيف
- النشر و محركات البحث
- بحثتم عن ؟
- برامج و أنظمة
- عام
- متجهيvector
- وردبريس
- وصلات و مواقع
المدونة برعاية
![Happy National Day.. Qatar [1]](http://farm8.static.flickr.com/7018/6521087103_dd47d6ff67_s.jpg)
بارك الله فيك
جزاك الله خيرا ….
عندي استفسار …
في قالب الوورد بريس في أي ملف أظيف أكواد ال html ؟
يمكنني تعديل كود ال css في ملف الستايل لكن أين يمكن إضافة أكواد html ?
بارك الله فيك مرة أخرى
انا اقترح ان تضيف الhtml في header.php و بعد الوسم مباشرة body
بالتوفيق
مشكورة الاخت الفاضلة على هذه التلميحة المهمة والمفيدة
وبما ان الافكار لاحدود لها فيما يخص تقنية CSS فانا احب الاضافة هنا.
في المثال المذكور بالاعلى سوف نجد بأن العنصر plane# سوف يكون على بعد 100px من اعلى الصفحة و 5px من يسار الصفحة لان الـ position الخاص بالعنصر سيكون بالنسبة للـ body وفي هذه الحالة كلما زاد عرض الشاشة المستخدمة لدينا زاد بُعد الطائرة عن العنصر wrap# .. ماذا لو اردنا ان يكون بعد الطائرة بالنسبة للعنصر wrap# وليس للـ body
اولاً نقوم بنقل العنصر plane# داخل wrap# ثم نقوم باعطاء العنصر wrap# خاصية الـ position : relative
ثانياً نقوم باعطاء العنصر plane# قيمة بالسالب لليسار left:-210px وذلك لاجباره على الخروج خارج اطار العنصر wrap#
وبهذا سوف تصبح الطائرة ملاصقة للعنصر wrap# مهما كان حجم شاشة المستخدم
شكراً للاخت فاطمة وياريت المزيد من هذه المقالات التي تتيح لنا مشاركة الافكار والخبرات
شكرا جزيلا على الإضافة ..
جزاك الله كل خير .
عذرا أختي اتبعتك معي
لم تنجح العملية :
http://img14.imageshack.us/img14/7526/istifsar.gif
انت هنا اضفت الصورة فقط و لم تضف خصائص الcss هل حملت ملف المثال ؟ ربما ستتضح الصورة اكثر .
يعطيج العافيه
الله يعافيج
تصحيح:
body { direction :rtl;text-algin :center;background:url(‘sky.jpg’) repeat center ;}
text-align NOT text-algin
شُكراً جزيلاً لكِ
شكرا على التعديل الم اقل لكم اني لم اراجع الشفرة …
على العموم شكرا مرة اخرى.
رائعٌ جداً , أتمنى أن تستمري
HTML 5 تنتظر شرحكِ لها
ان شاء الله …
شكرا جزيلا لك
السلام عليكم
فى البداية فانا زائر مهتم جدا بالمدونة و ازورك باستمرار لاننى احب الموضوعات الجديدة و الشيقة كما اقرا عندكم
و لكن لى تعليق واحد على الموضوع السابق و هو وجود خطا من وجهة نظرى وهو
حيث انه لا يصح ان يتكرر نفس ال id لعنصرين فى الصفحة بعكس class=”plane” مثلا
- انا اعرف انه سيعمل لان المتصفحات تتغاضى عن الفرق بينهم و لكن الاصح لو اننا استبدلنا id ب class
و فى css نستبدل # ب.
و اشكرك مرة اخرى على الموضوع
http://www.sa7afa.net
شكرا لك اخ حسام يبدو انك لم تقرأ الموضوع بشكل جيد فالتعريف لم يتكرر لكن انا عرضت طريقتين في استخدام هذا المعرف فالصورة اما ستضاف كصورة تحمل الاي دي plane او تضاف كتقسيم او منطقة Div تحمل نفس الاي دي و لكنهما لن تضافان معا و لو حملت ملف المثال كنت ستشاهد ذلك ..
اسف على سوء الفهم..
و اشكرك على موضوعك
http://www.sa7afa.net
مبدعة اختي،
درس رائع وسهل وراح نستفيد منه كثير ..
شكرا للجميع على مروركم العطر
الله يجزاكي كل خير استفدت والله من شرحك
ومن معلوماتك لان اكثر المواقع تشرح بالانجليزي بس ماا فهم معها مضبوط
واستمري ان شا الله ولكي منا كل الدعاء لك بالخير
يعطيك ألف عافية استفدت كثيرا من شرحك الرائع
وربي يزيدك علم وتألق ويبارك في وقتك
جزاك الله خير عن زكاة علمك