שטיגליץ עיצובים

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


מאי 11, 2015 5:50 pm

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

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

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

 

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

floatImg1

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

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

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

witout_clear1

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

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

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

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

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

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

 

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

layout_with_floats1

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

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

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

כתיבת תגובה

ספק שם מלא

@

אנא ספק כתובת דוא"ל תקפה

אנא ספק כתובת אינטרנט תקפה. כגון: http://www.yoursite.com

Show Buttons
Hide Buttons