הוסטס - פורום אחסון האתרים הגדול בישראל
עמוד 1 מתוך 2 1 2
הצג 40 הודעות באשכול על דף אחד

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)
-   פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)
-   -   הכלת DIV בDIV (https://hosts.co.il/forums/showthread.php?t=97681)

Senior 05-06-12 22:31
הכלת DIV בDIV
 
היי, נתקלתי בבעיה שאני לא ממש מוצא לה פתרון..

נניח יש לי DIV שקוראים לו CONTAINER ויש בו 2 DIVים:
DIV אחד אני רוצה ליישר לימין
וDIV אחד אני רוצה ליישר לשמאל
(בדומה אם משהו מכיר לעיצוב שמגיע עם WORDPRESS - התוכן והsidebar).

הבעיה שכשאני קובע שאחד הוא FLOAT ל LEFT ואחד הוא לRIGHT.
הCONTAINER שלי לא גדל לפי הDIVים..כלומר פתאום הHEIGHT שלו לא מותאם
עם הHEIGHT של הDIVים שבתוכו..הם כאילו יצאו ממנו ולא שייכים אליו..(אני מעוניין שהHEIGHT של הCONTAINER
יהיה לפי הDIV הגדול משניהם בעצם).

ניסיתי לשחק גם עם ה display: inline אבל גם לא הצלחתי..

משהו יודע איך אני גורם להם "להישאר" בDIV שמכיל אותם?

תודה רבה!

נדב

meshuga 05-06-12 22:45
תוסיף עוד DIV אחריהם עם clear:both זה יעבוד כמו שצריך.

Senior 05-06-12 23:04
וואו כמה פשוט :)

ממש תודה!

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

איציק ברבי 05-06-12 23:36
המטרה של clear:both היא שלא יווצר מצב ויעלה עליו אלמנט אחר.

IgalSt 06-06-12 00:05
ציטוט:
נכתב במקור על ידי meshuga (פרסם 846174)
תוסיף עוד 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 06-06-12 09:51
ציטוט:
נכתב במקור על ידי IgalSt (פרסם 846188)
למרות שזה עובד, הפתרון הזה לא מומלץ.
ככלל, אין שום סיבה ללכלך את ה-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 06-06-12 11:23
ציטוט:
נכתב במקור על ידי meshuga (פרסם 846211)
קודם כל תודה, חידשת לי, המאמר נהדר. למרות שאני לא שש אף פעם ללכת על חידושים מהסוג הזה בעיקר בגלל תמיכת דפדפן.
זה תלוי מה הדרישות. אם הדרישות לקוח שלך הם תקינות גם בIE7 לדוגמא, אין לך ממש ברירה כי זה לא נתמך שם.
כיום אני יכול להגיד שרוב הלקוחות (בעיקר בתחום העסקי שם לא "רצים" לעדכן מערכות הפעלה) שפועלים על XP עם IE7..זה עצוב..אבל בסופו של דבר מה שהלקוח רואה (ולא ממש אכפת לו שזה רק אצלו ושזה בערך 2% מהאוכלוסיה) זה מבחינתי איך שהאתר נראה, לא איך שהגולשים רואים. איך שהוא רואה ביום יומי.
שמח שאהבת את המאמר ולמדת ממנו.
במאמר הציעו גם פתרון שעובד עבוור IE7 עם overflow:auto.

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

meshuga 07-06-12 08:37
ציטוט:
נכתב במקור על ידי IgalSt (פרסם 846219)
שמח שאהבת את המאמר ולמדת ממנו.
במאמר הציעו גם פתרון שעובד עבוור IE7 עם overflow:auto.

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

IgalSt 07-06-12 10:59
ציטוט:
נכתב במקור על ידי meshuga (פרסם 846318)
כמו שאמרתי, הרוב תלוי בלקוח. ומה שהלקוח רוצה, הלקוח מקבל, אם הוא רוצה שזה יהיה זהה בכולם, אז נלך על האופציה הנחותה יותר (או המסורבלת יותר או הלוקחת יותר משאבים (שימוש בתמונות לרדיוס עגול) שימוש בJS בשביל דברים שCSS3 עושה) כדי שהוא יקבל את האתר שלו, איך שהוא רוצה.
אני לא חושב שזו הגישה הנכונה. אתה לא צריך להעניש את כל אותם הגולשים שמשתמשים בדפדפן מודרני בגלל לקוח שלא שומע בעצתך ומחליט שהוא יותר טוב מאיש המקצוע שהוא שכר.

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

meshuga 07-06-12 13:26
ציטוט:
נכתב במקור על ידי IgalSt (פרסם 846323)
אני לא חושב שזו הגישה הנכונה. אתה לא צריך להעניש את כל אותם הגולשים שמשתמשים בדפדפן מודרני בגלל לקוח שלא שומע בעצתך ומחליט שהוא יותר טוב מאיש המקצוע שהוא שכר.

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


כל הזמנים הם GMT +2. הזמן כעת הוא 15:41.
עמוד 1 מתוך 2 1 2
הצג 40 הודעות באשכול על דף אחד

מופעל באמצעות VBulletin גרסה 3.8.6
כל הזכויות שמורות ©
כל הזכויות שמורות לסולל יבוא ורשתות (1997) בע"מ