Browse by Tags

center elements in html
17 January 12 08:05 PM | Shlomo | 2 comment(s)

כיצד למרכז אלמנטים בעזרת css. סביר להניח שזה פשוט למי שכבר יודע - אבל למי שלא - הפוסט הזה יכול לחסוך שעות של נסיונות נואשים. אז ככה. בעבר היה דרך (עובד גם היום רק שיצא מהתקן) לכתוב כך: < center > ..... </ center > כל מה שיופיע בתוך התגיות ימורכז, הסיבה שזה יצא מהתקן היא מכיוון שאנחנו אמורים לכתוב ב - html את התוכן ולא את העיצוב. מה שצריך לעשות זה כך: .center { margin-left : auto ; margin-right : auto ; text-align : center ; } אלמנט שיקבל את ה - class המתאים (center) ימורכז - כמובן שהוא...

תגים:DEV, html, CSS

background-position RTL jQuery plugin
25 October 11 09:23 PM | Shlomo | with no comments

כיצד להגדיר background-position כשמדובר באתרים עם rtl ? התחלתי לעצב אתר כשקבלתי עיצוב מותאם לאנגלית והייתי צריך לשנות אותו לעברית, על ההתחלה נתקלתי בבעייה הבאה: נקח לדוגמא את ה - css הבא: body { background-image : url('Penguins.jpg') ; background-repeat : repeat-y ; background-position-x : 30px ; } css פשוט ביותר שיגרום לתמונה מסויימת להתחיל בשלושים פיקסל ימינה, מה יקרה עם נוסיף את השורה הבאה: direction : rtl ; האתר יעבור לצד ימין, כשתמונת הרקע נשארה תקועה בצד שמאל, בעוד שהכוונה כרגע שמצד...

תגים:DEV, JavaScript, html, CSS, jQuery, html5, css3, js

text-shadow CSS3
11 April 11 10:50 AM | Shlomo | with no comments

כחלק מהתקן של CSS3 הגיע מאפיין חדש בשם text-shadow שמגדיר צל עבור טקסט. div { font-family : Arial ; font-size : 55px ; width : 250px ; height : 250px ; border : 1px solid black ; margin : 20px ; padding : 20px ; text-shadow : rgba(0,0,0,0.7) -1px -1px, rgba(0,0,0,0.5) -2px -2px, rgba(0,0,0,0.3) -3px -3px ; background-color : Yellow ; } < div > Sela College Channel </ div > בדוגמא אפשר לראות שמוגדר כמה שבות של צל. התוצאה של הקוד הזה: נכון להיום זה עדיין לא נתמך ב - IE, נקווה שהם יתמכו...

תגים:DEV, html, CSS, html5, css3

במצגת והקוד מההרצאה שלי בקבוצת המשתמשים
21 September 10 09:03 AM | Shlomo | 1 comment(s)

ב - 19/09 העברתי הרצאה על פיתוח לפי בתקנים וכיצד IE8 ו - IE9 עובדים לפי התקן, ראינו גם קצת HTML5 ו - CSS3 ועוד הרבה דברים מעניינים. (מי שלא היה הפסיד) לצערי עקב הזמן המוגבל לא הספקנו לראות איך מגדירים WebSlice, Search Providers, Accelerators (אולי בפעם הבאה). אני מקווה שהקהל נהנה - אני נהניתי. מצורף כאן הקוד והמצגת . בקרוב כשנעלה את ה - Sela Collage Channel אני אעביר שוב את ההרצאה בשידור חי.

תגים:DEV, IE8, CSS, internet Explorer 8, html5, ie9, internet Explorer 9

What is new in IE9 - Overlapping Tags
29 August 10 07:41 AM | Shlomo | 1 comment(s)

