עיצוב באמצעות CSS – מבוא – Box Model

8 במאי 2008

תגיות: , ,
5 תגובות

בפוסט קודם הסברתי על עיצוב אתרים באמצעות CSS (בניגוד לעיצוב באמצעות טבלאות, ובאמצעות תגיות ומאפייני HTML).

מה במדריך זה?

בסדרת פוסטים קרובה (שזהו הפוסט הראשון מבינהם), אסביר איך לעצב אתר באמצעות CSS ואיך לשלב את הרעיון של עיצוב באמצעות CSS עם ה – Framework של ASP.NET (כמו Themes, Skins, עיצוב פקדים בעזרת CSS ועוד).

מה לא יהיה במדריך זה?

חשוב לי להבהיר דבר אחד – אני לא מתכוון להסביר את הבסיס של CSS. איך לשלב CSS בדף, מה זה selector, איך להגדיר צבעים, הירראכיות וכיו"ב תוכלו למצוא במדריך CSS באתר Webmaster.org.il (בעברית). אם אינכם יודעים CSS כלל, אני ממליץ לכם להתחיל ממדריך זה.

Box Model

נתחיל בהגדרה של Box Model או מודל הקופסה מתוך אתר W3:

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

בגדול, מודל הקופסה מתאר את הקופסאות או התיבות שנוצרות לכל אלמנט HTMLי במסמך.

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

להלן תרשים שממחיש כיצד אלמנט מתפרס:

Box Model

לכל אלמנט יש את התוכן (הקופסה הפנימית ביותר בתרשים), התוכן מוקף ב – Padding (ריפוד), ה – Border עוטף את האלמנט עם ה – Padding, ומסביבו ה – Margin (שוליים).

חשוב לזכור כי ה – Padding, ה – Border וה – Margin מתווספים לרוחב והגובה של האלמנט.

לדוגמה, אם ניצור div שיקבל את ההגדרות הבאות:

div.Example1 
{
background: Red; margin: 2px; border: solid 1px Black; padding: 3px; width: 40px; height: 40px; }

תווצר קופסה אדומה, שרוחבה הפנימי (עד ה – border) יהיה 46px – רוחב התוכן הוא 40px, ואליו מתווספים 3px מכל צד (padding). את הקופסה יעטוף גבול (border) שחור בעובי של 1px, ושוליים של 2px מכל צד.

הגודל הכולל של הקופסה (כולל השוליים) יהיה 52px גובה, ו – 52px רוחב.

Padding ב – Internet Explorer

בגרסאות קודמות של Internet Explorer (עד 5.5, ובמקרים מסויימים גם ב – 6 ו – 7), ה – Padding היה מוכל בתוך ה – Content (ולא מתווסף לרוחבו), כפי שמודגם בתרשים הבא:

Box-model-bug

(מקור: וויקיפדיה האנגלית)

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

גרסאות 6, ו -7 יתנהגו בצורה דומה לגרסאות הקודמות, אלא אם יוגדר DOCTYPE מסויים (כמו XHTML, או HTML 4.0). בנוסף בגרסה 6 ההתנהגות גם תהיה זהה לגרסאות קודמות במידה וישנה הגדרת XML לפני ה – DOCTYPE. ניתן למצוא בוויקיפדיה מידע נוסף על התנהגות IE בהתאם להצהרת המסמך.

קריאה נוספת

בפוסט הבא, אסביר על עיצוב עמודים ואראה דוגמאות מעשיות לעיצוב עמודים באמצעות CSS.

הוסף תגובה
facebook linkedin twitter email

להגיב על Ken Egozi לבטל

האימייל לא יוצג באתר. שדות החובה מסומנים *

5 תגובות

  1. Ken Egozi9 במאי 2008 ב 2:13

    מעולה.

    רק הערה: על מנת לגרום ל IE6 להתנהג באופן יותר תקני, צריך לוודא שלמסמך יש DOCTYPE, ולא חובה שיהיה XHTML 1.1. גם XHTML 1.0 ואפילו HTML 4.01 יספיקו. אחרת הדפדפן נמצא במה שנקרא Quirks Mode, ואז cross browser design גובל בבלתי אפשרי

    הגב
  2. OhadAston9 במאי 2008 ב 9:36

    צודק, משום מה היה לי בראש שזה עובד רק עם XHTML 1.1 (מוזר).

    תודה.

    הגב
  3. Avi Pinto9 במאי 2008 ב 10:54

    אחלה הסבר

    הגב
  4. אריאל7 ביולי 2008 ב 16:00

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

    הגב