הכלת DIV בDIV

[meshuga]

תוסיף עוד DIV אחריהם עם clear:both זה יעבוד כמו שצריך.

[Senior]

וואו כמה פשוט

ממש תודה!

ד"א , למה זה קורה באמת? ולמה צריך להוסיף את השורה הזאת?

[IgalSt]

נכתב במקור על ידי meshuga

תוסיף עוד DIV אחריהם עם clear:both זה יעבוד כמו שצריך.

למרות שזה עובד, הפתרון הזה לא מומלץ.
ככלל, אין שום סיבה ללכלך את ה-DOM ע"י הוספת אלמנטי כדי לטפל ב"בעיות" עיצוביות.
העיקרון הבסיסי הוא ההפרדה בין התוכן (HTML) לעיצוב (CSS)

פתרון יותר טוב לבעיה יהיה עם generated content:

#CONTAINER:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

הקוד הזה מגיע ממאמר מעולה על floats שאני ממליץ בחום לקרא:
All About Floats מ-css-tricks

[meshuga]

נכתב במקור על ידי IgalSt

למרות שזה עובד, הפתרון הזה לא מומלץ.
ככלל, אין שום סיבה ללכלך את ה-DOM ע"י הוספת אלמנטי כדי לטפל ב"בעיות" עיצוביות.
העיקרון הבסיסי הוא ההפרדה בין התוכן (HTML) לעיצוב (CSS)

פתרון יותר טוב לבעיה יהיה עם generated content:

#CONTAINER:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

הקוד הזה מגיע ממאמר מעולה על floats שאני ממליץ בחום לקרא:
All About Floats מ-css-tricks

קודם כל תודה, חידשת לי, המאמר נהדר. למרות שאני לא שש אף פעם ללכת על חידושים מהסוג הזה בעיקר בגלל תמיכת דפדפן.
זה תלוי מה הדרישות. אם הדרישות לקוח שלך הם תקינות גם בIE7 לדוגמא, אין לך ממש ברירה כי זה לא נתמך שם.
כיום אני יכול להגיד שרוב הלקוחות (בעיקר בתחום העסקי שם לא "רצים" לעדכן מערכות הפעלה) שפועלים על XP עם IE7..זה עצוב..אבל בסופו של דבר מה שהלקוח רואה (ולא ממש אכפת לו שזה רק אצלו ושזה בערך 2% מהאוכלוסיה) זה מבחינתי איך שהאתר נראה, לא איך שהגולשים רואים. איך שהוא רואה ביום יומי.

[IgalSt]

נכתב במקור על ידי meshuga

קודם כל תודה, חידשת לי, המאמר נהדר. למרות שאני לא שש אף פעם ללכת על חידושים מהסוג הזה בעיקר בגלל תמיכת דפדפן.
זה תלוי מה הדרישות. אם הדרישות לקוח שלך הם תקינות גם בIE7 לדוגמא, אין לך ממש ברירה כי זה לא נתמך שם.
כיום אני יכול להגיד שרוב הלקוחות (בעיקר בתחום העסקי שם לא "רצים" לעדכן מערכות הפעלה) שפועלים על XP עם IE7..זה עצוב..אבל בסופו של דבר מה שהלקוח רואה (ולא ממש אכפת לו שזה רק אצלו ושזה בערך 2% מהאוכלוסיה) זה מבחינתי איך שהאתר נראה, לא איך שהגולשים רואים. איך שהוא רואה ביום יומי.

שמח שאהבת את המאמר ולמדת ממנו.
במאמר הציעו גם פתרון שעובד עבוור IE7 עם overflow:auto.

