خب حالا وقتشه که شما
طرح‌بندی مبتنی بر float خودتون رو بسازید
تا همه‌چیزهایی که تا اینجا یاد گرفتیم رو تمرین کنید
در این بخش تا حالا
و یک بار دیگه در این بخش ادامه می‌دیم
روی همین مثال کفش کار کنیم
و این دقیقاً همون جاییه که بعد از چالش قبلی رهاش کردیم
پس مثل همیشه لطفاً همون رو به‌عنوان نقطه شروع استفاده کنید
و اگه کد رو ندارید فقط اون رو بگیرید
از لینکی که توی این درس قرار می‌دم باشه؟
اما در هر صورت بعد از اینکه طرح‌بندی float رو ساختیم
این همون شکلیه که کامپوننت ما باید دیده بشه
اولین کاری که احتمالاً باید انجام بدید
اینه که اون ترفند box-sizing رو فعال کنید
یعنی همونی که توی درس قبلی یاد گرفتیم
و بعد از اون می‌تونید شروع کنید به استفاده از float
مثلاً برای قرار دادن برچسب "ارسال رایگان" اینجا
در سمت راست درست کنار این قیمت
بعد این پایین برای این رنگ‌ها
اینجا در واقع نیازی به استفاده از float نیست
چون قبلاً این مشکل رو حل کرده بودیم
توی یه چالش دیگه
پس از inline-block استفاده کرده بودیم
برای اینکه این رنگ‌ها کنار هم قرار بگیرن
یادتون باشه
پس الان دیگه نیازی نیست اون رو تغییر بدیم
و در نهایت بخش اصلی
این چالش اینه که این لایوت رو بسازید
که این سه بخش کنار هم قرار بگیرن
پس چیزی که می‌خوام اینه که شما یه container بسازید
که این تصویر داخلش باشه
و بعد یه المنت دیگه داشته باشه
که همه‌ی این بخش رو در خودش داشته باشه
و بعد یه المنت دیگه که همه‌ی این قسمت رو شامل بشه
خب الان فکر می‌کنم
همه‌ی این محتوا اینجاست
فقط یکی بعد از دیگری بدون هیچ جداسازی
یعنی بدون اینکه داخل جعبه‌های جدا باشن درسته؟
بله همینطوره
اما چیزی که الان لازمه انجام بدید اینه که
این دوتا رو توی یه جعبه بذارید و این
یعنی همه‌ی این بخش‌ها رو توی یه جعبه‌ی دیگه
تا بعد بتونید اون‌ها رو کنار هم بچینید
مثل همین چیزی که اینجا داریم
باشه؟
پس دوباره همه‌ی این‌ها باید باشن
داخل یک المنت container و بعد به‌عنوان المنت‌های فرزند
باید این تصویر باشه و بعد یک Div
پس یه جعبه که همه‌ی این‌ها رو شامل بشه
و بعد یه Div دیگه که این دوتا رو شامل بشه
بعد بین این المنت‌ها
۴۰ پیکسل فاصله داریم
اینجا
و اینجا
و بعد بر اساس اون باید
عرض هر دوی این المنت‌ها رو مشخص کنید
یعنی این یکی و این یکی
و اگه این کار خیلی سخت یا گیج‌کننده به نظر میاد
نگران نباشید فقط می‌تونید از عرض ۲۴۰ پیکسل استفاده کنید
و بعد من براتون توضیح می‌دم چطور عرض دقیق رو برای هر جعبه محاسبه کردم
برای هر کدوم از باکس‌ها
خب فکر کنم همین باشه
برای دستورالعمل‌هایی که برای این چالش لازم دارید
و شاید بخواید اون‌ها رو بنویسید
تا دنبال کردنشون براتون راحت‌تر بشه
چون واقعاً کارهای زیادی هست که باید انجام بدید
و این واقعاً یک چالش جدی براتونه
پس دوباره نگران نباشید
اگه نتونستید ۱۰۰٪ کاملش کنید
مهم اینه که حداقل بخشی از کد رو
خودتون بنویسید و امتحانش کنید باشه!
پس هرچقدر زمان نیاز دارید بگذارید و بعد فقط
برگردید اینجا به ویدیو تا راه‌حل من رو ببینید
خب چطور پیش رفتید؟
امیدوارم حداقل بخشی از این چالش رو انجام داده باشید
پس بریم که شروع کنیم
همونطور که گفتم اولین کاری که می‌خوام بکنم
اینه که مدل جعبه (box model) رو با box-sizing درست کنم
و مقدارش border-box باشه معلومه
و بعد شروع کنیم کار کردن
با این دوتا المنت اینجا که کنار هم بذاریمشون
یعنی قیمت و ارسال
این کار خیلی ساده‌ست
پس float
left نه keft
واضحه دیگه
و بعد اینجا هم float.
Right
خب درسته؟
خب یه جورایی درست به نظر نمیاد
و دلیلش اینه که الان این تصویر بزرگ‌تره
و داره اطراف اون هم float می‌کنه
پس احتمالاً کاری که باید همین الان انجام بدیم اینه که
همه‌ی محتوا رو بذاریم
داخل همون containerی که گفتم
پس هر چیزی که بعد از این تصویر میاد
باید داخل یه Div جدید باشه
که من اینجا اسمش رو گذاشتم
product info
خب درسته؟
خب اینو اینجا باز می‌کنیم
و بعد می‌خوایم همه‌چیز داخل اون باشه
تا آخر بخش رنگ‌ها
پس اینجا می‌بندیمش
و باز هم متأسفانه
CodePen به صورت خودکار برامون فرمت‌بندی انجام نمی‌ده
ولی خب همین‌طوری بذاریمش
نیازی نیست برای این مثال کوچیک خیلی سخت بگیریم
خب حالا من این بخش دیگه رو می‌ذارم
یعنی این دوتا اینجا رو داخل یک div دیگه
دقیقاً همونطور که توی بخش دستورالعمل‌ها بهتون گفتم
و اسم این یکی رو می‌ذارم جزئیات محصول
خب و اینجا می‌بندیمش
بعد از این ul و قبل از دکمه
و حالا هرکدوم داخل جعبه خودشون هستن
پس اون مشکلی که عکس بین این دوتا بخش بود
دیگه حل شد
اما هنوز یه مشکل داریم
و اونم اینه که حالا این پاراگراف اینجا داره شناور می‌شه
یا در واقع اومده بین این دوتا بخش
درسته؟
خب کاری که می‌تونیم بکنیم اینه که بریم سراغ این المنت
که این یکیه توضیحات محصول
و همونجا float رو پاک کنیم
خب
کجاست؟
ببینیم
فکر کنم در واقع هنوز ازش استفاده نکرده بودم
پس بذارین پیستش کنم
اینجا بالا
و بگیم clear
both
و همینه اون مشکل float هم حل شد
درسته؟
پس هر وقت با float مشکل داشتید
و یه المنت جایی قرار گرفت که نمی‌خواستید
کافیه
به این شکل float رو پاک کنید
البته یه راه دیگه هم این بود که
این دوتا المنت رو اینجا بذاریم
داخل یه container دیگه
و بعد می‌تونستیم کلاس clearfix رو
به اون container اضافه کنیم
پس همون ترفند clearfix که یه کم قبل‌تر بهتون نشون دادم
که در واقع همین الانم قراره دوباره بهش نیاز پیدا کنیم
به هر حال این بخش دیگه تموم شد
و حالا بریم سراغ لایوت کلی اینجا
پس المنت‌هایی که توی لایوت نقش دارن
البته این سه تا جعبه هستن
این عکس این جعبه‌ای که الان ساختیم
و این یکی
درسته؟
پس این شد عکس
این شد اطلاعات محصول
پس بذاریمش اینجا بالای
بخش اطلاعات محصول
و بعد هم
جزئیات محصول
و این رو هم بذاریم اینجا نزدیک جزئیات
خب
و همونطور که می‌گفتم اولین کاری که باید بکنیم
اینه که یه عرض مشخص کنیم
برای این المنت‌ها
خیلی خب
پس این کارو می‌کنیم و اینجا یه کامنت اضافه می‌کنم
تا بتونم محاسباتی که انجام می‌شه رو بهتون نشون بدم
خب عرض کل این container برابر با 825 هست
درسته؟
و همینطور یه بوردر چهارتایی هم در هر طرف داره
پس اینجا محاسبه می‌شه 280 پیکسل
منهای هشت
که این دوتا بوردر در هر طرف هستن
بعد منهای 250 که عرض این عکسه
خب
کجاست؟
ببینیم
اینجا انگار مشخص نشده
آها در واقع ما اینجا ارتفاع و عرض رو تنظیم کرده بودیم
برای همین ندیده بودمش
ولی آره! می‌دونستم که 250 هست
پس باید اون رو هم از کل کم کنیم
پس اون 280 نیست در واقع 825 هست
نمی‌دونم اون از کجا اومده بود
و بعد یادتونه گفتم
که می‌خوایم اینجا و اینجا 40 پیکسل داشته باشیم
و خب اونم فضاییه
که نمی‌تونیم برای ستون‌ها استفاده کنیم
پس باید اون رو هم کم کنیم
یعنی منهای 80
پس در واقع نتیجه‌ی این محاسبه اینجا
مقدار دقیق فضایی می‌شه
که برای پر کردن ستون‌ها داریم
پس من این محاسبه رو انجام می‌دم
با استفاده از این قابلیت روی مک
ولی شما می‌تونید به هر روش دیگه‌ای انجامش بدید
پس 850 منهای هشت منهای 250 منهای 80
خب این می‌شه کل عرضی که در دسترسه
برای دو ستون ولی خب ما دوتا ستون داریم
پس باید همه‌ی این رو تقسیم بر دو کنیم
یعنی بذاریمش توی پرانتز و تقسیم بر دو کنیم
و بنابراین نتیجه میشه 2435 پیکسل
پس بیایید اون اعشار رو استفاده نکنیم
و فقط از 443 پیکسل استفاده کنیم
خب
با
243 پیکسل
که بر دو تقسیم بشه
بعد همون مقدار رو روی ستون دیگه اینجا بذاریم
که این یکیه
خب این جواب داد
و حالا کاری که باید بکنیم اینه که
این سه المنت رو فِلوت کنیم
پس اول تصویر که در واقع هنوز انتخابش نکردیم
پس بیایید بهش یک کلاس بدیم به نام
product-image
و اون رو بذاریم
شاید یه جایی اینجا
خب نه در واقع نه
بیایید در واقع بیرون اینجا بذاریمش
پس طول و عرض رو لازم نیست با CSS تعریف کنیم
چون قبلاً همین‌جا مشخص شده
اما بیایید فِلوت رو تعریف کنیم و اون رو به سمت چپ فِلوت بدیم
و حالا همین کار رو با بقیه انجام بدیم
پس فِلوت به سمت چپ
و
اینجوری
و اینو ساده کپی کنیم برای اون یکی دیگه
و اون رو هم به چپ فِلوت بدیم
خیلی خب این الان قشنگ شده
حالا فقط باید اون 40 پیکسل رو اضافه کنیم
برای فاصله‌ای که می‌خواستیم
پس برای این از margin استفاده کنیم
پس من فقط یک margin-right اضافه می‌کنم
روی تصویر و همین المنت اینجا
پس margin-right
40 پیکسل
و بعد همین‌طور روی
این یکی
و با این کار خب خیلی نزدیک شدیم
به لایه‌بندی نهایی‌مون درسته؟
فقط بیایید یه سری جزئیات ظاهری اینجا اضافه کنیم
مثلاً یه padding این بالا برای این یکی اضافه کنیم
پس padding
بگیم 40 پیکسل
خب این یه کم زیادیه
باشه؟ و حالا متوجه شدم
که این رنگ‌ها دیگه این پایین درست جا نمی‌شن
پس ببینیم چرا اینطوریه
خب شاید لازمه یه کم فاصله رو کم کنیم
بینشون یا در واقع من اینجا یه اشتباه کردم
چون padding رو به همه جهات دادم
و به همین خاطر الان همه‌چی خیلی تنگ شده
در واقع فقط می‌خواستم padding-top بیست پیکسل باشه
آره و حالا دیگه خیلی بهتر شد طبیعتاً
خب حالا مرحله بعد بیایید یه margin اینجا اضافه کنیم
برای این برچسب ارسال رایگان
تا به صورت دستی این رو با این مقدار اینجا تراز کنیم
پس margin-top
بگیم 8 پیکسل
راستی همه این کارهایی مثل
تراز دستی المنت‌ها به این شکل دیگه یه چیز
قدیمی میشه وقتی شروع به استفاده از فلکس‌باکس کنیم باشه؟
فلکس‌باکس خیلی کمک‌کننده خواهد بود
واقعا عالی خواهد بود
دیگه لازم نیست هیچ
از این کارهای حدسی برای تراز کردن عمودی انجام بدیم
همچنین دیگه لازم نیست محاسبات دستی انجام بدیم
برای عرض مثل این
چون همه اینا به صورت خودکار محاسبه میشن
توسط فلکس‌باکس در آینده
پس این خیلی کمک‌کننده خواهد بود
و واقعاً نمی‌تونم صبر کنم بهت نشونش بدم
حالا بیایید یه مقدار فاصله به این پاراگراف اضافه کنیم
خب
ببینیم آیا قبلاً انتخابش کردیم یا نه آره اینجاست
پس بذارید margin بدیم
margin-bottom ده پیکسل همینجا
و در آخر بیایید فاصله اینجا رو یکمی درست کنیم
چون اینجا خیلی فاصله بیشتر از اینجاست
و دلیلش اینه که هنوز margin-top داریم
روی جزئیات محصول
پس بیایید درستش کنیم
پس روی این عنوان جزئیات محصول
منظورم این یکیه
پس اون رو حذف کنیم
و به جاش یک margin اضافه کنیم
margin-top بیست پیکسل مثل کاری که این یکی دیگه کردیم
البته اینجا فکر کنم از padding استفاده کرده بودیم
اما margin بهتره قطعاً
پس بیایید بریم عقب به اون جعبه دیگه هم
و
آره پس به جای padding اینجا از margin استفاده کنیم
و اینطوری همون شکلی میشه
و با این در واقع تموم شدیم
پس این درست مثل این به نظر میاد
و بنابراین چالش با موفقیت تکمیل شد
خب حالا یه سری چیزهایی هست که می‌تونستیم
یکمی متفاوت انجام بدیم
مثلاً من بهتون گفتم
که به کلاس clearfix نیاز خواهیم داشت
اما در واقع در نهایت نیازی به اون نداشتیم
پس کاری که می‌تونستیم بکنیم این بود که
این سه المان رو داخل یک container قرار بدیم
و در واقع همون کاریه که بهت گفتم انجام بدی درسته؟
خب چرا همین الان این کار رو نکنیم
چون کار سختی نیست
پس بذار اینجا انجامش بدیم
یک div با کلاس
container
و بعد لازمه ببندیمش
در انتها درست قبل از این دکمه
خیلی خب!
پس بیاییم این container رو انتخاب کنیم تا بهش بدیم
یک رنگ پس‌زمینه
باشه؟ و حالا می‌بینی
که اون رنگ اصلاً دیده نمی‌شه
پس برای فهمیدن دلیلش بیاییم اینو بررسی کنیم
ما article داریم و داخلش H2 هست
و بعد اونجا container هست
اما حالا می‌بینی که این container ارتفاعش صفره
پس چرا فکر می‌کنی اینطوریه؟
خب دوباره دلیلش ارتفاع‌های collapse شده‌ست
پس این المان از نظر فنی هیچ ارتفاعی نداره
چون همه‌ی بچه‌هاش float شدن
درسته؟
پس بچه‌ها این سه‌تا هستن
یعنی تصویر
اطلاعات محصول و جزئیات محصول
و یادت باشه که همه‌ی این سه المان رو float کردیم
و این یعنی الان container
هیچ المان غیر float شده‌ای نداره
و بنابراین ارتفاعش collapse کرده
خب
و اگه به هر دلیلی نیاز داشتیم اینو درست کنیم
اون‌وقت می‌تونستیم از کلاس clearfix استفاده کنیم
پس دوباره این لازم نیست حتماً اسمش clearfix باشه
اما این فقط یه اسم رایجه که استفاده می‌شه
پس content هیچی نیست
display برابر با block هست
و البته
در نهایت
clear روی both تنظیم می‌شه
و حالا منتظر می‌مونیم
البته باید این رو روی اون المان هم اعمال کنیم
clearfix
و
بله
و حالا قرمز شد
که یعنی container دوباره ارتفاع گرفته
خب بیاییم اینجا کامنتش کنیم
و خب حالا دیگه واقعاً همینه اما دوباره
در واقع بدون این container هم کار می‌کرد
چون ما همه‌ی فضا رو به خوبی تقسیم کرده بودیم
پس دقیقاً مشخص کرده بودیم که عرض هرکدوم
از این المان‌ها باید چقدر باشه
و بنابراین هیچ فضایی باقی نمونده بود
برای هیچ المان بعدی
که در این مورد دکمه بود تا دورش float بشه
خب!
اما دوباره مطمئنم که کمی گیج‌کننده به نظر میاد
و دلیلش اینه که من خیلی عمیق نمی‌رم
توی اینکه دقیقاً float و clear چطور کار می‌کنن
چون برای باقی دوره
ما قراره اون‌ها رو با flexbox و CSS grid جایگزین کنیم
که همه‌ی این کارها رو خیلی خیلی راحت‌تر می‌کنن باور کن
پس اگه برای اون هیجان‌زده‌ای منتظر نمون
و بیاییم مستقیم بریم سراغ جلسه بعدی