הנושאים החמים
פורום קהילת אנשי המקצוע מתחום האינטרנט: מעצבי אתרים, מתכנתים ומפתחים, אנשי UX-UI, וכו'. הכתיבה בפורום הינה לחברי הקהילות המקצועיות של פרוג.
מנהלת הפורום: סיון
להצטרפות לקהילת מפתחי אתרי אינטרנט, הקש כאן
להצטרפות לקהילת ux-ui, הקש כאן
מנהלת הפורום: סיון
להצטרפות לקהילת מפתחי אתרי אינטרנט, הקש כאן
להצטרפות לקהילת ux-ui, הקש כאן
מעצבי דיגיטל ו-UX/UI
מעצבי דיגיטל ו-UX/UI
להצטרפות לקהילת ux-ui, הקש כאן
להצטרפות לקהילת ux-ui, הקש כאן
- נושאים
- 475
- הודעות
- 3.5K
שלום לכולם,
עברנו את שלב השיפוט ב״ה. נקבע הניצחון, לפי קריטריונים שנשלחו לשופטים ודדליין להגשה.
עכשיו, שבוע אחרי הדדליין, זה הזמן שלכם - להגיב, להחמיא, לפרגן, לשלוח ברכות וגם להציע שיפורים.
רק שימו לב לשני כללים:
1. דברו מנקודת מבטכם בלבד (בלי לדון או לנתח את דברי השופטים, שעשו מעל ומעבר ע״מ לעבור על הפרויקטים וכל אחד ראה את הפרויקט בנקדות זמן אחרת).
2. כשיש ביקורת? ציינו אותה כביקרות בונה בהחלט ובצורה מכובדת בלבד.
אז הנה הם:
חפשו בגוגל כמובן!
אבל הדבקנו לכם גם קישורים:
קבוצה 1 -
הנה אלו שהציבו את הסולם : )
@EPaP
@הדוויג @תמי שלזינגר (גלריה) @elishevart
@#ה_מ_ע_צ_ב_ת @שלמה ויסברג @נחמה רובין
@קראנץ' @ראובן ליבוביץ @הזדמנות @s_katz
@CS Design @אסתי קניבסקי @ליאורהA
@אלעזר 1 @5566brs @א-ירושלמית @P100PLUS
התוצרים:
sulamotism.org
וכאן אתם חייבים להירשם לרשימת המתנה לעדכונים! ממה שהודלף לי הולך להיות אש!
sulamotism.org
www.youtube.com
www.sulam.net
www.prog.co.il
www.prog.co.il
www.prog.co.il
קבוצה 2 -
הנה קהילת ה
: )
@product
@*צילי @:) Yael
@>השראה< @a80
@M . A
@אידיאלי! @אילה רובינפלד @דריבלית
@הודיה בן חיים @מכונתכתיבה @סימן טוב
@פניני שיד @פרוגיסתית @רות גולדבלט
@ריקי אלבז @שוקי דיין
@shalom-m @רייזי בירנבוים @רוני רביץ
התוצרים:
mushgachon.one
we.mushgachon.one
mushgachon.xyz
story.mushgachon.xyz
open.spotify.com
עברנו את שלב השיפוט ב״ה. נקבע הניצחון, לפי קריטריונים שנשלחו לשופטים ודדליין להגשה.
עכשיו, שבוע אחרי הדדליין, זה הזמן שלכם - להגיב, להחמיא, לפרגן, לשלוח ברכות וגם להציע שיפורים.
רק שימו לב לשני כללים:
1. דברו מנקודת מבטכם בלבד (בלי לדון או לנתח את דברי השופטים, שעשו מעל ומעבר ע״מ לעבור על הפרויקטים וכל אחד ראה את הפרויקט בנקדות זמן אחרת).
2. כשיש ביקורת? ציינו אותה כביקרות בונה בהחלט ובצורה מכובדת בלבד.
אז הנה הם:
חפשו בגוגל כמובן!
אבל הדבקנו לכם גם קישורים:
קבוצה 1 -
הנה אלו שהציבו את הסולם : )
@EPaP
@הדוויג @תמי שלזינגר (גלריה) @elishevart
@#ה_מ_ע_צ_ב_ת @שלמה ויסברג @נחמה רובין
@קראנץ' @ראובן ליבוביץ @הזדמנות @s_katz
@CS Design @אסתי קניבסקי @ליאורהA
@אלעזר 1 @5566brs @א-ירושלמית @P100PLUS
התוצרים:
סולמוטיזם | סולם הזדמנויות לאוטיסט
סולמוטיזם, אפשרות הטיפול האינטנסיבי והמותאם אישית - מהווה סולם שיאפשר להם לטפס בעקביות שלב אחר שלב להתקדם ולהשתלב בחברה. הכנסו כדי להבין
sulamotism.org
וכאן אתם חייבים להירשם לרשימת המתנה לעדכונים! ממה שהודלף לי הולך להיות אש!
סולמוטיזם; החוויה - sulamotism
אנחנו בשלבים האחרונים בסולם… המשחק בשלבי הכנה אחרונים, בודקים פה שהסולם יציב, ושהנוף בשלב האחרון שווה את הטיפוס :)נשמח לעדכן אתכם כשנעלה לאוויר! רוצים להיות הראשונים שמשחקים בסולמוטיזם? <לא ניתן לפרסם מיילים באופן פומבי>
sulamotism.org
- YouTube
Auf YouTube findest du die angesagtesten Videos und Tracks. Außerdem kannst du eigene Inhalte hochladen und mit Freunden oder gleich der ganzen Welt teilen.
www.youtube.com
בסולם מקדמים סולמוטיזם בשיטת DIR
במוסדות סולם עוזרים לילדים עם קשיי תקשורת להיות ולהרגיש שווי גיל לילדים בגילם באמצעות שיטת DIR: סולמוטיזם מעשי לקידום ילדים המאובחנים על הרצף
www.sulam.net
על הרצף של השביתות • גרטה טונברג
טונברג היא פעילת האקלים המפורסמת ביותר כיום, נואמת מרכזית בפני אנשים מורמים מעם, מועמדת פרס נובל לשלום, ו--- מאובחנת על הרצף האוטיסטי. גרטה היא הוכחה לסולמוטיזם ולכך שאנשים המאובחנים על הרצף האוטיסטי יכולים להתקדם ולהשתלב בחברה.
www.prog.co.il
על רצף ההצלחות • אילון מאסק
מאסק הוא יזם בעל חזון מרשים, ממציא מברקי, איש עסקים ממולח, מנכ"ל אגדי לחברות ששברו שיאים, והוא גם--- אדם עם אספרגר. אילון מאסק הוא דוגמה לסולמוטיזם ולזה שאנשים עם קשיי תקשורת יכולים להשתלב בחברה וליצור קשרים והשפעה.
www.prog.co.il
אני רואה בך משהו טוב • ראיון עם אמא לשלושה ילדים על הרצף
אמא לשלושה ילדים המאובחנים על הרצף האוטיסטי מספרת בראיון פתוח על ההתמודדות, התקדמות והסביבה
www.prog.co.il
קבוצה 2 -
הנה קהילת ה
: )@product
@*צילי @:) Yael
@>השראה< @a80
@M . A
@אידיאלי! @אילה רובינפלד @דריבלית
@הודיה בן חיים @מכונתכתיבה @סימן טוב
@פניני שיד @פרוגיסתית @רות גולדבלט
@ריקי אלבז @שוקי דיין
@shalom-m @רייזי בירנבוים @רוני רביץ
התוצרים:
מושגחונים - מתי הכל התחיל ◣ היסטוריה מרתקת ופודקאסטים עכשוויים
לגלוש אחורה במסע מרתק משולב קול, צבע ועניין ◢ מושגחונים לגמרי! אי אפשר להישאר בחוץ כשהכל בפנים לוהט.
mushgachon.one
מושגחונים – מי יצר את המותג הנצחי הזה ♦ שיתוף מרגש מאחורי הקלעים.
כפעילות דיגיטלית מאתגרת לכבישת שטחים בגוגל נולד המותג ♢ מושגחונים.תראו איך מקצוענים נרתמו למיצוב המותג המושלם.
we.mushgachon.one
מושגחונים - שאלון שבסופו נגלה שגם אתה מושגחון ▨
שאלון אינטרקטיבי ומחייך, כדי תהיו בטוחים שאתם חלק מאיתנו ◓ מושגחונים מופלאים. דקה וחצי של מודעות וכיף.
mushgachon.xyz
מה הסיפור של המותג מושגחונים? ¶ סטוריטלינג נוגע של יחיד.
כאן מצטרפים למושגחונים שעוקבים מנסיקה ועד לנפילה המרסקת ◉ לא ניתן ספויילרים בסוף כולנו גדלים, השאלה מה עוברים בדרך.
story.mushgachon.xyz
מושגחונים
Podcast · mushgachonim · מה הסיפור של המושגחונים? תאר לעצמך שאתה יודע, בוודאות, שיש מישהו שמתבונן ורואה אותך כל הזמן. משגיח עליך, דואג לך ומציל אותך מטעויות ומעידות. הוא גם אוהב אותך ללא תנאי, ולא משנה מה תעשה, הוא עדיין יאהב אותך, מאד! מתוך שבעה מיליארד בני אדם, הוא רואה ספציפית אותך...
open.spotify.com
13 תגובות
שלום לכולם
אחרי קצת יותר מחודש,
של עבודה מאומצת של כמעט חמישים אנשי מקצוע מבית פרוג!
למי שלא ראה (יש מישהו כזה?? : ) )
www.prog.co.il
כל הטוב האדיר הזה עם @EPaP @product מנהלות הקבוצות שלנו
שאין מספיק פיקסלים כאן בשביל להתחיל להסביר על מה שהלך בכל המהלך הזה,
ומה שנעשה בניהול הקבוצות שהוא מעל ומעבר.
באחריות ובעבודה מדהימה,
ועוד לא כתבתנו כלום.
כן, עוד נכתוב. ברור!
אנחנו גאים להציג את רשימת השופטים!
כולם ללא יוצא מן הכלל אנשי מקצוע מהשורה הראשונה,
שנתנו מזמנם החשוב למען מטרה נפלאה זו.
להביא את אנשי המקצוע שלנו לקדמת הבמה,
שילוב של מגוון כשרונות, נסיון ומקצועיות
ואפשרות להתנסות במכלול של הפקה כמו שנערך כאן.
קבלו את השופטים שלנו:
ושמרו את מחר בשעה 21:00 ז׳ באב (4.8.22) בע״ה
נעלה ונכריז בהסרטה
את תוצאות השפיטה,
הולך להיות מעניין, מחכים ומקצועי!
הצגת התוצאות תלווה בהשתתפות נציג מכל קבוצה
תגלו מה הקבוצות עשו ומה האג׳נדות שהם קידמו!
ועוד הפתעות שבדרך.
זה המקום להודות להנהלת @prog - חיים וטובי דיקמן
שכל האתר הזה כל כולו עם האג׳נדה המשותפת של התחרות
לקדם, לפרסם ולתת במה, ללא כל תמורה ועם הרבה תמיכה יוצאת מן הכלל - לאנשי המקצוע שלנו.
בהערכה ובתודה רבה!
תודה גדולה ל @הכלבויניק על כל התמיכה והעבודה הענקית מאחורי הקלעים - יש לו חלק ענק בכל התחרות הזו!
בהצלחה וס״ד!
אחרי קצת יותר מחודש,
של עבודה מאומצת של כמעט חמישים אנשי מקצוע מבית פרוג!
למי שלא ראה (יש מישהו כזה?? : ) )
תחרות כובשים שטחים - תחרות פורום דיגיטל פרוג 2022 - כובשים שטחים - כל הפרטים!
חשבתם שבחיפוש בגוגל מוצאים כבר הכל ומה עוד אפשר לחדש? התחרות שלנו תחדש לכם! בטח רבים מכם נתקלים בדייג החייכני של Google Fishing Game כשמחפשים משהו שלא קיים בגוגל. רגע עוד לא הבנתם, על איזה דייג אני מדברת? אז הנה שתי דוגמאות: עגולנטירה זו מילה שהמצאתי. חפשו אותה בגוגל, טוב חיפשתי בשבילכם...
www.prog.co.il
כל הטוב האדיר הזה עם @EPaP @product מנהלות הקבוצות שלנו
שאין מספיק פיקסלים כאן בשביל להתחיל להסביר על מה שהלך בכל המהלך הזה,
ומה שנעשה בניהול הקבוצות שהוא מעל ומעבר.
באחריות ובעבודה מדהימה,
ועוד לא כתבתנו כלום.
כן, עוד נכתוב. ברור!
אנחנו גאים להציג את רשימת השופטים!
כולם ללא יוצא מן הכלל אנשי מקצוע מהשורה הראשונה,
שנתנו מזמנם החשוב למען מטרה נפלאה זו.
להביא את אנשי המקצוע שלנו לקדמת הבמה,
שילוב של מגוון כשרונות, נסיון ומקצועיות
ואפשרות להתנסות במכלול של הפקה כמו שנערך כאן.
קבלו את השופטים שלנו:
ושמרו את מחר בשעה 21:00 ז׳ באב (4.8.22) בע״ה
נעלה ונכריז בהסרטה
את תוצאות השפיטה,
הולך להיות מעניין, מחכים ומקצועי!
הצגת התוצאות תלווה בהשתתפות נציג מכל קבוצה
תגלו מה הקבוצות עשו ומה האג׳נדות שהם קידמו!
ועוד הפתעות שבדרך.
זה המקום להודות להנהלת @prog - חיים וטובי דיקמן
שכל האתר הזה כל כולו עם האג׳נדה המשותפת של התחרות
לקדם, לפרסם ולתת במה, ללא כל תמורה ועם הרבה תמיכה יוצאת מן הכלל - לאנשי המקצוע שלנו.
בהערכה ובתודה רבה!
תודה גדולה ל @הכלבויניק על כל התמיכה והעבודה הענקית מאחורי הקלעים - יש לו חלק ענק בכל התחרות הזו!
בהצלחה וס״ד!
93 תגובות
שלום לכם,
באשכול הזה אפרסם מאמרים נחמדים (לדעתי...) בנושאי CSS מעניינים, שפרסמתי בעבר בבלוג שלי (שאותו הפסקתי לתחזק לצערי מחוסר זמן... מקווה לחזור לכתוב בעתיד)
והפעם על יישור אנכי לאלמנטים ביחס לאלמנטים אחרים. קיימות סיטואציות שונות בה אנו רוצים ליישר אלמנטים, ולכל סיטואציה הפתרון/ות שלה.
1. יישור שורה אחת
הבעיה
נתחיל מהמצב הפשוט ביותר. יש לנו כפתור בגובה מסויים, ואמור להיות בו טקסט כלשהו. לדוגמא כפתור שליחה של טופס. אנו רוצים שהטקסט יהיה מיושר בתוך הכפתור.
הפתרון
אם נניח שגובה הכפתור הינו 40 פיקסלים, הרי שכל מה שנצטרך להוסיף זה הגדרה של line-height: 40px.
הסבר
ההגדרה של line-height מגדירה את גובה השורה של הטקסט הנתון. הטקסט תמיד יהיה מיושר בתוך גובה השורה שלו. לכן ברגע שהגדרנו את גובה השורה כגובה האלמנט – הטקסט יתיישר בגובה השורה וממילא בגובה האלמנט.
הערה בקטנה ישנם פונטים מסויימים, שבהם האותיות לא מיושרות למה שנקרא baseline - נקודת האמצע בגובה של השורה. טיפה מסובך להסביר את זה, אבל בסופו של דבר התוצאה היא שאם נגדיר את אותו גובה שורה כמו הפתרון שהוצע כאן - הטקסט לא יהיה מיושר, וכן אם ניישר טקסט לאייקון. זה קרה לי למשל באתר וריפון (http://verifone.co.il/). אם תלכדו בinspector את הכפתור על הבאנר, ניתן לראות שיש לו padding top קצת, בלי זה הטקסט לא מיושר טוב. באשמת מי שפיתח את הפונט... אבל עזבו, זה לעיתים ממש נדירות.
2. יישור מס' שורות בלתי ידוע
הבעיה
הפתרון של line-height מעשי רק כשיש לנו שורה אחת של תוכן. במידה ויש יותר משורה אחת שאמורות להיות ממורכזות באזור מסוים וניתן שם הגדרת line-height – השורה הראשונה תהיה ממורכזת, ואילו השניה תרד מתחת לאלמנט. כי גובה כל שורה יהיה כגובה האלמנט. מה נעשה אם כן כשיש לנו מס' שורות בלתי ידוע – פעם שורה, פעם שתיים ופעם יותר?
פתרון א'
ההגדרה vertical-align מקבלת שתי משמעויות שונות, בהתאם להגדרת הdisplay של הנושא אותה (אם התגובות שלכם תהינה חיוביות, אעלה בעז"ה פוסט נוסף שעוסק כולו בהגדרות הdisplay הנפוצות ומשמעותן)
הצורה הראשונה באה לידי בטוי בפתרון הראשון שנתנו. ברגע שיש לאלמנט display: table-cell או שברמת הHTML הוא מוגדר כ<td> – הרי שההגדרה של היישור מתייחסת באופן אוטומטי ליישור התוכן שלו בתוך הגובה שלו. כלומר, אם התוכן שלו תופס 20 פיקסלים והגובה הכולל שלו הוא 100 פיקסלים (אם בגלל הגדרת CSS ואם בגלל אלמנטים אחרים שלידו) – במידה וניתן לתא הזה vertical-align כלשהו – התוכן שלו יתיישר בתוכו בהתאם להגדרה (top – התוכן יתיישר למעלה וכו').
בפתרון א' שלמעלה, הוספנו לכפתור הגדרת טבלה, ולאלמנט בתוכו, שמכיל את כל התוכן – הגדרת תא בטבלה. (הוספת האלמנט הזה – כדי לתמוך בכל מצב). ברגע שהתוכן של הכפתור מוגדר כתוכן של תא בטבלה – הוא יהיה מיושר בהתאמה להגדרה שקיבל התא. בדוגמא שלנו – ימתרכז.
לעומת זאת כמעט בכל אפשרות display אחרת – לא התוכן הוא שמתיישר, אלא האלמנט עצמו מתיישר ביחס ל"אחים שלו", האלמנטים שנמצאים באותה היררכיה שלו, תחת אותו "אב". המשמעות המעשית של זה, שלא מספיק לתת לכפתור vertical-align: middle כדי שכתוכן שלו יתיישר בתוכן, אלא התוכן צריך להיות מיושר ביחס למשהו אחר. לצורך זה הוספנו את האלמנט הריק – vertical-align-helper (ניתן כמובן לתת לו איזה שם שמתחשק). לאלמנט הזה הגדרנו שגובהו יהיה זהה לגובה האב (בדוגמא שלנו- לגובה הכפתור). אחר כך עטפנו את התוכן בspan (ניתן לעטוף גם בdiv אם רוצים. כאן היה לי בפנים רק טקסט, לכן עטפתי רק בspan), והגדרנו שהאלמנט שאחרי ה"עוזר" שלנו יקבל את ההגדרות הבאות:
ומה עדיף?
אם תשאלו לדעתי, עדיפה הדרך השניה. זו עם display: inline-block. וזאת מהסיבה שלdisplay table וtable-cell יש תופעות לוואי של הגדרות שאינן נתמכות, רוחב שאינו בשליטה ועוד. למה להסתבך אם יש דרך אחרת פשוטה, נקיה ושעובדת היטב?!
עד כאן להיום. אשמח לתגובות עד כמה היה המאמר ברור ויעיל
פורסם לראשונה בבלוג שלי
https://hanniessite.wordpress.com/2016/08/14/יישור-אנכי-לאלמנטים/
באשכול הזה אפרסם מאמרים נחמדים (לדעתי...) בנושאי CSS מעניינים, שפרסמתי בעבר בבלוג שלי (שאותו הפסקתי לתחזק לצערי מחוסר זמן... מקווה לחזור לכתוב בעתיד)
והפעם על יישור אנכי לאלמנטים ביחס לאלמנטים אחרים. קיימות סיטואציות שונות בה אנו רוצים ליישר אלמנטים, ולכל סיטואציה הפתרון/ות שלה.
1. יישור שורה אחת
הבעיה
נתחיל מהמצב הפשוט ביותר. יש לנו כפתור בגובה מסויים, ואמור להיות בו טקסט כלשהו. לדוגמא כפתור שליחה של טופס. אנו רוצים שהטקסט יהיה מיושר בתוך הכפתור.
הפתרוןאם נניח שגובה הכפתור הינו 40 פיקסלים, הרי שכל מה שנצטרך להוסיף זה הגדרה של line-height: 40px.
קוד:
.button{
height: 40px;
line-height: 40px;
}ההגדרה של line-height מגדירה את גובה השורה של הטקסט הנתון. הטקסט תמיד יהיה מיושר בתוך גובה השורה שלו. לכן ברגע שהגדרנו את גובה השורה כגובה האלמנט – הטקסט יתיישר בגובה השורה וממילא בגובה האלמנט.
הערה בקטנה ישנם פונטים מסויימים, שבהם האותיות לא מיושרות למה שנקרא baseline - נקודת האמצע בגובה של השורה. טיפה מסובך להסביר את זה, אבל בסופו של דבר התוצאה היא שאם נגדיר את אותו גובה שורה כמו הפתרון שהוצע כאן - הטקסט לא יהיה מיושר, וכן אם ניישר טקסט לאייקון. זה קרה לי למשל באתר וריפון (http://verifone.co.il/). אם תלכדו בinspector את הכפתור על הבאנר, ניתן לראות שיש לו padding top קצת, בלי זה הטקסט לא מיושר טוב. באשמת מי שפיתח את הפונט... אבל עזבו, זה לעיתים ממש נדירות.
2. יישור מס' שורות בלתי ידוע
הבעיה
הפתרון של line-height מעשי רק כשיש לנו שורה אחת של תוכן. במידה ויש יותר משורה אחת שאמורות להיות ממורכזות באזור מסוים וניתן שם הגדרת line-height – השורה הראשונה תהיה ממורכזת, ואילו השניה תרד מתחת לאלמנט. כי גובה כל שורה יהיה כגובה האלמנט. מה נעשה אם כן כשיש לנו מס' שורות בלתי ידוע – פעם שורה, פעם שתיים ופעם יותר?
פתרון א'
- הוספת ההגדרה display: table לכפתור
- עטיפת הטקסט שבתוכו בתגית נוספת, לדוגמא <span>,
- ואז לתגית החדשה נוסיף display: table-cell; vertical-align: middle;
- לכפתור נוסיף אלמנט ריק: <span class="vertical-align-helper"></span>
- נעטוף את התוכן שצריך יישור <span>כאן יופיע הHTML של כל מה שצריך יישור. </span>
- הוספת הCSS הבא:
.vertical-align-helper{ display: inline-block; height: 100%; vertical-align: middle;{
.vertical-align-helper + * { display: inline-block; width: 99%; vertical-align: middle;} - אם כשמסיימים את כל זה התוכן שאמור היה להתיישר "בורח" אל מתחת האלמנט האב (בדוגמא שלנו – הכפתור) – יש להוסיף לאב את ההגדרה הבאה:font-size: 0px;
ההגדרה vertical-align מקבלת שתי משמעויות שונות, בהתאם להגדרת הdisplay של הנושא אותה (אם התגובות שלכם תהינה חיוביות, אעלה בעז"ה פוסט נוסף שעוסק כולו בהגדרות הdisplay הנפוצות ומשמעותן)
הצורה הראשונה באה לידי בטוי בפתרון הראשון שנתנו. ברגע שיש לאלמנט display: table-cell או שברמת הHTML הוא מוגדר כ<td> – הרי שההגדרה של היישור מתייחסת באופן אוטומטי ליישור התוכן שלו בתוך הגובה שלו. כלומר, אם התוכן שלו תופס 20 פיקסלים והגובה הכולל שלו הוא 100 פיקסלים (אם בגלל הגדרת CSS ואם בגלל אלמנטים אחרים שלידו) – במידה וניתן לתא הזה vertical-align כלשהו – התוכן שלו יתיישר בתוכו בהתאם להגדרה (top – התוכן יתיישר למעלה וכו').
בפתרון א' שלמעלה, הוספנו לכפתור הגדרת טבלה, ולאלמנט בתוכו, שמכיל את כל התוכן – הגדרת תא בטבלה. (הוספת האלמנט הזה – כדי לתמוך בכל מצב). ברגע שהתוכן של הכפתור מוגדר כתוכן של תא בטבלה – הוא יהיה מיושר בהתאמה להגדרה שקיבל התא. בדוגמא שלנו – ימתרכז.
לעומת זאת כמעט בכל אפשרות display אחרת – לא התוכן הוא שמתיישר, אלא האלמנט עצמו מתיישר ביחס ל"אחים שלו", האלמנטים שנמצאים באותה היררכיה שלו, תחת אותו "אב". המשמעות המעשית של זה, שלא מספיק לתת לכפתור vertical-align: middle כדי שכתוכן שלו יתיישר בתוכן, אלא התוכן צריך להיות מיושר ביחס למשהו אחר. לצורך זה הוספנו את האלמנט הריק – vertical-align-helper (ניתן כמובן לתת לו איזה שם שמתחשק). לאלמנט הזה הגדרנו שגובהו יהיה זהה לגובה האב (בדוגמא שלנו- לגובה הכפתור). אחר כך עטפנו את התוכן בspan (ניתן לעטוף גם בdiv אם רוצים. כאן היה לי בפנים רק טקסט, לכן עטפתי רק בspan), והגדרנו שהאלמנט שאחרי ה"עוזר" שלנו יקבל את ההגדרות הבאות:
- display: inline-block – כדי שיהיה מסוגל להיות מיושר
- vertical-align: middle – כדי שיהיה מיושר לאמצע
- width: 99% – כדי שלא יתפוס מאה אחוז של הרוחב, וזה כדי שלא ייפול למטה (הרי יש לנו אלמנט נוסף שגם הוא אמור לתפוס אי אלו פיקסלים)
ומה עדיף?
אם תשאלו לדעתי, עדיפה הדרך השניה. זו עם display: inline-block. וזאת מהסיבה שלdisplay table וtable-cell יש תופעות לוואי של הגדרות שאינן נתמכות, רוחב שאינו בשליטה ועוד. למה להסתבך אם יש דרך אחרת פשוטה, נקיה ושעובדת היטב?!
עד כאן להיום. אשמח לתגובות עד כמה היה המאמר ברור ויעיל
פורסם לראשונה בבלוג שלי
https://hanniessite.wordpress.com/2016/08/14/יישור-אנכי-לאלמנטים/
36 תגובות
עד היום אחסנתי את הסרטונים לקורסים שלי בדרייב, מסיבות שונות.
החלטתי לעבור לאחסון ביוטיוב (במצב לא רשום) + נגן Presto Player (תוסף וורדפרס: https://prestoplayer.com/)
התוסף שואב את הסרטון מיוטיוב, ומציג אותו בנגן מעוצב.
צופה סטנדרטי לא רואה שהסרטון מגיע מיוטיוב, וכדי להגיע לURL של כל סרטון צריך הבנה בקוד (לא בHTML)
עד כאן - הכל טוב.
הבעיה היא שאם אני מכניסה את הסרטון למסך ברוחב 500px נניח - האיכות של הסרטון תהיה נמוכה (מטושטש)
ואם אני מכניסה סרטון ברוחב מלא (1920px) - האיכות מצויינת.
מהתמיכה של התוסף ענו לי שאין להם אפשרות לשלוט באיכות הנגן (הקישור שנתנו לי: https://developers.google.com/youtube/iframe_api_reference#october-24,-2019)
לפי הבנתי יש כאן הגדרה בוורדפרס שגורמת ליוטיוב להחליט על איכות הסרטון לפי גודל הסרטון בפיקסלים. (כמו האיכות האוטומטית של תמונות לפי גודל)
למישהו יש מושג איך מסדרים את זה?
דחוף לי לראות אם יש פתרון, כי זה תוסף בתשלום ואני מוגבלת בזמן שאפשר לקבל החזר כספי.
תודה רבה.
נ.ב. איפה אתם מאחסנים את הסרטונים שלכם?
החלטתי לעבור לאחסון ביוטיוב (במצב לא רשום) + נגן Presto Player (תוסף וורדפרס: https://prestoplayer.com/)
התוסף שואב את הסרטון מיוטיוב, ומציג אותו בנגן מעוצב.
צופה סטנדרטי לא רואה שהסרטון מגיע מיוטיוב, וכדי להגיע לURL של כל סרטון צריך הבנה בקוד (לא בHTML)
עד כאן - הכל טוב.
הבעיה היא שאם אני מכניסה את הסרטון למסך ברוחב 500px נניח - האיכות של הסרטון תהיה נמוכה (מטושטש)
ואם אני מכניסה סרטון ברוחב מלא (1920px) - האיכות מצויינת.
מהתמיכה של התוסף ענו לי שאין להם אפשרות לשלוט באיכות הנגן (הקישור שנתנו לי: https://developers.google.com/youtube/iframe_api_reference#october-24,-2019)
לפי הבנתי יש כאן הגדרה בוורדפרס שגורמת ליוטיוב להחליט על איכות הסרטון לפי גודל הסרטון בפיקסלים. (כמו האיכות האוטומטית של תמונות לפי גודל)
למישהו יש מושג איך מסדרים את זה?
דחוף לי לראות אם יש פתרון, כי זה תוסף בתשלום ואני מוגבלת בזמן שאפשר לקבל החזר כספי.
תודה רבה.
נ.ב. איפה אתם מאחסנים את הסרטונים שלכם?
10 תגובות
קצת יותר מחודש של עבודה מאומצת ומדהימה -
ואנחנו בישורת אחרונה ובהתארגנות לשלב השפיטה.
של התחרות הזו>>
כל חברי הקבוצות מחויבים לא להדליף חומרים עד לרגע השפיטה : )
אז עשינו לכם איזה מיקס מכל מיני חלקים משתי הקבוצות יחד לבינתיים.
שהוא בגדר מגלה טפח ומכסה הרבה טפחיים.
ותעקבו אחרי האשכול לעדכונים נוספים!ֿ
ואנחנו בישורת אחרונה ובהתארגנות לשלב השפיטה.
של התחרות הזו>>
כל חברי הקבוצות מחויבים לא להדליף חומרים עד לרגע השפיטה : )
אז עשינו לכם איזה מיקס מכל מיני חלקים משתי הקבוצות יחד לבינתיים.
שהוא בגדר מגלה טפח ומכסה הרבה טפחיים.
ותעקבו אחרי האשכול לעדכונים נוספים!ֿ
41 תגובות
5 תגובות
הצטרפות לניוזלטר
איזה כיף שהצטרפתם לניוזלטר שלנו!
מעכשיו, תהיו הראשונים לקבל את כל העדכונים, החדשות, ההפתעות בלעדיות, והתכנים הכי חמים שלנו בפרוג!
לוח לימודים
מסלולי לימוד שאפשר להצטרף
אליהם ממש עכשיו:
לוח מודעות
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- ברוריה2266
- נוצר:
- דירת גן ירושלים
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- wg
- נוצר:
- פורממן
- נוצר:
- יהונתן כץ
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- נופש עם נוף לכנרת
- נוצר:
- שותף בעסק
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
- מתחם האירוח והנופש
- נוצר:
Royal Water Villa – סוויטה עם בריכה פרטית
🌊 Royal Water Villa – סוויטה עם בריכה פרטית 🌊...
וילה גדולה ומפנקת לשבת הגדול ולפסח במרכז
וילה גדולה יפהפיה ונקיה עם נוף פנורמי באוירה...
וילת ''נופש בגבעה” – חופשה ברמה אחרת באשקלון!
וילת “נופש בגבעה” אירוח ברמה אחרת...!!
פתוחה...
דירת נופש ענקית ומפנקת בלב ירושלים
דירת נופש משופצת מהיסוד, ברמה הגבוהה ביותר, 5...
וילה משפחתית עם נוף קסום ואווירה מיוחדת
דירת נופש גדולה מפנקת ומאובזרת
נמצאת בישוב...
נופש משפחתי בסטנדרט שלא הכרתם - פנוי לפסח!
רוממותא הוא מתחם נופש חרדי פרימיום למשפחות...
מתחם אירוח לימי גיבוש, שבתות חתן וקבוצות
5 וילות מחוברות בלב בית שמש
המקום המושלם...
חופשה משפחתית יוקרתית: 5 חדרים בקו הים 🌊
נופש יוקרתי על הים: דירת 5 חדרים מרווחת (2...
יחידה לזוג באזור גן ורשא
יחידה מהממת ומטופחת נקיה לפסח עם ממ"ד!!
במרכז העיר
דירת נופש משופצת ונקיה ברמה!
דירה נקיה מאוד, אפשר לקבל במייל תמונות, צמודה...
דירת נופש בקריית שמואל עם נוף עוצר נשימה לכנרת
דירת הנופש נמצאת במרכז קרית שמואל ליד השטיבלאך...
מחפש להחליף דירת 3 חדרי שינה בירושלים לדירת 3 חדרי שינה בנתניה לפסח!!
מחפש להחליף דירת 3 חדרי שינה בירושלים בדירת 3...
דירת נופש מפנקת מושכרת לכל חג הפסח ב4000 ש"ח
דירה אירוח
דירת אירוח מפנקת ונעימה לזוג או...
צימר זוגי / משפחתי מפנק בישוב הנופש מיצד!!
צימר מפנק ומרווח, המותאם במיוחד לזוגות ומשפחות...
דירה נופש יחודית ברובע היהודי בסמיכות לכותל
ברח' שונה הלכות, בסמיכות לכותל (2 דקות הליכה)...
3 חדרי שינה. עד 12 איש. 12 דק הליכה מהכנרתת
דירת נופש בטבריה - חדשה ויוקרתית
מתחם גדול מתאים במיוחד לשבתות גיבוש ושמחות ולכל מטרה
מתחם נאה ומסודר בלב בני ברק שקט ביוחד
אירוח...
בית כפרי בבר יוחאי- מושלם למשפחות
🌻 בית כפרי עם 5 חדרי שינה, אפשרות להוספת...
דירה משפחתית מהממת לנוף!!!
דירה שמורה ומהממת ונקיה לכיוון הנוף כולל מרפסת...
דירת נופש לפסח נקיה ומטופחת
דירת נופש נקיה מרוחות ומטופחת
משכירים לכל הפסח...
סוויטה זוגית מפנקת בקו ראשון לים
✨ חופשה זוגית מושלמת בקו ראשון לים! ✨
סוויטה...
המקום המושלם לנופש גלילי קסום ומושקע.
מושלם לנופש משפחתי כולל מרפסת עם נוף מטורף...
memories /נופשים בעתיקה סוויטת פסגת הארי
בלב העיר העתיקה של צפת, ברחוב האר״י 18, מחכה...
memories / ממוריז נופשים בעתיקה
צימר מרווח ומפנק בצפת העתיקה – חופשה קסומה עם...
יחידה חדשה, יוקרתית ומושקעת ברמה של מלון בוטיק!
יחידה חדשה, יוקרתית ומושקעת ברמה של מלון...
דירת נופש חדשה ומרווחת בהר שמואל 5 דקות מירושלים
דירה להשכרה חדשה מרווחת ויפה !!
בהר שמואל...
דירת נופש קומת קרקע בהר שמואל
דירה נקיה ומוסדרת קומת קרקע בשכונה שקטה ונעימה...
דירה עם מרפסת נוף לכנרת ומירון
דירה משופצת ומקסימה, ריהוט חדש, מרפסת עם נוף...
אהבת את הפורום? שתף>>
Reactions: א חסידישער איד, נ.פ., שוקי דיין ועוד 20 משתמשים23 //