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

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

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

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

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

מדריך CSS מספר 16 - מיקום אבסולוטי

מחבר:
בתאריך:

 

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

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

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="para_1">פסקה בשביל להסביר על מיקום</div>
    <div class="para_2">פסקה נוספת בשביל להסביר על מיקום </div> 
  </body>
</html>

הקוד מייצר שתי פסקאות.

נכתוב את הקוד הבא לגיליון העיצוב החיצוני, style.css:

.para_1 { background-color: yellow;
width: 250px;
height: 80px;
}
.para_2 { background-color: green;
width: 250px;
height: 80px;
}

משמעות הקוד שכל פסקה מקבלת צבע רקע, רוחב וגובה.

נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:

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

 

כיצד נשתמש במיקום אבסולוטי לסידור האלמנטים על הדף?

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

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

top: 50px;

• כדי למקם ביחס לחלקו השמאלי של הדפדפן נשתמש בתכונה left. בדוגמה מיקמנו את האלמנט 250 פיקסלים ימנית לחלק השמאלי של הדפדפן:

left: 250px;

• כדי למקם ביחס לחלקו הימני של הדפדפן נשתמש בתכונה right. לדוגמה:

right: 100px;

• כדי למקם ביחס לחלקו התחתון של הדפדפן נשתמש בתכונה bottom. לדוגמה:

bottom: 100px;

דבר נוסיף שצריך לעשות הוא לתת לאלמנט אורך ורוחב באמצעות width ו-height.

לסיכום, נכתוב את הקוד הבא לגיליון העיצוב החיצוני, style.css:

.para_1 { background-color: yellow;
width: 250px;
height: 80px;
}
.para_2 { background-color: green;
width: 250px;
height: 80px; 
position: absolute;
top: 50px;
left: 250px;
}

משמעות הקוד שאת האלמנט השני (הירוק) אנחנו מזיזים 50 פיקסלים יחסית לחלקו העליון של הדפדפן ו-250 פיקסלים ימנית לחלקו השמאלי של הדפדפן.

נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:

 

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

 

 

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

 

= 7 + 8