קורס Front End למתכנתים שיעור תרגול מאפייני CSS לשינוי מראה

דיונים מקורסים
#1
זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/frontend/lessons/css-1-lab
#2

שלום,
אני ממש נהנית לתרגל אחרי ההסבר הברור!!!
רק שאלה קטנה…
בתרגיל 1 כתוב:“מספר העמודות והשורות בגריד נקבע לפי מספר התמונות.”
מה הכוונה? לשימוש באיזה תכונה בסלקטור זה חותר?
נגיד יש לי 6 תמונות כמה תהיינה בכל שורה?

תודה!

#3

הי @nava
כיף לשמוע - וגם אפשר לשנות את שם המשתמש פה בפורום (לוחצים על האייקון הקטן בצד שמאל למעלה ובוחרים הגדרות פרופיל)

לשאלה שלך - גודל של כל תמונה הוא 200 פיקסלים, והמרווח בין התמונות הוא 20 פיקסלים. לכן אם המסך שלך ברוחב 960 פיקסלים ייכנסו בכל שורה 4 תמונות
אז אם יש 10 תמונות בגלריה אנחנו נראה אותן מסודרות ב 4 עמודות ו 3 שורות (השורה האחרונה לא מלאה)
אבל אם יש 2 תמונות בגלריה נראה את שתיהן בשורה הראשונה וזהו

בקיצור התמונות יהיו מסודרות לפי המקום הפנוי שיש

#4

היי הכנסתי 6 תמונות אבל שיצאו מתחומי הגריד עד שהשתמשתי במאפיינים
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: repeat(3, 1fr)
אבל עדין אני לא מצליח להקטין את התמונות גם כשאני מקטין את הגריד התמונות נשארות אותו הדבר
מה אפשר לעשות?

#5

הי,

יכול להדביק כאן את הקוד המלא (או קישור אליו) ?

#6

https://drive.google.com/drive/folders/1Z2UGbg3VMvk-TV0tEKrmwg-s78UL_n65?usp=sharing
היי שיתפתי בגוגל דרייב, הצלחתי להסתדר עם הגודל של התמונות אבל רק כאשר אני שם את המאפיינים בקובץ HTML כמו שאתה רואה.
כשאני מוריד את המאפיינים מהHTML ומוסיף את אותם מאפיינים לCSS התמונות יוצאות מפרופוציה

#8

הי

סליחה זה אני שלא הספקתי להגיע לזה - בכל מקרה טוב לשלוח תזכורות :slight_smile:

לעניין שלנו:

  1. הגדרת width לתמונה ב HTML מגדירה מה הגודל “האמיתי” של התמונה. זאת הגדרה אופציונאלית שעוזרת לדפדפן להציג את הריבוע הריק לפני שהוא סיים לטעון את התמונה.

  2. הגדרת מימדים ב CSS זה סיפור יותר מורכב כי המשמעות שלהם מושפעת מאופן התצוגה - האם אני בתוך גריד? האם בתוך flexbox? האם אני אלמנט inline-block או לגמרי inline. כדאי לקרוא בתיעוד על כל מנגנון תצוגה איזה מאפייני CSS משפיעים עליו ומה משמעות כל אחד

  3. במקרה שלך לקחתי את הקוד כמו שהוא והורדתי את הגדרת המימדים ב HTML ונראה לי שהגעתי לבעיה שדיברת עליה. בשביל לתקן את זה הייתי צריך להוסיף רק את הבלוק הבא ל CSS:

img {
  max-width: 100%;
}

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

אתה יכול לראות את התוצאה ולשחק איתה לייב בקודפן שיצרתי כאן:

#9

תודה רבה עזרת לי מאוד =)

#10

היי,
בתרגיל 2 אני לא רואה ש-box-border משפיע(כלומר אם מוסיפה padding תמונות יורדות שורה)

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

#11

הי,

אין דבר כזה box-border, יש border ויש box-sizing: border-box. מה ניסית לעשות?

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

#12

קודם כל תודה
בפועל בקוד כן כתבתי:
box-sizing: border-box
אבל לא הצלחתי לעשות שתמונות לא תרדנה שורה כשאני מוסיפה padding
לגבי ההערה השניה-קיבלתי:)

#13

הי,

התמונות ירדו שורה אם הרוחב שלהן + הריפוד ביניהן + השוליים הוא גדול יותר מרוחב השורה. הגדרת box-sizing: border-box גורמת לזה שהריפוד והגבול יחשבו בתור חלק מהרוחב.

בדוגמה שלך אני רואה שכשאני מוסיף לכלל ה CSS האחרון (של התמונות שלמטה) מאפיין padding, הריפוד לא גורם לירידת שורה והגודל של כל תמונה הופך קטן יותר. כן יש ירידת שורה כי סכום הרוחב של כל התמונות הוא יותר גדול מרוחב השורה.

למה את התכוונת כשכתבת שאין השפעה ל box-border ?

#14

אה נכוןןן הבנתי
ממש תודה!!!

לייק 1
#16

הי,

לגבי הראשון הגלריה נראית טוב. רק בשביל התרגיל שווה לנסות לבנות אותה גם בלי column-count ולחלק את העמוד לפי אחוזים. דבר נוסף ששווה לראות זה ששינוי width ב hover מזיז את כל התמונות. לפעמים זה מה שאתה רוצה, אבל אם לא אז אפשר להשתמש ב transform במקום. וגם ראיתי שניסית לעשות אנימציה אבל היתה שם שגיאת כתיב. סך הכל בשביל לסדר את הגלריה ש hover על תמונה רק יגדיל תמונה בלי להזיז את התמונות האחרות אפשר לשנות את ה CSS של ה hover ל:

.gallery img:hover {
    transform:scale(2);
    box-shadow: 0px 0px 30px -1px rgba(0,0,0,0.75);
    transition: all 1s;
}

יצרתי פורק בקישור הזה להמחשה:
https://www.codeply.com/p/nrzJqeiMQK

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

#17

הי
בתרגיל השני הכפתורים צריכים גם להעביר תמונות ?
איך אני יכול לעשות גירד עם תמונות מתחלפות ?

#18

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

#19

אשמח לעזרה איך לגרום ל-2 הלחצנים להיות ממוקמים באמצע העמוד. לא מצליחה

#20

הי @DM1

בשלב זה בקורס למדנו רק על שיטה אחת - display. ראינו שיש אלמנטים מסוג Block, אלמנטים מסוג Inline ואלמנטים מסוג Inline Block. ראינו גם שלאלמנט בלוק אפשר להגדיר מאפיין:

p { text-align: center }

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

אשמח לראות מה ניסית בינתיים? איזה תוצאה קיבלת?

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

#21

עשיתי את התרגיל הראשון של התמונות, וניסיתי לעשות עיצוב שונה לfirst-child וזה לא עובד, משום מה משאיר את העיצוב הכללי.
למה זה?
מצרפת את הקוד

Images Gallery h1 { text-align: center; } img { width: 200px; padding: 20px 20px 20px 20px; border: 10px dashed pink; } img:first-child { height: 400px; }

Images Gallery

#22

הי,

יכולה להדביק פה גם את ה HTML? או לחלופין לשים את שניהם בקודפן?