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

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

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Fixed Navbar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <div class="navbar-logo">MySite</div>
        <div class="navbar-links">
            <a class="navbar-link" href="#">Home</a>
            <a class="navbar-link" href="#">About</a>
            <a class="navbar-link" href="#">Services</a>
            <a class="navbar-link" href="#">Contact</a>
        </div>
    </nav>

    <main class="main-content">
        <h1>Page Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Repeat this paragraph many times to create scrollable content.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </main>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    padding-top: 60px; /* space for fixed navbar */
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #2c3e50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.navbar-logo {
    color: white;
    font-size: 22px;
    font-weight: bold;
}

.navbar-links {
    display: flex;
    gap: 5px;
}

.navbar-link {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
}

.main-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 20px;
}

.main-content p {
    margin-bottom: 20px;
    line-height: 1.8;
    color: #555;
}

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

* {
    box-sizing: border-box;
}

.tooltip-wrapper {
    padding: 100px;
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.btn {
    padding: 12px 24px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.tooltip {
    position: absolute;
    bottom: 100%;       /* positions above the button */
    left: 50%;
    transform: translateX(-50%); /* centers horizontally */
    background-color: #333;
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    margin-bottom: 8px;

    /* initially hidden */
    visibility: hidden;
    opacity: 0;
}

/* show tooltip on hover */
.tooltip-container:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

ה-tooltip ממוקם מעל הכפתור באמצעות bottom: 100% (100% מגובה ההורה, כלפי מעלה). הוא ממורכז אופקית עם left: 50% ו-transform: translateX(-50%).

פתרון תרגיל 3 - כותרות דביקות¶

<section class="section">
    <h2 class="sticky-header header-1">Section A - Introduction</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
</section>

<section class="section">
    <h2 class="sticky-header header-2">Section B - Details</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
    <p>More content to fill the section and allow scrolling.</p>
</section>

<section class="section">
    <h2 class="sticky-header header-3">Section C - Conclusion</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    <p>Final section content with enough text to scroll.</p>
    <p>More text to make scrolling possible.</p>
</section>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

.section p {
    padding: 15px 20px;
    line-height: 1.8;
    color: #555;
}

.sticky-header {
    position: sticky;
    top: 0;
    padding: 15px 20px;
    color: white;
    font-size: 20px;
    z-index: 10;
}

.header-1 {
    background-color: #2c3e50;
}

.header-2 {
    background-color: #8e44ad;
}

.header-3 {
    background-color: #27ae60;
}

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

<div class="layers-container">
    <div class="layer layer-1">1</div>
    <div class="layer layer-2">2</div>
    <div class="layer layer-3">3</div>
</div>

.layers-container {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 50px;
}

.layer {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    color: white;
    border-radius: 10px;
}

.layer-1 {
    top: 0;
    left: 0;
    background-color: rgba(231, 76, 60, 0.9);
    z-index: 3; /* on top */
}

.layer-2 {
    top: 50px;
    left: 50px;
    background-color: rgba(46, 204, 113, 0.9);
    z-index: 2; /* middle */
}

.layer-3 {
    top: 100px;
    left: 100px;
    background-color: rgba(52, 152, 219, 0.9);
    z-index: 1; /* bottom */
}

אם נשנה את z-index של layer-3 ל-4, הקופסה הכחולה תעלה למעלה.

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

חידה א: אדום (red)
- p = ספציפיות 1
- .text = ספציפיות 10
- #main-text = ספציפיות 100 - מנצח

חידה ב: כחול (blue)
- .container .text = ספציפיות 20 - מנצח
- p.text = ספציפיות 11
- .text = ספציפיות 10

חידה ג: ירוק (green)
- .a = ספציפיות 10
- .b = ספציפיות 10
- אותה ספציפיות, אז האחרון מנצח = green

חידה ד: ירוק (green)
- #wrapper p = ספציפיות 101
- .text עם !important = ספציפיות 10, אבל !important דורס הכל - מנצח
- div p.text = ספציפיות 12

חידה ה: כתום (orange)
- סגנון inline (style="color: orange") = ספציפיות 1000 - מנצח
- #main = 100
- .text = 10
- p = 1

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

בעיה 1: הכותרת צריכה להיות לבנה אבל מופיעה כהה

הסיבה: #header { color: #333; } עם ספציפיות 100 דורס את .header { color: white; } עם ספציפיות 10.

תיקון - הסירו את כלל ה-ID או העלו את הספציפיות:

.header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
}

/* remove the #header rule entirely */

בעיה 2: טקסט intro צריך להיות כחול אבל מופיע אפור

הסיבה: .content p { color: gray; } עם ספציפיות 11 דורס את .intro { color: blue; } עם ספציפיות 10.

תיקון - העלו את הספציפיות של intro:

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

בעיה 3: ה-h1 צריך להיות 36px אבל הוא 24px

הסיבה: #header h1 { font-size: 24px; } עם ספציפיות 101 דורס את h1 { font-size: 36px; } עם ספציפיות 1.

תיקון - הסירו את כלל ה-ID:

.header h1 {
    font-size: 36px;
}

פתרון תרגיל 7 - Layout מלא¶

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Full Layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <div class="navbar-logo">MyBrand</div>
        <div class="navbar-links">
            <a href="#">Home</a>
            <a href="#">Products</a>
            <a href="#">Contact</a>
        </div>
    </nav>

    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">Welcome</h1>
            <p class="hero-subtitle">Discover amazing products</p>
            <a class="hero-btn" href="#">Shop Now</a>
        </div>
    </section>

    <main class="content">
        <div class="cards">
            <div class="card">
                <span class="card-badge">New</span>
                <h3 class="card-title">Product A</h3>
                <p class="card-text">Description of product A.</p>
            </div>
            <div class="card">
                <span class="card-badge">Sale</span>
                <h3 class="card-title">Product B</h3>
                <p class="card-text">Description of product B.</p>
            </div>
            <div class="card">
                <h3 class="card-title">Product C</h3>
                <p class="card-text">Description of product C.</p>
            </div>
        </div>
    </main>

    <footer class="footer">
        <p>Copyright 2026. All rights reserved.</p>
    </footer>

    <button class="scroll-top-btn">Up</button>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    color: #333;
}

/* 1. fixed navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.navbar-logo {
    font-size: 20px;
    font-weight: bold;
    color: #2c3e50;
}

.navbar-links a {
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    color: #555;
}

/* 2. hero section with centered content */
.hero {
    margin-top: 60px; /* space for navbar */
    position: relative;
    height: 400px;
    background-color: #2c3e50;
    overflow: hidden;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.hero-title {
    font-size: 48px;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 18px;
    opacity: 0.8;
    margin-bottom: 25px;
}

.hero-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
}

/* 3. cards with positioned badges */
.content {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

.cards {
    display: flex;
    gap: 20px;
}

.card {
    position: relative;
    flex: 1;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 25px;
    padding-top: 35px;
}

.card-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background-color: #e74c3c;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.card-title {
    margin-bottom: 10px;
    color: #2c3e50;
}

.card-text {
    color: #777;
    line-height: 1.6;
}

/* footer */
.footer {
    background-color: #2c3e50;
    color: #aaa;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}

/* 4. fixed scroll-to-top button */
.scroll-top-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #3498db;
    color: white;
    border: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
}