مرجع رسمی مقالات تخصصی طراحی وب

نکات طراحی سایت بدون استفاده از Float

خلأ اضافه، ایراد دائمی ! طراحی سایت برگردیم به نمونه تگ، هنگامی که متنی را باطن فولدر HTML وارد می کنید به طور دیفالت کل خلأ پشت هم داخل آن تبدیل به یک کاراکتر space می گردد، سوای اینکه تک تک مسافت ای که داشتیم را درنظر بگیرد، به این ترتیب هرچقدر مسافت ای که فی مابین المنت های خویش در پباده سازی داشتید با یک اسپیس جایگزین می‌شود، دقیقا مانند گزاره ها، این فعالیت منجر می گردد محاسباتی که درباره با سایز المنت ها داشتید بهم بخورد و آخری المنت با یک ضربه ی کوچک به خط بعدی بپرد، خوشبختانه برای حل این نقص‌ یکسری چاره داریم، به عنوان مثال :


    فونت سایز را 0 نمایید، space ای که از آن کلام میکردیم یک کاراکتر مسافت میباشد به این ترتیب زمانی که font-size:0 خواهد شد این مسافت به راحتی به صفر می‌رسد، در این شیوه حل ممکن میباشد شما ناچار گردید font-size المنت های فرزند را برابر با یک سری em قرار دهید، براین اساس راهکار رنج میباشد که المنت انتها خویش را در بالای برگه قرار دهید و ممکن میباشد مجدد المنت شما به تحت برگه سقوط نماید، بدین ترتیب این شیوه نیکی وجود ندارد.


    مسافت ی در بین المنت ها را در پوشه HTML خویش تمیز نمایید، در سود مسافت ی فی مابین المنت ها نیز ازبین میرود، اما به کار گیری از این‌راه حل برای وقت گیر بازه سبب ساز می شود که نتوانید کد HTML خویش را بازبینی و بازخوانی فرمایید بدین ترتیب راه درستی وجود ندارد.


    افزودن کامنت در بین المنت هایتان سبب می گردد فضای اضافه فی مابین آن‌ها از در میان برود و این کاری میباشد که دقیقا در نمونه بالا ایفا دادیم، این شیوه حل را به بقیه راه‌حل ها ترجیح می دهیم، این عمل سبب ساز می‌گردد اندازه ای که برای هر المنت در حیث گرفتیم را بتوانیم به نیکی در طرحمان اجرا کنیم.


چرا به کار گیری از Float را سوراخ کنم ؟


ممکن میباشد با خویش تصور کنید Float به نیکی برای اینجانب فعالیت میکند و تا به امروز مشکلی ساخت نکرده میباشد، به چه دلیلی به کارگیری از آن را کنار بگذارم ؟ در شرایطی‌که حتی شما در به کارگیری از Float تماما ماهر باشید، مواقعی میباشد که ابدا با Float نمیتوانید پیاده سازی فرمائید، به عنوان مثال :


    تشکیل داد یک float در اواسط کاغذ، اکثر وقت ها زمان ها این عمل با ایراد اعمال می شود و سبب ساز می شود تگ ها و مختصات CSS بی گزینه به کاغذ ی خویش اضافه فرمایید، با به کار گیری از خواص display این عمل به راحتی به وسیله دادن مقدار text-align:center به عنصر wrapper اعمال میگردد.


    شایسته ترین خصوصیت به کارگیری از متد display این میباشد که می‌توانید محتوای خویش را جهت دهی نمائید، تا حال چند دفعه میخواستید یک المنت را نسبت به اخوی یا این که خواهرش در میانه قرار دهید ؟ بدون چاره میشدید از position و margin های منفی و یکسری حقه استعمال نمایید تا این عمل را جاری ساختن دهید، در هنگام پباده سازی یک طرح رسپانسیو نمیتوانید این عمل را به راحتی اجرا دهید، البته در اینجا با دادن خواص vertical-align:center می توانیم عنصر را به راحتی در میانه در اختیار بگذاریم سوای اینکه نیاز به فعالیت اضافه ای داشته باشیم، بدین نمونه نگاه فرمائید.


فیض گیری


با مجموع توضیحاتی که داده شد، اینجانب هم برخی اوقات از Float در حالت خاصی به کار گیری می‌کنم، ولی به کارگیری از خط مش حلی که در صدر گفته شد سبب می‌گردد پباده سازی ایده آل تری داشته باشیم و همینطور با خطاها کمتری در هنگام پباده سازی مواجه شویم.

[ بازدید : 9 ]

[ دوشنبه 17 خرداد 1400 ] 15:19 ] [ علی سلطانی ]

[ ]

ساخت وبلاگ
اخبار فیلم و سریال مهاجرت به کانادا از طریق کار بوتاکس مجله گويا آی‌ تی مجله مایکت
بستن تبلیغات [x]