CSS ממה זה נובע? - הוסטס

morsrh · 13-09-11, 23:38

אהלן ,

יש לי קוד HTML פשוט עם טיפה CSS

HTML קוד:

<div style="width:79px;border:5px solid yellow;">
        <div style="width:79px;position:absolute;z-index:1;"><img src="funny.png"/></div>
      <div style="width:79px;opacity:0.5;position:absolute;z-index:2;overflow:hidden;color:red;">TEXT COME HERE TEXT COME HERE</div>
    </div>

ופה יש דוגמא חיה : http://jsbin.com/igeqak/4

השאלה שלי היא מה לא בסדר פה שהקווים של הבורדר נמצאים למעלה ולא מקיפים את הדיב כמו שצריך

למי שלא הבין מה רציתי לעשות זה לשים 2 דיבים אחד על שני
הדיב הפנימי הוא דיב עם תמונה והדיב החיצוני הוא דיב שקוף עם טקסט
מיקמתי אותם אחד על השני בעזרת מיקום אבסולוטי

עוד שאלה , האם זה טוב לעשות ככה עם מיקום אבסולוטי?
תודה , מור.

~~Skfir~~ · 13-09-11, 23:49

תיתן לדיב הראשון גם גובה. height + תיתן לו גם overflow
ככה

קוד:

<div style="width:79px; height: 150px; overflow: hidden; border:5px solid yellow;">

morsrh · 14-09-11, 00:30

אני לא מבין , בשביל מה להוסיף overflow אם המאפיין הזה בכלל לא משפיע
וגם למה להוסיף גובה אם גם זה לא משפיע? אני יכול לשים 10 וזה ישים לי בורדר על 10 פיקסל

הקוד אמור לשים בורדר לבד מסביב והוא לא שם אז יש פה בעיה ,
אם מישהו יודע מה הבעיה אני אשמח לפתרון
תודה , מור

~~Skfir~~ · 14-09-11, 00:37

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

morsrh · 14-09-11, 00:44

אתה מוזמן לבדוק את מה שאמרת , לאובר פלאו אין השפעה
והבורדר אמור להיות לבד , אתה לא אמור לכוון אותו!
ברור שיש פה בעיה , השאלה מה היא?

~~Skfir~~ · 14-09-11, 01:12

בדקתי מה שאמרתי, אם אתה רוצה תקשיב לי ככה עושים
האוברפלו גורם לטקסט להיות בתוך הדיב הראשי.
וגובה חייב להיות ! דיב צריך לקבל אורך וגובה חובה! אחרת הוא לא יגדל לבד. תן לו גובה תן לו אובר פלו ויעבוד לך יפה מאוד כי לי זה עובד מדהים.
אני לא יודע מאיפה המצאת את זה שהבורדר אמור להיות לבד הבורדר עוטף את הדיב הדיב לא גודל לבד לדיף צריך לתת גודל.
אתה חייב לתת גובה בגלל שיש לך שם position:absolute הקוד הזה אומר שהטקסט לא שייך לדיב אתה מבין? אז הוא לא חלק מהגובה שלו. זה טקסט שלא קשור לכלום משייט בדף זה מה שזה אומר

הבנתי מה שאתה רוצה לעשות ובשביל לעשות את זה לא צריך להשתמש ב position:absolute
אתה יכול לשים את התמונה רקע לדיב ואז לכתוב בתוך הדיב זה הכל.

**IgalSt** · 14-09-11, 09:28

ציטוט:

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

הבנתי מה שאתה רוצה לעשות ובשביל לעשות את זה לא צריך להשתמש ב position:absolute
אתה יכול לשים את התמונה רקע לדיב ואז לכתוב בתוך הדיב זה הכל.

לאו דווקא זה הפתרון הנכון למה שהוא מנסה לעשות.
תמונת רקע != תמונה אמיתית.
לדוגמה גוגל לא יזהה את תמונת הרקע כתמונה, אי אפשר לתת לה ALT וכו'.
כמו כן בהדפסה תמונות רקע לא מודפסות בעוד שתמונות אמיתיות כן.

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

morsrh · 14-09-11, 11:26

תודה רבה

