צוף לימין צוף לשמאל



שתפו את הפוסט

עוד בימים הראשונים של ההיסטוריה (האינטרנטית לפחות), כשהעולם הרישתי היה קיים רק בתיאוריה, השתמשו בטבלאות כדי לעצב דפי רשת.

כאשר נכנס הcss לארסנל הנשק של בוני ומעצבי אתרים, החלו להשתמש במיקום (positioning) על מנת לעצב דף אינטרנט שלם, ואילו בציפה השתמשו כדי לייצר אפקט מתחום הדפוס: כלומר כדי שטקסט יעטוף תמונה.

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

#wrapper{

	margin:auto 0;

	width: 500px;

}

#wrapper img{

	float:right;


}

 

ומה שיוצא הוא שהתמונה צפה ימינה והטקסט עוטף אותה, ממש כמו שרואים בפירסומי דפוס.

floatImg1

כפי שאפשר לראות, זהו שימוש מאד בסיסי בתכונת הציפה.

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

בואו נעצב דף שלם עם ציפה. נרצה שיהא אזור להדר ולפוטר (האם יש לאלה מילים ראויות בעיברית? אם כן אנא הצועו אותם לאקדמיה ללשון העברית). שיהא סייד-בר ימני (שהרי דוברי עברית אנו) ואזור לתוכן המרכזי. הדף השלם יראה כך:

witout_clear1

אופס,מה קרה? אכן ייצרנו ועיצבנו דף מלא רק עם תכונת הציפה אבל הסייד-בר ארוך מדי ויוצא אל מחוץ לדיב העוטף. זוהי אחת הבעיות המרכזיות כאשר מתחילים להשתמש בציפה בכלל ובעיצוב הדף באופן ספציפי. כדי לפתור את הבעיה משתמשים בתכונה שנקראת "ניקוי" (clearing). קודם כל נבין מדוע זה קורה.

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

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

.clear{

clear: both;

}

הוספת דיב עם קלאס. אותו דבר כמו עם תג השבירה.
הוספת תכונת האוברפלו עם הערך אוטו לאלמנט העוטף. כך:

#wrapper{

overflow : auto;

}


הוספת תכונת הניקוי לאלמנט הבא בדף.

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

#footer {

	padding: 0 10px; 


	background:#ee6699;

	clear:both;

} 

 

ועתה הדף יראה כך:

layout_with_floats1

תיקנו את הבעיה.

אני באמת חושב שהדבר החשוב ביותר שצריך לזכור לגבי הציפה היא שהיא מוציאה את האלמנט מתוך הזרימה הטיבעית של דף הhtml. ולזכור תמדי את אופני ניקוי הציפה, משום שהרבה כאבי ראש צפויים לנו במקרה של שיכחה:)

מקווה שמבוא זה יעזור לכם, קוראי החדשים.



שתפו את הפוסט

אולי יעניין אתכם לקרוא גם:


תגובה אחת על “צוף לימין צוף לשמאל”

כתיבת תגובה

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

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