اصنع واجهة CSS بكل بساطة وبدون جداول !

[Abdulaziz Al Rashdi]

شكرا لك أخي
بارك الله فيك
أرغب ببناء صفحة على الشفرات التي قمت بكتابتها

[Flasher]

اهلا بكم جميعا....وشكرا على كلامكم الجميل.

شكرا لك أخي
بارك الله فيك
أرغب ببناء صفحة على الشفرات التي قمت بكتابتها

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

[أحمد خلف]

درس رائع شكراً فلاشر.

الCSS نستخدمها ولكن نجهل الكثير عنها خاصة بما يتعلق بتقسيم وترتيب الصفحة.

تسائلات :
× لدي بلوك ايمن واريد ان اضع في داخله DIV واريد هذا الDIV يتمركز في اعلى هذا البلوك.
× DIV بعرض 400px واريد ان اجعل في الطرف الايمن نص وفي الطرف الايسر نص اخر بدون ما اقسم الDIV.
× كيف اتحكم بمكان النص داخل الDIV.
× لدي بلوكين بالDIV بجانب بعض واريد ان اجعل بنهم فاصل "مثلاً 2px".

ارجو اني ما اكون ثقلت

[Flasher]

درس رائع شكراً فلاشر.

الCSS نستخدمها ولكن نجهل الكثير عنها خاصة بما يتعلق بتقسيم وترتيب الصفحة.

العفو اهلا بك...

تسائلات :
× لدي بلوك ايمن واريد ان اضع في داخله DIV واريد هذا الDIV يتمركز في اعلى هذا البلوك.

لم افهم معنى "يتمركز في الاعلى" ؟ ..عندما تضع :

<div class="block">
<div class="top">
TOP
</div>
.........
</div>

ستظهر TOP في الاعلى .. لكن ربما تقصد ان هناك حشو زائد من الاعلى (padding) وتريد الDIV يرتفع
عندها تستطبع اعطاءه هامش(margin) بالسالب حتى يرتفع.
margin-top:-4px;

× DIV بعرض 400px واريد ان اجعل في الطرف الايمن نص وفي الطرف الايسر نص اخر بدون ما اقسم الDIV.

اممم..
ممكن تقصد كذا

<div class="d400">
	<div class="l">left left left left left left left left left left left left left </div>
    <div class="r">right right right right right right right right right right </div>
</div>

css:

div.d400
{
	width:400px;
	background:#ffff99;
	overflow:hidden;
}
div.d400 div.r
{
	float:right;
	width:198px;
	color:#CC6600;
}

div.d400 div.l
{
	float:left;
	width:198px;
}

× كيف اتحكم بمكان النص داخل الDIV.

عن طريق :
text-align : left/right/center *** يتحكم بالنص فقط ولايؤثر على العنصر الحاوي للنص
float : right / left *** يعمل ازاحه كامله للعنصر
position : *** // نفس الشئ يتحكم بالعنصر كامل // وله موضوع مستقل هنا للاخ الفاضل ca2oom

× لدي بلوكين بالDIV بجانب بعض واريد ان اجعل بنهم فاصل "مثلاً 2px".

ارجو اني ما اكون ثقلت

عن طريق الmargin يمكنك ذلك العنصر الايمن اعطه margin-left:1px و الايسر margin-right:1px .

[أحمد خلف]

انت مميز Flasher

كل ما كنت اعرفه عن الCSS هو 40% انت الان اعطيتني حوالى 50% من اللي كنت احتاجة،

لا عدمنا الله من اعضاء مثلك

سوف اعوذ للموضوع اذا واجهني اي تسائل اخر

وكل عام وانت بخير مقدماً

[aldosare]

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

1- توسيط الصفحة
2- تلاحظ أن في الجزء الأيمن من التصميم رؤوس الجداول في أطرافها تقويس لكن المشكلة أن الجدول يكمل الخط فيكون شكله مشوه شنو الحل فيها .؟
3- تلاحظ أن في الجزء الأيمن والأيسر والوسك فرقنا بيهما بخط لكن امشكلة عندما كثرت الجداول ونزلت للأسفل اختفى الخط ما السبب .؟