13-09-11, 23:38	# 1
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	CSS ממה זה נובע? אהלן , יש לי קוד HTML פשוט עם טיפה CSS HTML קוד: <div style="width:79px;border:5px solid yellow;"> <div style="width:79px;position:absolute;z-index:1;"><img src="funny.png"/></div> <div style="width:79px;opacity:0.5;position:absolute;z-index:2;overflow:hidden;color:red;">TEXT COME HERE TEXT COME HERE</div> </div> ופה יש דוגמא חיה : http://jsbin.com/igeqak/4 השאלה שלי היא מה לא בסדר פה שהקווים של הבורדר נמצאים למעלה ולא מקיפים את הדיב כמו שצריך למי שלא הבין מה רציתי לעשות זה לשים 2 דיבים אחד על שני הדיב הפנימי הוא דיב עם תמונה והדיב החיצוני הוא דיב שקוף עם טקסט מיקמתי אותם אחד על השני בעזרת מיקום אבסולוטי עוד שאלה , האם זה טוב לעשות ככה עם מיקום אבסולוטי? תודה , מור.

13-09-11, 23:49	# 2
~~Skfir~~ חסום מיני פרופיל תאריך הצטרפות: May 2009 מיקום: הוד השרון גיל: 33 הודעות: 552	תיתן לדיב הראשון גם גובה. height + תיתן לו גם overflow ככה קוד: <div style="width:79px; height: 150px; overflow: hidden; border:5px solid yellow;">

14-09-11, 01:12	# 6
~~Skfir~~ חסום מיני פרופיל תאריך הצטרפות: May 2009 מיקום: הוד השרון גיל: 33 הודעות: 552	בדקתי מה שאמרתי, אם אתה רוצה תקשיב לי ככה עושים האוברפלו גורם לטקסט להיות בתוך הדיב הראשי. וגובה חייב להיות ! דיב צריך לקבל אורך וגובה חובה! אחרת הוא לא יגדל לבד. תן לו גובה תן לו אובר פלו ויעבוד לך יפה מאוד כי לי זה עובד מדהים. אני לא יודע מאיפה המצאת את זה שהבורדר אמור להיות לבד הבורדר עוטף את הדיב הדיב לא גודל לבד לדיף צריך לתת גודל. אתה חייב לתת גובה בגלל שיש לך שם position:absolute הקוד הזה אומר שהטקסט לא שייך לדיב אתה מבין? אז הוא לא חלק מהגובה שלו. זה טקסט שלא קשור לכלום משייט בדף זה מה שזה אומר הבנתי מה שאתה רוצה לעשות ובשביל לעשות את זה לא צריך להשתמש ב position:absolute אתה יכול לשים את התמונה רקע לדיב ואז לכתוב בתוך הדיב זה הכל. Last edited by Skfir; 14-09-11 at 01:19..


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

14-09-11, 00:30	# 3
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	אני לא מבין , בשביל מה להוסיף overflow אם המאפיין הזה בכלל לא משפיע וגם למה להוסיף גובה אם גם זה לא משפיע? אני יכול לשים 10 וזה ישים לי בורדר על 10 פיקסל הקוד אמור לשים בורדר לבד מסביב והוא לא שם אז יש פה בעיה , אם מישהו יודע מה הבעיה אני אשמח לפתרון תודה , מור

14-09-11, 00:37	# 4
~~Skfir~~ חסום מיני פרופיל תאריך הצטרפות: May 2009 מיקום: הוד השרון גיל: 33 הודעות: 552	אז תנסה לשים מה שאמרתי לך ותראה איזה יופי הוא שם מסביב. חייב להיות גובה גם לדיב אין מה לעשות והאוברפלו מה שזה עושה, זה מעלים את כל מה שיוצא מחוץ למסגרת יותר אם תקבע גודל טוב זה לא ישפיע על כלום

14-09-11, 00:44	# 5
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	אתה מוזמן לבדוק את מה שאמרת , לאובר פלאו אין השפעה והבורדר אמור להיות לבד , אתה לא אמור לכוון אותו! ברור שיש פה בעיה , השאלה מה היא?

14-09-11, 11:26	# 8
morsrh חבר מתקדם מיני פרופיל תאריך הצטרפות: Feb 2010 מיקום: אשקלון. גיל: 31 הודעות: 444	תודה רבה

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)