מדריך CSS מספר 19 - הצפת אלמנט (float)
אחת האפשרויות למקם אלמנט אחד לצד אלמנט אחר היא באמצעות הצפה, והתכונה היא float. משתמשים בתכונת float כאשר רוצים, לדוגמה, למקם תמונה מימין או משמאל לפסקה. float יכול לקבל אחד משלושה ערכים:
• float:right כשרוצים להציף אלמנט ימינה.
• float:left כשרוצים להציף אלמנט שמאלה.
• float:none כשמעוניינים למנוע הצפת אלמנט.
כדי לראות את התכונה בפעולה נעתיק את הקוד הבא לקובץ ה-html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png">
<p>
דוגמה להצפה של אלמנט. ראה איך השימוש בהצפה גורם לתמונה לצוף מצד לצד בתוך האלמנט
זו תכונה מאוד חשובה בבנייה ובעיצוב של אתרי אינטרנט
</p>
</div>
</body>
</html>
באמצעות קוד זה אנחנו מייצרים אלמנט div שבתוכו תמונה ופסקה (חשוב לשים את התמונה בתיקיית השורש ביחד עם הקבצים ל-CSS ול-HTML).
כדי לראות את המצב הרגיל, ללא float, נכתוב את הקוד הבא לגיליון העיצוב החיצוני, style.css:
.container {
background-color: gray;
width: 200px;
height: 110px;
}
img {
width: 50px;
height: 40px;
}
משמעות הקוד היא שנותנים אורך וגובה ל-div ולתמונה (img), בנוסף לכך שנותנים צבע רקע אפור ל-div.
נריץ את קובץ ה- html על הדפדפן, ונצפה בתוצאה:
מה שאנחנו רואים זה מצב שבו האלמנטים מגובבים ללא סדר.
הצפה של אלמנט לשמאל
כדי ליצור סדר נוסיף לקובץ style.css תכונה של float. הקוד ייראה עכשיו כך (התוספת מודגשת):
.container { background-color: gray;
width: 200px;
height: 110px;
}
img {
width: 50px;
height: 40px;
float: left;
}
משמעות הקוד היא הצפה של התמונה לשמאל.
נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:
כתוצאה מהשימוש ב-float:left התמונה צפה לשמאל, והטקסט עלה למעלה ונכרך סביב התמונה.
הצפה של אלמנט לימין
נשנה שוב את הקובץ style.css, והפעם נגרום להצפה של התמונה לימין (float:right):
.container { background-color: gray;
width: 200px;
height: 110px;
}
img {
width: 50px;
height: 40px;
float: right;
}
נריץ את קובץ ה-html על הדפדפן, וזה מה שנראה:
אנחנו רואים שהתמונה צפה ימינה, והטקסט נכרך סביבה משמאל הודות לשימוש ב-float:right. כמובן, שאפשר לסדר את האלמנטים יותר יפה. לדוגמה, על ידי הוספת padding סביב הפסקה כדי להרחיק את הטקסט מהשוליים.
במדריך הבא בסדרת ה-CSS נראה שהצפת אלמנטים עלולה לגרום לבעיה, ונלמד כיצד לטפל בבעיה זו.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.