CSS - עיצוב טבלה רק על ידי DIV

תמלול ההרצאה: CSS - עיצוב טבלה רק על ידי DIV

הטקסט המלא של הדקות הראשונות בהרצאה «CSS - עיצוב טבלה רק על ידי DIV» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:01

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

2. 00:15

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

3. 00:27

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

4. 00:41

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

5. 00:52

   אז בואו נתחיל. ראשית יש לנו דיו אחת ויחידה שעוטפת את כל האלמנטים הטבלאיים שלנו. ניתן לה class div login. כל אלמנט נוסף יהיה בתוך דיו משלו.

6. 01:10

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

7. 01:53

   קונטרול KD מסדר את הכל וכעת אנחנו יכולים לתת עיצוב לכל הדבר הזה. בואו רק נוסיף עוד לחצן. אוקיי, דבר ראשון שנעשה בגלל שהדף הזה כתוב בעברית, נמדיר אותו כ-direction: rtl.

8. 02:32

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

9. 02:52

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

10. 03:07

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

11. 03:41

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

12. 04:02

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

13. 04:23

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

14. 05:03

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

15. 05:37

    בואו נמשיך ונעצב את זה עוד טיפה.