שיעור 14: מיקום של אלמנטים
עם מיקום CSS אתה יכול למקם אלמנט בדיוק במקום שאתה רוצה אותו בדף האינטרנט שלך. יחד עם ציפה (ראה שיעור 13), מיקום נותן לך אפשרויות רבות ליצירת תבנית עיצוב מתקדמת ומדויקת.
בשיעור זה נדון בנושאים הבאים:
העיקרון שבמיקום CSS
דמיין את חלון הדפדפן במערכת של קואורדינאטות:
העיקרון שמאחורי המיקום עם CSS הוא שאתה יכול למקם כל תיבה בכל מקום במערכת קואורדינאטות.
בוא ונאמר שאנחנו רוצים למקם כותרת. באמצעות מודל התיבה (ראה שיעור 9) הכותרת תופיע כך:
אם אנחנו רוצים שהכותרת תמוקם 100px מחלקו העליון של המסמך ו-200px מצד שמאל של המסמך, אנחנו יכולים להזין את הקוד הבא ב-CSS שלנו:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
התוצאה תהיה כזו:
כפי שאתה יכול לראות, מיקום עם CSS היא טכניקה מאוד מדויקת למיקום אלמנטים. זה הרבה יותר קל מלנסות להשתמש בטבלאות, לשנות תמונות או כל דבר אחר.
מיקום מוחלט
אלמנט שממוקם במיקום מוחלט לא יוצר כל חלל במסמך. המשמעות היא שהוא אינו משאיר חלל ריק לאחר מיקומו.
כדי למקם אלמנט במיקום מוחלט, התכונה
position נקבעת ל-absolute. לאחר מכן אתה יכול להשתמש בתכונות top, right, left ו- bottom כדי למקם את התיבה.
כדוגמה למיקום מוחלט, נבחר למקם 4 תיבות אחת בכל פינה של המסמך:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
מיקום יחסי
למיקום אלמנט באופן יחסי, התכונה
position נקבעת ל-relative. ההבדל בין מיקום מוחלט למיקום יחסי הוא באופן שהמיקום מחושב.
המיקום לאלמנט שממוקם באופן יחסי מחושב מהמיקום המקורי במסמך. זאת אומרת שאתה מזיז את האלמנט לימין, לשמאל, למעלה או למטה. באופן זה, האלמנט עדיין יוצר חלל במסמך לאחר שמוקם בו.
כדוגמה למיקום יחסי, אנחנו יכולים לנסות למקם שלוש תמונות יחסית למיקומם המקורי בדף. שים לב כיצד התמונות מותירות חלל ריק במיקום המקורי שלהן במסמך:
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
סיכום
בשני השיעורים הקודמים, למדת כיצד להציף ולמקם אלמנטים. שתי שיטות אלו נותנות לך המון הזדמנויות לבניית דפי האינטרנט שלך מבלי להשתמש בשיטות המיושנות של טבלאות ותמונות ששונו בקוד ה-HTML. במקום זה השתמש ב-CSS. זה יותר מדויק, נותן לך יותר יתרונות וגם הרבה יותר קל לתחזוקה.