1.4 תצוגה, מיקום וספציפיות תרגול

תרגול - תצוגה, מיקום וספציפיות

תרגיל 1 - Navbar קבוע

בנו navbar (סרגל ניווט) קבוע בראש הדף:
- הnavbar נשאר בראש הדף גם כשגוללים למטה
- בצד שמאל: לוגו (טקסט)
- בצד ימין: 4 קישורי ניווט ברצף אופקי
- צבע רקע כהה, טקסט לבן
- צל עדין מתחת ל-navbar
- ודאו שהתוכן של הדף לא מוסתר מאחורי ה-navbar (רמז: padding-top על body)

הוסיפו מספיק תוכן בדף כדי שאפשר יהיה לגלול ולראות שה-navbar נשאר במקום.

תרגיל 2 - Tooltip

בנו tooltip (חלונית מידע) שמופיעה מעל כפתור:
- צרו כפתור
- צרו span בתוך הכפתור עם class "tooltip" שמכיל טקסט הסבר
- ה-tooltip צריך להיות ממוקם מעל הכפתור (position absolute)
- הכפתור צריך להיות ה-positioning context (position relative)
- ה-tooltip צריך להיות ממורכז אופקית מעל הכפתור
- הוסיפו חץ קטן בתחתית ה-tooltip (רמז: אפשר עם border על pseudo-element, או פשוט בלי חץ)

מבנה ה-HTML:

<div class="tooltip-container">
    <button class="btn">Hover me</button>
    <span class="tooltip">This is helpful information</span>
</div>

תרגיל 3 - כותרות דביקות - sticky header

צרו דף עם כמה מקטעים (sections), לכל מקטע כותרת:
- כל כותרת צריכה להיות sticky - כשגוללים, היא נדבקת לראש הדף
- כשמגיעים למקטע הבא, הכותרת שלו מחליפה את הקודמת
- תנו לכל כותרת צבע רקע שונה כדי לראות את האפקט בבירור
- הוסיפו מספיק תוכן בכל מקטע כדי שיהיה צורך לגלול

תרגיל 4 - שכבות עם z-index

צרו שלוש קופסאות צבעוניות שחופפות אחת את השניה:
- שלושת הקופסאות ב-position absolute
- כל אחת בגודל 200x200
- כל אחת בצבע שונה
- מיקמו אותן כך שהן חופפות חלקית
- השתמשו ב-z-index כדי לשלוט מי מעל מי
- הוסיפו מספרים (1, 2, 3) בתוך הקופסאות כדי לראות את הסדר
- נסו לשנות את ערכי ה-z-index ובדקו את התוצאה

תרגיל 5 - חידות ספציפיות

לכל חידה, ענו: איזה צבע יקבל הטקסט? נסו לענות בלי להריץ קוד, ואז בדקו.

חידה א:

<p class="text" id="main-text">What color am I?</p>

p { color: blue; }
.text { color: green; }
#main-text { color: red; }

חידה ב:

<div class="container">
    <p class="text">What color am I?</p>
</div>

.container .text { color: blue; }
p.text { color: green; }
.text { color: red; }

חידה ג:

<p class="a b">What color am I?</p>

.a { color: blue; }
.b { color: green; }

חידה ד:

<div id="wrapper">
    <p class="text">What color am I?</p>
</div>

#wrapper p { color: blue; }
.text { color: green !important; }
div p.text { color: red; }

חידה ה:

<p style="color: orange;" class="text" id="main">What color am I?</p>

#main { color: blue; }
.text { color: green; }
p { color: red; }

תרגיל 6 - תיקון CSS שבור

הקוד הבא לא עובד כמו שצריך. מצאו ותקנו את הבעיות:

<div class="page">
    <header id="header" class="header">
        <h1>My Website</h1>
    </header>
    <main class="content">
        <p class="intro">Welcome to my site</p>
        <p>Regular paragraph</p>
    </main>
</div>

/* Problem 1: the header should have white text, but it shows as dark */
.header {
    background-color: #2c3e50;
    color: white;
}

#header {
    color: #333;
}

.page .header {
    padding: 20px;
}

/* Problem 2: intro text should be blue but shows as gray */
p {
    color: gray;
}

.content p {
    font-size: 16px;
    color: gray;
}

.intro {
    color: blue;
    font-size: 20px;
}

/* Problem 3: the h1 should be 36px but it's not */
h1 {
    font-size: 36px;
}

#header h1 {
    font-size: 24px;
}

מצאו את הבעיות והסבירו למה ה-CSS לא עובד כצפוי. תקנו את הבעיות בלי להשתמש ב-!important.

תרגיל 7 - Layout מלא

שלבו הכל יחד ובנו layout של דף עם:
1. Navbar קבוע בראש (position: fixed)
2. Hero section עם כפתור CTA ממורכז (position: absolute + transform)
3. אזור תוכן עם כרטיסים שלכל אחד יש תגית badge ממוקמת (position: absolute)
4. כפתור "חזרה למעלה" קבוע בפינה (position: fixed)
5. Footer רגיל בתחתית

ודאו שכל הספציפיות מסודרת - אל תשתמשו ב-ID selectors או ב-!important.