מה ההתנהגות לפי התקן כשתגים מקוננים אחד בתוך השני. הדוגמא לקוחה מה - MSDN מה קורה כשיש לנו את ה - html הבא You should be aware of how < b > this < i > affects </ b > script </ i > . כמובן שהמילים this affects יופיעו במודגש והמילים affects script יופיעו בהטייה. אבל כשננסה לגשת אליהם בסקריפט, למשל הרצת הקוד הבא var elms = document.getElementsByTagName( "i" ); ב - IE8 יוחזר אלמנט אחד שה - innerText שלו הוא: affects script ואילו ב - IE9 יוחזרו שני אלמנטים (כל מילה היא...

תגים:DEV, CSS, html5, ie9, internet Explorer 9

הדלק זרקור / כבה זרקור - החשכת המסך עם שקיפות
27 August 10 01:45 AM | Shlomo | 2 comment(s)

כיצד לממש החשכת המסך עם שקיפות. בהרבה אתרים שמציגים וידיאו (כמו בנענע ואחרים) יש פיצ'ר מאוד נחמד, אפשר לצפות במסך מלא - אבל אם אין ברצונכם לצפות במסך מלא ועדיין אתם רוצים לצפות בלי שכל הפרסומות יציקו מסביב וכל צבעי האתר ישגעו אתכם - יש לחצן מעניין בשם "הדלק זרקור" (או משהו כזה). לאחר לחיצה על הלחצן, המסך מוחשך (אבל שקוף) ורק הנגן עדיין בפעולה. כמו שכתבתי אנחנו עומדים לשחרר את Sela Collage Online לאוויר וכמובן רצינו את הפיצ'ר הנחמד הזה גם אצלנו. בפוסט הנוכחי אני אדגים כיצד לממש את...

תגים:DEV, JavaScript, html, CSS, Sela, Sela College Channel

What is new in IE9 - Generic Element
26 August 10 09:58 AM | Shlomo | with no comments

מה השתנה בהתנהגות של IE ל - Generic Element לפי התקן. בהמשך לפוסטים על IE9 הפעם נדבר על ההתאמה לתקן בנושא Generic Element בגרסאות קודמות של IE במידה והיינו רוצים להגדיר אלמנטים חדשים משלנו, למשל: myDiv { color : blue ; font-weight : bold ; background-color : Silver ; } (שימו לב - זה לא הגדרה של class אלא הגדרה של אלמנט) כדי ש - IE יציג את העיצוב על אלמנטים מסוג myDiv היה צריך להשתמש ב - createElement ואילו מה שהוגדר ב - html לא השפיע. למשל הקוד הבא: <!-- Dont work in IE8, Work in IE9 --> <...

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - audio element
25 August 10 09:38 AM | Shlomo | with no comments

איך לנגן קבצי אודיו בדפי אינטרנט בהמשך לפוסטים על IE9 נראה הפעם את המימוש של התקן להשמעת קבצי אודיו כדי לנגן נוכל לכתוב את הקוד הבא < audio src ="a.mp3" autoplay controls loop > This content appears if the video tag or the codec is not supported. </ audio > נקבל את הפקד הבא כרגע נתמכים הפורמטים MP3 ו - AAC

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - video element
24 August 10 10:05 AM | Shlomo | with no comments

איך להציג וידיאו בדפי אינטרנט. בהמשך לפוסטים על התכונות של IE9 נדבר הפעם על הטמעה של קבצי וידיאו באתר (רוב המידע בפוסטים שלי על IE9 מגיע מהאתר של מייקרוסופט ) בעבר כדי להציג וידיאו היינו צריכים להשתמש ב - active-x שונים, היום בעזרת התמיכה ב - HTML5 נוכל להטמיע קבצי וידיאו בפשטות < video width ="400" height ="300" src ="a.mp4" poster ="frame.jpg" autoplay controls loop > This content appears if the video tag or the codec is not supported. </ video >...

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - Media Queries
22 August 10 09:49 AM | Shlomo | with no comments

בהמשך לפוסטים על IE9 נראה את ההטמעה של ה - Media Queries כפי שהוגדר בתקן בעבר במידה ורצינו להציג את הדף לפי הרזולוצייה או לפי רוחב המסך היינו צריכים לכתוב javascript שיעשה את העבודה. לא עוד מהיום נוכל לתשאל בעזרת Media Query הגדרות שונות של סביבת העבודה. למשל - הקוד הבא div { border : solid 1px black ; } @media screen and (max-width:400px) { div { border : none ; } } מגדיר שבמידה ורוחב המסך קטן מ - 400px המסגרות של ה - div-ים יעלמו. (זה ממש נחמד לראות את המסגרות נעלמים ברגע שמקטינים את המסך) אפשר...

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - color property (Transparent)
20 August 10 12:09 PM | Shlomo | with no comments

שימוש בשקיפות של צבע טקסט. בהמשך לפוסטים היומיים אודות IE9 הפעם נראה שהמאפיין color קבל את האופצייה לערך Transparent. עד היום המאפיין color יכל לקבל צבע אבל לא ידע לקבל שקיפות, בעזרת השמת הערך Transparent למאפיין color ניתן להשיג את האפקט הרצוי. לדוגמא < div class ="c"> הזז את העכבר על האלמנט כדי להעלים את הטקסט ולראות את המסגרת </ div > .c { color : Red ; border : solid 2px white ; background-color : Lime ; width : 200px ; height : 200px ; direction : rtl ; text-align : center...

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - opacity
19 August 10 02:55 PM | Shlomo | with no comments

כיצד להגדיר שקיפות לאלמנטים ב - IE9. בהמשך לפוסטים על IE9 נכיר את האלמנט החדש של CSS 3 שנקרא opacity. בכדי לתת שקיפות לאלמנטים ב - html נוכל להשתמש ב - opacity, למשל: < p style =" background-color : Red ; width : 200px ; text-align : center"> < input type ="button" value ="Click Me" style =" opacity : 0.7 ; " /> </ p > בדפדפנים ישנים נראה את זה: ואילו בדפדפנים חדשים או אפשר לדוגמא להציג מגוון של צבעים בעזרת הקוד הבא: < table class ="opacity_sample"...

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - background-color (rgba)
18 August 10 11:17 AM | Shlomo | with no comments

כיצד להגדיר צבעים עם שקיפות ב - IE9 בהמשך לפוסטים שלי על IE9 נראה היום את האפשרות להגדיר צבעים עם שקיפות. חשוב להבהיר שכל השינויים שאני מדבר עליהם שקשורים ל - CSS הם תקניים לחלוטין ואמורים להיתמך בכל הדפדפנים החדשים. עד היום יכולנו להגדיר צבע בעזרת background-color : rgb(255,0,0) ; היום אפשר גם להגדיר שקיפות לצבע בעזרת background-color : rgba(255,0,0,0.5) ; כשמידת השקיפות היא בין 0.0 לבין 1.0 חושב להבין שמדובר אכן בשקיפות אמיתית ולא בשינוי צבע, לדוגמא הקוד הבא. < div style =" position : absolute...

תגים:DEV, CSS, html5, ie9, internet Explorer 9

What is new in IE9 - border-radius
17 August 10 12:05 PM | Shlomo | with no comments

אחרי סדרת פוסטים על IE8 כמדומני שהגיע הזמן להתחיל לכתוב גם על IE9. הפעם נכתוב על מאפיין חדש שנקרא border-radius . הרבה זמן חפשנו את האופצייה לעגל פינות של אלמנטים ב - html, היינו שמים תמונות או משתמשים בפקדים חיצוניים כמו RoundedCorners של ajax ואחרים. בעזרת המאפיין החדש נוכל לעגל כל אלמנט DOM שנרצה. לדוגמה הקוד הבא < div class ="outer"> < div class ="inner"> shlomo < br /> shlomo shlomo < br /> shlomo shlomo < br /> shlomo shlomo < br /> shlomo...

תגים:DEV, CSS, html5, ie9, internet Explorer 9

Add css links from code
05 July 10 09:14 PM | Shlomo | 2 comment(s)

כיצד ניתן להוסיף בצורה דינמית לינקים ל - CSS בזמן ריצה. הפיתרון הוא די פשוט - אפשר לקרוא לפונקצייה הזאת. public void AddCSSFile( string file) { HtmlLink css = new HtmlLink (); css.Href = file; css.Attributes[ "rel" ] = "stylesheet" ; css.Attributes[ "type" ] = "text/css" ; css.Attributes[ "media" ] = "all" ; Page.Header.Controls.Add(css); } במקרה שאתם בתוך update panel - אפשר לזהות על ידי הבדיקה הבאה ScriptManager .GetCurrent( Page ).IsInAsyncPostBack...

תגים:DEV, CSS, asp net