מיקום מבוסס CSS - חלק א'
הערה: מדריך זה מניח ידע מוקדם בכתיבת כללי css וכן במודל התיבה. המדריך מבוסס על מאמר מאת Mike Hall ,באישור המחבר.
מדריך זה עוסק בכללי CSS המאפשרים לסדר אלמנטים שונים על הדף ולשלוט במיקומם.
יש לזכור שדפדפן מסוים לא תומך בהכרח בתכונה כלשהי של סטנדרט ה - CSS, ולא תמיד מובטח שהוא מממש אותה בצורה נכונה. כמו כן, הסטנדרט עצמו משאיר לדפדפנים חופש פעולה בנקודות מסוימות ולכן קיימים הבדלים קלים באופן שדפדפנים שונים מיישמים תכונות CSS אלה.
ב-CSS קיימות מספר שיטות מיקום. צורת המיקום של אלמנט נקבעת ע"פ ערכי התכונות position ו - float. נסקור בקצרה את הערכים שהתכונה position עשויה לקבל:
- static: ברירת המחדל - מקם את האלמנט ע"פ כללי הזרימה הרגילים של דף HTML.
- relative: מקם את תיבת האלמנט תוך הסטתה למרחק מוגדר ממקומה הרגיל בדף.
- absolute: מקם את תיבת האלמנט תוך הסטתה למרחק מוגדר מגבולות התיבה הממוקמת שמכילה אותה.
- fixed: מקרה פרטי של absolute. התיבה המכילה שביחס אליה מתבצעת ההזזה היא חלון הדפדפן.
התכונה float עשויה לקבל את הערכים הבאים:
- right - הזז את תיבת האלמנט ימינה ככל הניתן.
- left - הזז את תיבת האלמנט שמאלה ככל הניתן.
- none - אין השפעה על האלמנט.
זרימה רגילה (normal flow)
שיטת מיקום זו היא ברירת המחדל - הדפדפן ישתמש בה עבור כל אלמנט שערך המיקום (position) שלו אינו מוגדר או שווה ל - "static". בשיטה זו, תיבות מסוג 'block' ממוקמות זו מתחת זו בתוך גבולות התיבה המכילה אותן ("תיבת האם"). יש לציין שכאשר שתי תיבות 'block' מונחות בצורה זו, אזי השוליים של העליונה מתמזגים עם שולי התיבה התחתונה באופן שנשארים השוליים העבים יותר מבין השניים.
דוגמאות:
זוהי פיסקה המוגדרת בתוך ה - div. שימו לב שהיא תופסת את כל רוחב תיבת האם שלה.
זוהי הפיסקה השניה.
שימו לב שהמרווח האנכי בין שתי הפיסקאות הינו 8px למרות שהשוליים האנכיים עבור שתי הפיסקאות (מלמעלה ומלמטה) מוגדרים ל - 8px ,לכן היינו מצפים למרווח של 16px, אולם כפי שהוסבר השוליים האנכיים של התיבות מתמזגים.
זוהי פיסקה צרה יותר
תיבות מסוג 'inline' לעומת זאת, ממוקמות זו לצד זו משמאל לימין (או מימין לשמאל אם מוגדר direction: rtl) עד לנקודה שלא נותר מקום לתיבה נוספת בתוך "תיבת האם". בשלב זה האלמנט הבא מתפצל וממשיך בשורה חדשה. לדוגמה: