אהלן.
טכניקה שפיתחתי ואני גאה להציג לכם אותה.
אתם מכירים את המצב הזה ובו אתם צריכים להציג רשימת תוצאות חיפוש, או עמודה המכילה קוביות טקסט ולצידן תמונה המיושרת בגובה תחילת הטקסט, ושאר הטקסט, או שהוא נמוך מגובה התמונה, או שהוא בגובהה, או שהוא גבוה ממנה.
אז בד"כ היו פותרים מצב זה באמצעות טבלאות.
אנשי הסטנדרטים היו פותרים זאת בד"כ באמצעות הצפה.
הצפה היתה מיושמת בד"כ באמצעות 2 הדרכים הבאות:
1. הצפת התמונה שמאלה ונתינה לטקסט לזרום טבעית.
טכניקה זו דורשת מרגין תחתון וידיעת מידתו. תמיד תצטרך לדעת את מידת המרגין כדי לחסום את הטקסט מלגלוש תחת התמונה.
2. או הצפת התמונה, בלוק הטקסט וניקוי אחריהם.
שתי טכניקות אלו דורשות התעסקות יתרה. לשם כך באה הטכניקה שלי ופותרת אותנו מכאבי ראש אלה.
קוד הCSS:
-
.absoluteImg{
-
width:400px;
-
margin:0 auto;
-
position:relative;
-
padding-left:120px;
-
min-height:94px
-
}
-
* html .absoluteImg{
-
height:94px
-
}
-
.absoluteImg Img{
-
position:absolute;
-
top:0;
-
left:0
-
}
וקוד הHTML
-
<p class="absoluteImg">
-
<img src="Firefox2.jpg" width="111" height="94" alt="" />
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
</p>
יש לנו מיכל רלטיבי המכיל בתוכו תמונה וטקסט.
התמונה ממוקמת אבסולוטית בפינות top & left, והמיכל מקבל פאדינג שמאלי פנימי קצת יותר מרוחב התמונה.
למיכל עצמו אנו נותנים גם גובה מינימאלי כדי שאם הטקסט יהיה נמוך מגובה התמונה, המיכל ידע להציג את גובה התמונה (מכיון שאלמנט אבסולוטי איננו משפיע על גובה האב בו הוא מקונן).
מאפייני הcss של קומפוננטת absoluteImg שייכים רק להדגמה זאת.
בעולם האמיתי אתם תעבירו סלקטור זה מאלמנט P לכל אלמנט שתחליט. כנ"ל רוחב התמונה, רוחב הפסקה ומיקומה במרחב.
נא להתייחס למאפיינים אלה כנקודתיים להדגמה זו בלבד.
ובתיאבון.
אשמח לשמוע דיעות 
שלומי
July 25th, 2007 at 8:50 am
נהניתי, פתרון נחמד וחלק...
מקווה שהוא עובד יפה גם כשעושים float:right בשביל עברית..
July 25th, 2007 at 10:01 am
float:right למה בדיוק? לתוכן או לכל האלמנט?
September 29th, 2007 at 6:17 pm
very nice indeed
October 5th, 2007 at 12:53 am
חבל שאין דוגמא של התוצאה בסוף המאמר.
אם כבר הקוד כתוב, למה לא לשלב אותו בכתבה?
אבל חוץ מזה, שאפו.
October 5th, 2007 at 1:17 am
גבר, הלינק לדוגמא מופיע בתחילת המאמר ובסופו. אתה פספסת את הקישורים או שאני מפספס אותך? :S
October 11th, 2007 at 6:45 am
הכוונה היתה לשלב את הדוגמא בתוך המאמר עצמו. מדוע צריך לצאת מהעמוד כדי לראות את הדוגמא? (פחות קליקים
July 10th, 2008 at 10:15 pm
אהלן.
קודם כל, בלוג נחמד מאוד.
לגבי המאמר הזה - אני לא מבין למה הלכת על כזה פיתרון מסורבל. אפשר להגיע לאותה תוצאה פשוט ע"י הצפת התמונה לכיוון מסוים, והכנסת אלמנט בלוק אחריה עם מרג'ין ברוחב התמונה לכיוון ההצפה.
אתן דוגמה: (נתתי סטייל אין-ליין בשביל הנוחות)
July 11th, 2008 at 12:00 am
צודק לחלוטין. לא יודע למה לא חשבתי על זה כשכתבתי את המאמר. חייבת להיות סיבה לכך.
לא ברור...