מיקום בעזרת CSS2

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

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

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

מהיכן זה מגיע?

אז, כיצד מיקום ודפי סגנון קשורים זה לזה? הצעת ה-CSS המקורית כלל מעט מאוד בדבר מבנה הדף. בעזרת CSS1:

• ניתן להגדיר את הרוחב והגובה של אלמנט מסוים.
• ניתן להגדיר שוליים וריפוד עבור אלמנט מסוים.
• ניתן ליישם הפנמת טקסט לשורה הראשונה של אלמנט מסוים.
• ציפה (float) ו-clear מספקים את האמצעים ליצירת מבנה טור (עד נקודה מסוימת).

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

כדי להתייחס לחוסר מיקום זה פותחה הגדרת טיוטה נפרדת, CSS2 (עבור מיקום), ע"י סקוט פורמן ואחרים מ-Netscape Communications Corp., וסקוט אייזיקס ואחרים מ-Microsoft Corp.. דבר זה מספק סדרת מאפיינים חדשה, כמו גם הרחבה של מספר מאפיינים קיימים מתוך CSS. ביחד, אלה מספקים יכולות מתוחכמות הרבה יותר למבנה הדף, עבור מפתחים של דפי סגנון.

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

CSS2 יצא לאור, בסופו של דבר, כחלק מהצעת CSS2, באוקטובר 1998.

התמונה הגדולה

מה חסר ב-CSS כשמדובר במבנה הדף? הבה נחשוב על פרסומי שולחן עבודה לרגע. תוכנה כמו Quark Express ו-PageMaker (ואפילו יישומי מבני העמוד הפחות חזקים) מאפשרת למשתמש, באופן כללי, לקחת גושי תוכן (טקסט ו/או דמויות) ולמקם אותם ישירות על הדף, בכל מקום שהוא. הגושים יכולים לעלות האחד על השני, והגוש הקדמי ביותר מערפל את הגושים שמתחתיו. בעזרת HTML, הכולל אפילו את CSS1, לא ניתן לעשות דברים שכאלה.

CSS2 מספק את היכולת ליצור סוגים אלה של "מבני הדף" .

שכבות

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

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

כאשר אנו משתמשים במונח שיכבה, אנו מתכוונים, באופן כללי, למיכל HTML (או אלמנט) שאותו ניתן למקם במיקום מסוים בדף אתר. יישומים, כגון Dream Weaver משתמשים במונח בדרך זו. הבלבול הראשון שעולה בקשר לשכבות, במובן זה, הוא כי רבים מאמינים ששכבה היא DIV והיא יכולה להיות DIV בלבד (אם אינכם יודעים מהו DIV , אנו נדון בכך עוד מעט כשנדבר על סוגי אלמנט ). זה לא נכון. שיכבה, במובן של אלמנט HTML הממוקם במקום כלשהו בדף האתר, יכולה להיות כל סוג אלמנט שהוא (פיסקה, פריט רשימה ועוד). טוב, לפחות בתיאוריה. למעשה, Netscape Navigator יאפשר לכם למקם פסקאות ואלמנטים אחרים בעזרת CSS2, בעוד ש-Internet Explorer אכן חושב ששכבה היא DIV . עוד פרטים בקשר לכך, בהמשך.

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

ואולם, אם אתם מאמינים ל-Netscape, אכן קיים דבר כזה - שכבת HTML, ושמה אלמנט ה- <layer>. זו הייתה הרחבת Netscape ל-HTML, שאף פעם לא אומצה ע"י Internet Explorer, והיא בהחלט לא HTML מומלץ. פשוט תתעלמו מכך וזה אמור להיעלם.

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