נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך 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 על הדפדפן, ונצפה בתוצאה:

דוגמה למצב כשאין משתמשים ב-float האלמנטים מגובבים ללא סדר

מה שאנחנו רואים זה מצב שבו האלמנטים מגובבים ללא סדר.

הצפה של אלמנט לשמאל

כדי ליצור סדר נוסיף לקובץ 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

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

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

 

 

הוסף תגובה חדשה

 

= 7 + 5