HomeОбразованиеRelated VideosMore From: Elzero Web School

Learn Css in Arabic #17 - Float - Left, Right, None and Clear

788 ratings | 56029 views
Learn everything about elements float and clearing and how it done Advanced Float Lesson https://www.youtube.com/watch?v=jtg4u2-aV-w
Html code for embedding videos on your blog
Text Comments (95)
bouhannache abdallah (3 months ago)
not sufficient i believe it missed when you do some float with different position types :absolute, relative ,etc..
Elzero Web School (3 months ago)
See https://www.youtube.com/watch?v=jtg4u2-aV-w&list=PLDoPjvoNmBAycLCqZ6Fx-FT96cRRuPiBh&index=9
ali muhammed (4 months ago)
سؤال بس استاذ اسامه بعد اذنك ليه الديف اللي اسمه clear بالشكل ده يعني عملته ديف ومكتبتش فيه حاجه ليه محطناش العناصر اللي عملنالها جوا الديف ده clear
Noor Ayad (5 months ago)
الي مدتضبط ويا الشكل خل يبدل دالدف الى هيج <h2 class="clear"></h2>
Mahmoud Ahmed (7 months ago)
تطبيقي https://codepen.io/mahmoud-abo-anas/pen/eMoJVP
o Lakbiri o Brahim o (8 months ago)
عزيزي وأستاذي أسامة هذه المرة الرابعة أو الخامسة التي أعيد فيها هذه السلسلة التي علّمتني فيها الكثييييير، أرجوا منك يا أستاذي أن توضح لي لماذا لا يمكنني التحكم في div2 في margin-top & width & height <body> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </body> ----------------------------- div{ display:inline; background:green; padding:0 100px 0 100px; } .div1{ float:left; } .div2{ margin-top:50px; } .div3{ float:right; }
Ahmed Ashraf (9 months ago)
h2 طب عاوز اعمل لل float: right; display: block; ازاي
Ahmed Ashraf (9 months ago)
شكرا خلاص عملت text-align: right; display: block; و عملت اتوماتك
GAMES 8 (9 months ago)
ما هو الفرق بين float و display
pixxer (1 year ago)
في حاجه غلط لما عملت float وفي عناصر تانيه تحتها لغبتت الكلام وجه تحتها وجنبها مع ان في display كان كل حاجه تمام ايه الفرق بين ال display و flot ?
علاء محمد (1 year ago)
ياريت يا بشمهندس بلاااش موضوع ال div جوه div لانه بيتوه جداا
Elzero Web School (1 year ago)
لما تتعمق في التصميم هتعمل عشرة ديف جوة بعض وممكن 15
Mohamed Ayman (1 year ago)
Thanks for your efforts.
Mohamed Sayed Farag (1 year ago)
Very thanks Eng.osama . This is test on this lesson https://codepen.io/mo7amed_s_f_25/pen/boaEEV I hope to like you !
esam sami (1 year ago)
ربنا يجازيك خير
Abde Ssamad (1 year ago)
جزاك الله خيرا وجدتك بالصدفة ،تابعت دروسك فوجدتك خير معلم بالنسبة لي . . ليتك تفتح مدرسة لتعليم البرمجة ، لديك موهبة تدريس رائعة
Mamoun Adil (1 year ago)
تسلم كتير
Abdinasir Qasim (1 year ago)
هل من اختلاف .clearfix{ overflow:auto; } و .clearfix{ clear:both; } انتظر الرد :)
محمد حبوب (1 year ago)
أستاذ أسامة لو سمحت شو الفرق بين اني حط <br> وبين اني احط clear مو نفس العمل? لاني حطيت <br>قبل الهدينك التاني فنزل عالسطر التاني وكمان الهدينك خارج الديف فليش تطبق الفلوت عليها ؟؟؟
khaled elesawy (1 year ago)
لو سمحت كنت عايز من حضرتك ماتيريال سوفت كوبي اقدر اذاكر منها مع الفيديوهات؟
Taher Sayed (1 year ago)
عفوا منك استاذ اسامه أنا فهمت الـ Float left والــ Float Right لكن ما فهمتش ولا حاجه من الــ Clear
Elzero Web School (1 year ago)
كلير بتعالج الفلوت يعني العناصر بتكون عايمة في الصفحة هي بتظبط الكلام دة علشان تخليك تكمل توزيع العناصر بشكل طبيعي بعد كدة
Ahmed Hassan (1 year ago)
كلير بتخلي العناصر بعد الفلوت متعملش فلوت هي كمان وترجع للوضع الطبيعي من اول السطر
Elias Housseini (1 year ago)
اقسم بالله يا شباب اخترب امتحاني بسبب نسياني لخاصية الفلوت. ما قدرت اكمل. انا قررت اكمل تعليم ال اتش تي ام ال لوحدي. لاني بحبها كتير
Mecorr (1 year ago)
a few months ago I start to learn css from udemy and stop learning css due to clear :D but now it's easy :D i hope i can build my 1st site soon . thank you, boss
Elzero Web School (1 year ago)
Thanks i wish you all the best and cant wait to see your first project
Mayar Ahmed (1 year ago)
لو سمحت في الدقيقه 3:00 ازاي لو شيلت منتج بيبان كان مفيش حاجه انا لو شيلت مثلا div من التلاته طبيعي هيكونوا اتنين ممكن مثال لو سمحت ؟ وبرضه ليه مش بنستخدم ا inline او inline-block؟
Elzero Web School (1 year ago)
معلش مفهمتش السطر دة ازاي لو شيلت منتج بيبان كان مفيش حاجه
MH C (1 year ago)
طب منا اقدر احط <span> علي الجزئية الي عايز اخليها علي اليمين ,, دقيقة 5 : 45 واديلها text-align:right; والباقي هيكون في مكانه زي ما هو !" ؟
MH C (1 year ago)
بس اقدر اعدل عليها ب margin 0px 0px 0px 20px دا مثال ياريت تشوفه
MH C (1 year ago)
https://codepen.io/MBQX/pen/eWLJbo يب فعلا معاك حق تسلم <3
Elzero Web School (1 year ago)
لا الفلوت مختلف جرب بنفسك وشوف واكتب الكود هنا علشان اوريلك ان في فرق codepen.io
Osman Abdi (1 year ago)
لماذا لا استعمل clear both بدلا من clear right و left الاخ اسامة تكلمت بسرعة عن هذا الامر في نهاية الفيديو وانا لم افهمه
Osman Abdi (1 year ago)
شكرا استاذ اسامة ربنا ما يحرمنا منك
Elzero Web School (1 year ago)
بكل بساطة الكلير بيعالج الفلوت لو فلوت رايت ممكن تستعمل كلير رايت ولو ليفت ممكن تستعمل كلير ليفت لو عاوز كلير للاتجاهين خلاص خليه both both = left + right
Omar ahmed (1 year ago)
من فضلك ليه هيدينج قبل ما اعمل كلير كان جنب الديف مش المفروض هو بلوك ييجي في سطر لوحده لان الفلوت معموله على كلاس ليفت بس؟
محمد حبوب (1 year ago)
طيب بس انا حطيت <br>قبل الهدينك التاني فمشي الحال فشو في فائدة للكلير غير هي؟
Ahmed Hassan (1 year ago)
الفلوت بيخلي اي عنصر سواء بلوك او inline انه يعوم في اتجاه معين لذلك بنلغي تاثيره بالكلير
Ahmed Hassan (1 year ago)
الفلوت بيخلي اي عنصر سواء بلوك او inline انه يعوم في اتجاه معين لذلك بنلغي تاثيره بالكلير
x-mega -no (1 year ago)
مش بتظهر عندي بنفس الشكل اللي في الدقيقه7:17 http://codepen.io/mohamed-ashraf/pen/woeOBZ
Spomi News (1 year ago)
ستظهر بنفس الشكل إن صغرت حجم الصفحة إلى 30 أو 40 في المئة تقريبا
Mohamed Ebrahim (1 year ago)
.clear { clear:both; }
Mohamed Ebrahim (1 year ago)
<div class="clear"></div>
Mohamed Ebrahim (1 year ago)
لأنك مش عامل ديف للكلير .. هكتبهالك فى تعليق لوحدها عشان تبان
Othmane MAGHLAOUI (2 years ago)
محبك في الله من المغرب
Elzero Web School (2 years ago)
الله يسعدك يارب واحبك الله ورسوله
Othmane MAGHLAOUI (2 years ago)
ماشاء الله و اسال الله العظيم انا يبارك لك فيما اعطاك وهنيأ لك بهذه الصدقة.
Elzero Web School (2 years ago)
اللهم آمين تعيش يارب اخي الحبيب
adnan asaad (2 years ago)
شرح رائع تسلم ايدك ❤️👍🏻
ELGENIAS ABDO (2 years ago)
شرح رائع ربنا معاك حبيبى بس الدرس ما فهمته بالقدر المجو منه
Abdelrahman Hamdy (2 years ago)
هو مش المفروض انى ال span يجى تحت لان ال div من block items
Elzero Web School (2 years ago)
قولي في الدقيقة الكام الدروس بقالها كتير
hema saied (2 years ago)
هوا ده اللي بيستخدموه في الفيس من فوق ؟ اللي هوا زي home - Profile - Find friends كدة يعني؟
Moaz El-sawaf (1 month ago)
لما تبدأ في البلاي ليست بتاعت التطبيق هتعرف، وهتلاقي الباشمهندس اسامة بيتكلم في اول فيديو فيها عن فيديو مدته ساعة تقريباً لازم تشوفه هيفتحلك دماغك جامد ويعرفك حاجات كتير
Professional CO (1 month ago)
لو حد عرف يقولي برضو
Ahmed Hassan (1 year ago)
ممكن يكون علشان inline-block بتخلي البلوكات في سطر واحد انما بالfloat تقدر تخليهم في سطر واحد وكمان تخلي واحد منهم يمين واخر عايم شمال بسهولة جدا اي امكانيات اقوي بطريقة اسهل
Elhadi Khogali (1 year ago)
وليه ما يستخدموا inline او inline-block
Elzero Web School (2 years ago)
ايوة هو
Mohamed Tarek (2 years ago)
انا مش فاهم ليه حطيت div فوق لوحده وازاي اثر عال h2 وخلاه ينزل تحت ال h2 الاولاني ايه علاقه ال div ال clear بال h2 الي تحته
Elzero Web School (2 years ago)
الديف عنصر بلوك بيحط مسافة قبلة وبعدة ونفس الحال في الهيدينج باانواعها
ما رأيك أخى الكريم أو أستاذ أسامة https://goo.gl/OzrXVj
Elzero Web School (2 years ago)
جميل اخي الله يكرمك يارب استمر وطور متقفش ابدا
Smail Liams (2 years ago)
أيضا لم أفهم الفرق بين ال position و ال float
Elzero Web School (2 years ago)
شوف البوزيشن هنا بالتفصيل الممل https://www.youtube.com/watch?v=jtg4u2-aV-w
mohamed fahmy (2 years ago)
شكرا
Em An (2 years ago)
جزاك الله خيراا
hoba blancko (2 years ago)
طب الديف اللي حضرتك عملتوا علشان تعمل الclear , احدد مكانوا ازاي بين العناصر ؟
Elzero Web School (2 years ago)
+hoba blancko بيكون بعد العناصر المعمول ليها فلوت
الله ينور بس انا كنت عايز استفسر عن حاجة انا شايف ان الfloatبنستخدم معاه left...right لكن مفيش center downلية
Elzero Web School (2 years ago)
+Memo Memo لان الفلوت بيخلي العناصر عايمة جمب بعض لكن لو كل واحد تحت التاني الطول لا ينتهي بالتالي مش هيكون في مشكلة اما المشكلة دايما بتيجي من العرض اللي هو ليفت و رايت
Eng Fatma (2 years ago)
.right ونسقت باسم ديف left right حضرتك سميت الكلاس واتنسق مع حضرتك ازاي هو بياخد اخر اسم للكلاس كده ؟
منوعات مسلية (9 months ago)
الأفضلية دائما تكون للكلاس الذي بالاسفل. . left اقوى من كلاس right ذلك لان كلاس
Ahmed Hassan (1 year ago)
الديف ممكن ينتمي لاكتر من كلاس هنا ينتمي لكلاس right وكلاس left ولان كلاس right المكتوب في نهايه ملف css هيبقي هو المطبق والافضل اي كأنك مطبق كلاس right فقط عليه
Mahmoud (1 year ago)
نفس السؤال و الفيديو مش موضح ان حضرتك اديت للاسبشيال تنسيق
Elzero Web School (2 years ago)
+Ahmad Samir كل واحد فيهم ليه تنسيق مختلف
The Channel (2 years ago)
+Eng Fatma نفس السؤال
Amr Hendawy (2 years ago)
في سؤال لاحظته في شرحك ما انا ممكن في الليفت اسبان اشيل الفلوت واعمل تكست الاين يمين حينقل اللى جوه الاسبان فقط
Basem Mohamed (2 years ago)
+pop3 gretful text align تنفع مع النصوص فقط انما لو عناصر او ايقونات او ا ىشىء اخر هتضطر تعمل فلوت لان التكست الاين مش هيعرف يظبطها
Elzero Web School (2 years ago)
+pop3 gretful ممكن تقسم العناصر زي متحب بس انا عملت مثال علشان تعرف الفلوت بيعمل ايه و الكلير بيعمل ايه
abd allahham (3 years ago)
مشكور بارك الله فيك
Elzero Web School (3 years ago)
+abd allahham واياك يارب تسلم
Amr Hendawy (3 years ago)
السلام عليكم أستاذ اسامة كنت بستفسر عن شئ كود float right مش بيقبل عندى ولينك الكود أهه http://www.mediafire.com/download/3t1758nm709k8v8/Float+-+Left++Right++None+++Clear.rar ياريت اى حد من الناس يعرفنى خطأى فين
Elzero Web School (3 years ago)
+pop3 gretful اكتب اكوادك دايما هنا اخي الكريم codepen.io علشان الناس تعدلك على الكود و تتابع معاك
Osaid Wattad (3 years ago)
الله يرضى عليك , شرح رائع ومن القلب الى القلب
Elzero Web School (3 years ago)
+Osaid Wattad الله يكرمك يارب تسلم :)
hanTo alhanTo (3 years ago)
جزاك الله خير يابشمهندس   عندي سوال  انا عملت هيدر وجوا الهيدر ناف بار ولوقو  (صوره) و عنوان (h1)  بس الناف جاي فوق اللوقو ازاي اخلي اللوقو يطلع فوق الناف بار
Elzero Web School (3 years ago)
+Fahad Alhmadi حط كود الصورة اللوقو فوق قبل متحط كود النفابار
Ahmed Zaher (3 years ago)
او علم ينتفع به جزاك الله خيرا
Omar Mohamed (3 years ago)
ربنا يباركلك ويزيدك بجد بس انا كنت عاوز اسال سؤال ازاي الكلام اللي حضرتك كنت كاتبه وحاطه جوه الديف وكان مكتوب جنب بعضه مش الديف ده بردو block tag ولا الfloat ليها علاقه بالموضوع
Ahmed Anas (3 years ago)
حضرتك بغض النظر عن شرحك اللى برتاح جدا وانا بسمعه وجزاكم الله خيرا وربنا يجعله فى ميزان حسناتك ان شاء الله  فى عندى بس نقطه مش قادر استوعبها  left اديته كلاس اسمهdiv حضرتك لما جيت تعمل "left special" واديته كلاس اسمه divوبعدين حبيت تعلم عملتcssازاى حضرتك فى فايل ال   .special  float:right ..وحطيت جواه خاصيه واحده وهى زي لونه يبقى ازرق وكده left ده اخد بقيت الخواص بتاعه الكلاس divازاى بقا ال   ممكن توضيع فى الموضوع ده علشان انا مش قادر اتخيلها بس
Elzero Web School (3 years ago)
+Ahmed Anas الله يكرمك يارب اخي الحبيب انا اديت للديف كلاسين مش واحد بس واحد الي فيه خاصية الفلوت بس و التاني فيه الخواص الموجود فيها الالوان و كله اللي هو السبيشيال و عادي ان العنصر ياخد اكتر من كلاس و ياخد خواص الكلاسات كلها الموجودة فيه
Ahmed Raafat (3 years ago)
عايز ابدا حياتى من جديد :D
+Ahmed Raafat انت جى تحقق احلامك هنا
Elzero Web School (3 years ago)
الله يرفقك يارب :D

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.