Page Layout - Float - CSS
#header מקבל צבע רקע אפור וגובה של 100 פיקסלים. לא נותנים רוחב, כי div תופס כברירת מחדל 100% מהרוחב.float: left שמצמיד אותו לשמאל, ו-height: inherit שמקבל את הגובה מהתגית העוטפת.margin-left: 20% כדי שלא יתחיל מקצה הדף אלא יידחף ימינה אחרי התפריט.#header { background-color: gray; height: 100px; }#menu { width: 20%; float: left; height: inherit; }#content { width: 80%; margin-left: 20%; height: inherit; }להורדת קוד מקור של כל הדוגמאות בקורס HTML - לחץ כאן (להורדה ממחשב רגיל ולא מאובטח)
פרקי ההרצאה: Page Layout - Float - CSS
תמלול ההרצאה: Page Layout - Float - CSS
הטקסט המלא של הדקות הראשונות בהרצאה «Page Layout - Float - CSS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו הולכים לראות נקרא Page Layout. Layout זה סידור, כלומר כיצד דרך CSS ניתן לסדר את הדף HTML שאנחנו רואים.
מה אנחנו רוצים לעשות? בוא נניח שזה הדף שלנו ואנחנו רוצים לסדר אותו בצורה כזאת. אנחנו רוצים שתהיה לנו כותרת ואנחנו רוצים שיהיה לנו איזשהו תפריט.
איך אנחנו משיגים את ה-Layout הזה? כותרת למעלה, תפריט מצד שמאל, תוכן, בהמשך הדף. אז בואו נראה מה אנחנו צריכים לעשות. ראשית, כל אחד מהחלקים האלה מיוצג ב-HTML על ידי דיו, שלאחר מכן מקבל את העיצוב בשביל להיות בדיוק במקום שלו.
בואו נחזור ל-HTML ונכתוב דיווים עבורם. דבר ראשון, אנחנו מגדירים דיו אחד כללי עבור כל הדף. הדבר הזה מאוד מקובל ומתבצע כמעט בכל האתרים.
לאחר מכן, אנחנו מגדירים דיו עבור ההדר. לדיו הזה אנחנו כבר הולכים לתת עיצוב, ולכן מה שכדאי לעשות זה לתת לו ID. לאחר מכן ב-CSS אנחנו ניתן לו את העיצוב בכדי שהוא ייראה בדיוק כמו האזור העליון פה של ה-Header.
בואו נחזור ונבנה שאר הדיווים. לאחר מכן אנחנו רוצים את האזור עבור התפריט ועבור התוכן. כאן שוב אנחנו מגדירים דיו, ניתן לו ID בשביל לתת לו עיצוב אחר כך, Menu and Content.
הדיב הזה יהיה אחראי על התפריט והתוכן, כלומר שניהם ביחד. בתוכו אנחנו מגדירים שני דיבים, דיב אחד עבור התפריט, דיב שני עבור התוכן.
אחרי שסידרנו את הלייאוט מבחינת html מה שאנחנו צריכים לעשות זה לתת עיצובים ב-css לכל אחד מהם כך שהדף באמת ייראה כמו שאנחנו רוצים. אם אנחנו נסתכל כרגע על הדף הזה אנחנו לא נראה בו שום דבר מפני ש-dive כבירת מחדל לא נראית בואו נריץ את הדפדפן ונוכל לראות אנחנו לא רואים שום דבר על הדף בואו נחזור בחזרה
וכעת ניתן עיצוב ב-CSS בכדי להגדיר את ה-Layout. העיצוב הראשוני שאנחנו נותנים הוא עבור ה-Header בגלל שיש לנו כבר ID אנחנו יכולים לבחור סלקטור עבור ID כלומר סולמית.
בואו נגדיר צבע רקע נניח גריי ומה שאני רוצה להגדיר זה שהגובה יהיה בגובה מסוים שאני רוצה בואו נלך על 100 פיקסלים, נשמור, נחזור לדפדפן ונרפרש ונראה כרגע שיש לנו את האזור של ה-head.
שימו לב שלא נתתי רוחב, כברירת נחדל div תמיד תופסת 100% וזאת הסיבה שאם רציתי 100% לא הייתי צריך לתת את זה. אוקיי, header מוכן, הדבר הבא שאנחנו מעצבים זה את ה-menu וה-content.
נגדיר סלקטור של ID עבור ה-menu and-content, כלומר אני רוצה עכשיו לעצב את הדיו הזה שאחראי גם על התפריט וגם על התוכן.
בואו ניתן לו צבע רקע וניתן לו גובה, נניח 600 פיקסלים. בואו נשמור, נחזור לדפדפן, נרפרש ונראה שעכשיו הוא קיבל את הצבע הרקע הזה בגובה 600 פיקסלים.
עכשיו אנחנו צריכים בתוכו לסדר את התפריט ואת התוכן. נחזור ל-CSS וכעת נעצב את התפריט. יש לי פה צבע רקע עבור התפריט.
עכשיו, אני לא רוצה שהרוחב יהיה 100%, לכן אני אתן לו width, בואו נניח שהוא יתפוס לי 20% מהדף, fresh, אבל עדיין אני לא רואה אותו.
מה שחסר לי זה כמה דברים. ראשית, מה שאני צריך לתת לו זה גובה, אבל אני רוצה שהוא יהיה אותו גובה כמו הדיב שעוטף אותו, ולכן אני יכול להשתמש ב-inherit, כך הוא ייקח את הגובה מהתגית שעוטפת אותו, התגית שעוטפת אותו זאת התגית הזאת.
דבר נוסף, אני צריך להגדיר עבורו float-left, כלומר, אני רוצה שהתפריט הזה יוצמד לשמאל מבחינת שני התפריטים, מבחינת שתי הדיבים, יותר נכון.
בואו נרפרש ונראה כרגע שכאן יש לי את התפריט האדום. עדיין אני לא נתתי עיצוב לתוכן, אלא לדיב שעוטף את התוכן ביחד עם התפריט. בואו נחזור ונשלים את זה.
העיצוב הבא שאני רוצה לתת, והעיצוב לדיב האחרונה שיש לנו כאן,