הוסטס - פורום אחסון האתרים הגדול בישראל

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - CSS ממה זה נובע? (https://hosts.co.il/forums/showthread.php?t=92158)

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 דיבים אחד על שני
הדיב הפנימי הוא דיב עם תמונה והדיב החיצוני הוא דיב שקוף עם טקסט
מיקמתי אותם אחד על השני בעזרת מיקום אבסולוטי

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

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

קוד:

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

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

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

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

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

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

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

ציטוט:

נכתב במקור על ידי Skfir (פרסם 818767)

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

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

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