شكرا لك على الشرح
وفي انتظار توضيحك

[Flasher]

شكرا Fast وكل عام والجميع بخير ..

aldosare شغلك حلو.. لكن عندك لخبطة شوي
- اذا بغيت تستخدم وصف css لاكثر من عنصر استخدم class وليس الid
وفي الcss # >>> .
- اذا استخدمت الpx لاتخلط معها الem واستمر على واحد منهم فقط.
- ماوضعته انا ليس شرطا ان يكون موجود مثل الpadding والmargin والborder في الخطوة الثالثة لاني اشوفك قعدت تعدل فيها وحطيت شئ سالب على شانها.
- وضعت انت لل body عرض محدد وهذا خطأ لان حتى الان ليس اغلب المتصفحات تدعم هذه الطريقة والصحيح ان تجعل العرض لل wrap .. وتضع margin:auto
- مشكلة الحد اللي داخل على القائمة هذا شئ طبيعي لان الحد يكون خارج العنصر فمهما سويت من خلفيه ماراح تغطي الحد .. والحل انك تجعل الحد لعنصر اسفل من عنوان القائمة .
- مشكلة الخطوط انها حدود للعنصر center والذي يفترض ان يكون اطول واحد بينهم (الايمن والايسر)
لكن هناك حل افضل مادام انك وضعت عرض ثابت لل wrap ان تصنع خلفيه بنفس عرض الwrap فيها الخطوط بامكانك الاطلاع على الملف المرفق ففيه تعديلات كثيرة .. ايضا لاتهمل شكل الواجهة في المتصفحات الاخرى.

[aldosare]

أسأل الله العلي العظيم أن يوفقك في كل دروبك
وأن يفتح لك أبواب رزقه

صراحة أفدتني

خاصة تعليقاتك في الملف

بارك الله فيك

وياليت يكون هنالك دروس أكثر عمقا في css

مثل التعامل مع زرائر الهافر - وكذلك القوائم المنسدلة وغيرها من أوامر تضفي جمالا للموقع

وأنا أول التلاميذ المتابعين لدروسك

[Flasher]

أسأل الله العلي العظيم أن يوفقك في كل دروبك
وأن يفتح لك أبواب رزقه

صراحة أفدتني

خاصة تعليقاتك في الملف

بارك الله فيك

وياليت يكون هنالك دروس أكثر عمقا في css

مثل التعامل مع زرائر الهافر - وكذلك القوائم المنسدلة وغيرها من أوامر تضفي جمالا للموقع

وأنا أول التلاميذ المتابعين لدروسك

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

[yasser-atrees]

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

[Flasher]

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

يبدولي انك تقتصر انشاء صفحات الويب على برامج مساعده مثل الFrontPage
صفحة الhtml من الممكن ان تاخذ الامتداد htm او html

ومن الممكن ايضا ان تجعلها ملفين منفصلين
html + css

بالنسبة للصورة قارن ماتوصلت اليه بالموجود هنا
http://www.flasher.ws/uploads/csslayout/
او ضع الكود

[الساجي]

الله يعافيك اخوي ..

درس رائع ..


بعد اذنك بضيف شيء من عندي ..


// بخصوص التوسيط مدري هو صح كقياسيا ً .. لكنه فعال صح

التوسيط يكون بإضافة
<center>
</center>

, والله اعلم .

[vipxvip]

شرح ممتاز جداً


شبكة في اي بي

[Bruce]

درس ممتع اخي Flasher
موقع مختلف جدا
التوسيط في هذا لايتتطابق مع xhtml والويب 2
بل اصبحت
<div align="center"></div>

[محمد 902]

التوسيط لاهذا ولاذاك
التوسيط الصحيح والأفضـل هو

margin: 0 auto;

ويمكن إستخدام ماذكرت أخي Bruce , ولكن هذا يستخدم في داخل ملف CSS .