float vs inline-block – מתי להשתמש בכל אחת מההגדרות

לעיתים לא נדירות בכל בעת בנית אתר נצטרך למקם יותר מאלמנט אחד בשורה. אם ניקח לצורך העניין שיש לנו div – ההגדרה הדיפולטיבית שלו היא שהוא בלוק – מה שאומר שהוא כברירת מחדל יתפוס לנו שורה שלמה (אלא אם הגדרנו לו רוחב), ובנוסף, הוא ישבור שורה אחרי האלמנטים שלפניו ולפני אלו שאחריו. (קראו עוד על … להמשך קריאהfloat vs inline-block – מתי להשתמש בכל אחת מההגדרות

חשבתם שיישור אופקי לאמצע מורכב מידי? כדאי שתחשבו שוב…

כשאנחנו מדברים על יישור אופקי למרכז – מימין לשמאל – יש מס' מצבים, שלכל אחד מתאים פתרון אחר. יישור אלמנט block בעל רוחב קבוע כשרוצים ליישר אלמנט עם display: block + רוחב קבוע – פשוט מגדירים שוליים אוטומטיים משתי הצדדים, מה שיגרום לשוליים להתחלק שווה בשווה בין ימין ושמאל: margin-right: auto; margin-left: auto. יש לשים … להמשך קריאהחשבתם שיישור אופקי לאמצע מורכב מידי? כדאי שתחשבו שוב…

display – המדריך המלא להגדרה

במאמר הזה נסביר בעז"ה על סוגי הערכים שניתן לתת תחת ההגדרה של display. ומה המשמעות של כל הגדרה לעומת ההגדרות האחרות ובכלל. display: none נתחיל מהפשוטה ביותר – האלמנט כאילו לא קיים. הוא לא נראה, הוא לא תופס מקום, פוקוס לא מגיע אליו. display: block המשמעות שלו היא כשמו: בלוק. בהיעדר הגדרות ייעודיות יורד שורה אחרי … להמשך קריאהdisplay – המדריך המלא להגדרה

יישור אנכי לאלמנטים

בפוסט זה נדון על יישור אנכי לאלמנטים ביחס לאלמנטים אחרים. קיימות סיטואציות שונות בה אנו רוצים ליישר אלמנטים, ולכל סיטואציה הפתרון/ות שלה. יישור שורה אחת בכפתור הבעיה נתחיל מהמצב הפשוט ביותר. יש לנו כפתור בגובה מסויים, ואמור להיות בו טקסט כלשהו. לדוגמא כפתור שליחה של טופס. אנו רוצים שהטקסט יהיה מיושר בתוך הכפתור. הפתרון אם נניח … להמשך קריאהיישור אנכי לאלמנטים