האמת, אני כבר כמה חודשים שלא מתייחס ל-IE7 כלל, וטוב שכך.
הפילוסופיה שלי, ושל מפתחי front רבים נוספים, היא שיש גבול כמה טעויות היסטוריות של מיקרוסופט יכולות להאט את התפתחות האינטרנט.
אני אדאג לנראות סבירה ב-IE7 וב-IE8, אבל לא אתעקש על דברים שלא עובדים.
לדוגמה קח את העמוד תוצאות תחרות נטקראפט שעבדתי עליו (בצוות) בשבוע שעבר. התמקדנו בדפדפנים מודרנים והיית נפילה הדרגתית של התמיכה בהתאם לכיולות הדפדפן. IE9 לא מתמודדת עם אנימציות CSS? לא נוראה. הוא פשוט יקפוץ בין המצבים האלה. IE8 לא תומך ב-border-radius? אז יהיו שם ריבועים ולא עיגולים וכו'.

[meshuga]

נכתב במקור על ידי IgalSt

שמח שאהבת את המאמר ולמדת ממנו.
במאמר הציעו גם פתרון שעובד עבוור IE7 עם overflow:auto.

האמת, אני כבר כמה חודשים שלא מתייחס ל-IE7 כלל, וטוב שכך.
הפילוסופיה שלי, ושל מפתחי front רבים נוספים, היא שיש גבול כמה טעויות היסטוריות של מיקרוסופט יכולות להאט את התפתחות האינטרנט.
אני אדאג לנראות סבירה ב-IE7 וב-IE8, אבל לא אתעקש על דברים שלא עובדים.
לדוגמה קח את העמוד תוצאות תחרות נטקראפט שעבדתי עליו (בצוות) בשבוע שעבר. התמקדנו בדפדפנים מודרנים והיית נפילה הדרגתית של התמיכה בהתאם לכיולות הדפדפן. IE9 לא מתמודדת עם אנימציות CSS? לא נוראה. הוא פשוט יקפוץ בין המצבים האלה. IE8 לא תומך ב-border-radius? אז יהיו שם ריבועים ולא עיגולים וכו'.

כמו שאמרתי, הרוב תלוי בלקוח. ומה שהלקוח רוצה, הלקוח מקבל, אם הוא רוצה שזה יהיה זהה בכולם, אז נלך על האופציה הנחותה יותר (או המסורבלת יותר או הלוקחת יותר משאבים (שימוש בתמונות לרדיוס עגול) שימוש בJS בשביל דברים שCSS3 עושה) כדי שהוא יקבל את האתר שלו, איך שהוא רוצה.

[IgalSt]

נכתב במקור על ידי meshuga

כמו שאמרתי, הרוב תלוי בלקוח. ומה שהלקוח רוצה, הלקוח מקבל, אם הוא רוצה שזה יהיה זהה בכולם, אז נלך על האופציה הנחותה יותר (או המסורבלת יותר או הלוקחת יותר משאבים (שימוש בתמונות לרדיוס עגול) שימוש בJS בשביל דברים שCSS3 עושה) כדי שהוא יקבל את האתר שלו, איך שהוא רוצה.

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

ישנם הרבה פתרונות יותר טובים נוחים לעבודה. החל מ- conditional comments שתופסים רק IE לדורותיו ושם אתה עושה תיקונים ועוזר לדפדפן להבין. יש גם שיטה נוספת לכתיבת סלקטורים לדפדפן IE ספציפי ע"י נתינת class מתאים לתגית ה-html (ישנה דוגמה ב- html5 boilerplate) וגם ישנם פתרונות כמו PIE.htc שעוזרים לך ללמד דפדפנים מיושנים לתמוך בחלק מתכונות css3.

[meshuga]

נכתב במקור על ידי IgalSt

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

ישנם הרבה פתרונות יותר טובים נוחים לעבודה. החל מ- conditional comments שתופסים רק IE לדורותיו ושם אתה עושה תיקונים ועוזר לדפדפן להבין. יש גם שיטה נוספת לכתיבת סלקטורים לדפדפן IE ספציפי ע"י נתינת class מתאים לתגית ה-html (ישנה דוגמה ב- html5 boilerplate) וגם ישנם פתרונות כמו PIE.htc שעוזרים לך ללמד דפדפנים מיושנים לתמוך בחלק מתכונות css3.

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