מיקום קופסאות div

בשיעור שעבר ראינו איך יוצרים קופסה בעזרת תג ה-div ו-css. עכשיו נראה איך אפשר לשים אותה איפה שרוצים שהיא תהיה.

בשביל לקבוע את המיקום של קופסה, כדאי להכיר ארבעה מאפיינים ב-css:

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

    לדוגמה, הקופסה הראשונה היא "רגילה", ולשנייה מוגדר float: left;:

    אני תופסת את כל השורה, גם כשאני יכולה לחלוק אותה.
    לכן אני בשורה מתחת.

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

    אני ליד הקופסה, לא מתחתיה.





    אפשר "להציף" קופסאות לשמאל (left), לימין (right), או לא להציף (none), שזו ברירת המחדל.

  2. position
    המיקום של האלמנטים בדף תלוי באלמנטים האחרים, בייחוד באלה שמופיעים לפניהם. מה שכתוב ראשון, בד"כ יופיע ראשון, ומה שכתוב אחריו, יופיע "פיזית" אחריו.

    position מאפשר לנו למקם אלמנטים, כולל את תיבות ה-div שאנחנו מדברים עליהן, במקום בו נבחר למקם אותן.

    המצב הטבעי, ברירת המחדל, של מאפיין postion הוא relative, כלומר יחסי לשאר מה שקורה בדף.

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

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

  3. top/bottom/left/right
    אחרי שראינו בסעיף הקודם איך "מוציאים" את הקופסה מהרצף הרגיל של הדף עם postion: absolute;, אפשר להתחיל למקם אותה. בשביל זה, פשוט נגדיר את המיקום שלה מקצות הדף.

    את המיקום ניתן לקבוע כמרחק מהקצה העליון של הדף (top), מהקצה התחתון (bottom), מימין (right), או משמאל (left).

    המרחק יימדד בפיקסלים או באחוזים. כך למשל, אם נרצה קופסה שתופיע במרחק 200 פיקסלים מראש הדף ואחרי 20% מצד שמאל, נכתוב:

    #box1{
      border: 3px double red;
      background-color: yellow;
      color: blue;
      width: 350px;
      padding: 30px;
      position: absolute;
      top: 200px;
      left: 20%;
     }

    ודאי שמתם לב שהתייחסתי לקופסא הזאת בתור Id ולא class - אחרת כל הקופסאות ב-class ימוקמו אחת על השנייה.

    את התוצאה אפשר לראות כאן.

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

    לפעמים אנחנו נרצה לשנות את הסדר של האלמנטים מבחינת מי מעל מי, למשל אם יש לנו תפריט נפתח שבו תת-התפריטים עולים זה על זה.

    כשנרצה לקבוע מי יותר גבוה ממי, נשתמש במאפיין z-index. מקור השם הוא מהעובדה שהוא קובע את המיקום על ציר ה-z (שאותו אנחנו פחות רואים במסך דו-ממדי, לעומת ציר ה-x וה-y שאנחנו כן רואים).

    ככל שהמספר ב-z-index של אלמנט נמוך יותר, כך יהיו מעליו יותר אלמנטים.

    הערכים של מאפיין z-index יהיו תמיד מספרים שלמים, אבל הם יכולים להיות גם מספרים שליליים.

    לדוגמה, הנה שלוש קופסאות שצוינה הרמה שלהם. את התוצאה אפשר לראות כאן.

    #red{
      border: 3px double black;
      background-color: red;
      width: 150px;
      position: absolute;
      top: 200px;
      left: 50px;
      z-index: 2;
     }

    #yellow{
      border: 3px double black;
      background-color: yellow;
      width: 150px;
      position: absolute;
      top: 200px;
      left: 150px;
      z-index: 3;
     }

    #blue{
      border: 3px double black;
      background-color: red;
      width: 150px;
      position: absolute;
      top: 200px;
      left: 250px;
      z-index: 4;
     }

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

טבלה ב-css

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

מה שעושים, זה יוצרים שלוש קופסאות div, וזה ממש לא משנה באיזה סדר כותבים אותן, ונותנים להם את ה-id האלה:

header, side, main

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

בגיליון הסגנונות החיצוני, מגדירים את המיקום והגודל שלהן, וגם את העיצוב:

#header{
  border: 3px double black;
  background-color: powderblue;
  width: 750px;
  height: 100px;
  position: absolute;
  top: 0px;
  right: 0px;
}

#side{
  border: 3px double black;
  background-color: aquamarine;
  width: 150px;
  height: 80%;
  position: absolute;
  top: 100px;
  right: 0px;
  float: right;
}

#main{
  border: 3px double black;
  background-color: teal;
  width: 600px;
  height: 80%;
  position: absolute;
  top: 100px;
  right: 150px;
}

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

זהו. בזאת סיימנו עם css. אתם יכולים לעבור ללמוד קצת javascript, או לתרגל את מה שלמדתם עד עכשיו.

חזרה לדף התחומים של בניית אתרים.

חזרה לדף css הראשי...