הרשם

התחבר

התחבר בעזרת פייסבוק:

שם משתמש סיסמא
זכור אותי

אוריגמי - קטגורית האוריגמי הגדולה בישראל

יצירה לילדים ולמבוגרים - באתר מדריכי יצירה שידהימו אתכם מחדש כל פעם

אוהבים מתוקים? לחצו בשביל עשרות מדריכי עוגות ועוגיות

‹ ›

יכול לעניין אתכם

מדריך CSS מספר 14 - איך להחביא ולהציג אובייקטים
מאת: בקלות טכני

מדריך CSS מספר 15 - איך להשתמש בCSS float

מאת: בקלות טכני

מדריך CSS מספר 17 - איך להוסיף אפקטים מיוחדים לסלקטורים בעזרת פסאודו קלאסים (Pseudo-classes)
מאת: בקלות טכני

מדריך CSS מספר 18 - איך לעצב אלמנטי HTML עם מאפיינים ספציפיים
מאת: בקלות טכני

איך לעצב אתר בצורה יעילה.

מאת: בקלות טכני

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

איך לבחור לוגו

מאת: בקלות טכני

איך לכתוב קובץ CSS נכון (Best practices) - חלק ב'
מאת: בקלות טכני

איך לכתוב קובץ CSS נכון (Best practices) - חלק א'
מאת: בקלות טכני

מדריך CSS מספר 18 - איך לעצב אלמנטי HTML עם מאפיינים ספציפיים
מאת: בקלות טכני

דף הבית >> מדריכים >> מחשבים >> אינטרנט >> עיצוב אתרים >> מדריך CSS מספר 16 - איך למקם אובייקטים בדף

מחשבים

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

עקוב

28/08/2011 15:39:14
מאת: בקלות טכני
כתב מתחיל

דירוג:

(0 מדרגים)

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

רמת קושי: מתקדמים

הוראות:

בואו נתחיל במיקום יחסי:

$<html> <head> <style type='text/css'> p.pos_left { position:relative; left:-20px; } p.pos_right { position:relative; left:20px; } </style> </head> <body> <h2>This heading was not moved.</h2> <p class='pos_left'>This paragraph was moved to the left.</p> <p class='pos_right'>This paragraph was moved to the right.</p> </body> </html>$

This heading was not moved.

This paragraph was moved to the left.

This paragraph was moved to the right.

בדוגמא השתמשנו במאפיין הposition עם הערך relative.
הposition מסמן באיזה צורה אנחנו רוצים למקם את האלמנט שלנו (יש מספר אופנים - עליהם נעבור במדריך זה) והערך relative אומר שנעשה את זה באופן יחסי.

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

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

מכיוון שהמיקום הוא מקובע (fixed), כאשר נקטין ונגדיל את החלון נראה שהאובייקט לא זז.
כאשר אנחנו נשים אובייקט אחד מעל (לא מתחת) לשני נהיה חייבים להשתמש בposition:fixed.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<style type='text/css'>
p.fixedpos
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>

<p class='fixedpos'>Moved text</p>
<p>Regular text</p>
</body>
</html>

Moved text
Regular text

שימו לב שבדוגמא הזו גם הגדרנו את הdoctype, בדפדפני אקספלורר הfixed יעבוד רק כאשר הdoctype מוגדר.

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

למשל:

Paragraph with absolute position.

כמו שאתם רואים, אובייקט הparagraph ממוקם 110 פיקסלים משמאל לחלון הדפדפן ו130 פיקסלים מהחלק העליון של הדפדפן.

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

בכדי לטפל בבעיה הזו, נשתמש באלמנט שנקרא z-index. בעזרת הz-index נקבע מספר (חיובי או שלילי) לאלמנט ואם המספר גבוה יותר ממספר של אלמנט אחר, האלמנט הזה יהיה מעליו (ברירת המחדל היא 0)

<html>
<head>
<style type='text/css'>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
img.top
{
position:absolute;
left:140px;
top:70px;
z-index:0;
}
</style>
</head>

<body>
<img src='1.jpg' width='200' height='200' />
<img src='3.jpg' class='top' width='200' height='200' />
</body>
</html>

כלבלבים!

אז אנחנו רואים שמיקמנו תמונה אחת מעל לשניה (לתמונה הראשונה יש z-index עם ערך 1- ואילו לתמונה השניה z-index עם ערך 0 (זאת ברירת המחדל אז לא חייבים לרשום את זה).

שימו לב שגם שיחקנו עם מיקום התמונות.

הוסף למועדפים שלחו לחבר הדפיסו את המדריך

ראיתם משהו שאהבתם? יש לכם שאלה? כתבו תגובה

אם לא בא לכם להשאיר תגובה דרך הפייסבוק:

מדריכים נוספים בנושא:

איך לעצב אתר בצורה יעילה.

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

איך לבחור לוגו

מדריך HTML מספר 12 - מתוה דף אינטרנט ( layouts and div tags)

עוד מדריכים בנושא זה