Facebook
Twitter
RSS526
צפיות
צפיות
19
תשובות
תשובות
שלום לכולם וברוכים הנמצאים 
זו שאלתי הראשונה כאן בפורום.
אני מצרפת קישור לדף, שנתקלתי בו בבעייה די מעצבנת. הבעיה מופיעה ב-IE בלבד. כאשר מעבירים את הסמן מעל הקישור "השירותים שלנו", נפתח תפריט המשנה שלו, שבמקום להסתיר את הכפתור של הקישור שמשמאלו ("מתווכים ובנקאים"), מופיע מתחתיו.
תפריטים אלו הם פריטי רשימה ויש להם position relative. לכן אי אפשר לתת להם z-index. אני בטוחה שאם הייתי מורידה את ה-position זה היה משנה את המצב, אבל אז כל פריטי הרשימה היו מאבדים את המיקום. איך בכל זאת אפשר לעקוף את התופעה הזאת?
אני מצרפת גם את קובץ ה-CSS של הדף (שיניתי את הסיומת שלו ל-TXT).
בתודה מראש על התייחסותכם,
מיכל
19 תשובות
ברוכה הבאה
לפי הקוד שלך אני מניח שקראת את המאמר לבניית תפריט ב-CSS.
ובכן, לפי הקוד CSS שלך נראה כי חסרים חלקים.
בקוד בעמוד שהבאת יש class בשם submenu לתגית LI אך הוא לא קיים בקובץ ה-CSS.
נסי לבנות את התפריט מחדש בעזרת המאמר אך באופן שלם.
בנוסף, חסר הקובץ שכתוב להורדה על מנת שהתפריט יעבוד כראוי.
בוקר טוב,
נכון קראתי את המאמר, ואף התחלתי לעבוד לפיו, ואף הורדתי את הקובץ של פיטר נדרלוף.
לאחר זמן ראיתי שיש לי בעיות, ולא תמיד תתי התפריט נפתחים, אני מקבלת הודעות שגיאה על קובץ ה-behavior וכו'.
לכן הוספתי סקריפט של JS שידמה את ההתנהגות של ה-hover (למרות שלא לפי הפילוסופיה המקורית).
עד היום זה עבד 10, אבל פתאום התחילה התופעה המשונה הזאת. הקטע הכי מוזר: בלוק התפריט נמצא מעל התמונה של עצמו, אבל מתחת לתמונה שבאה אחריו. לשתי התמונות יש בדיוק אותם מאפייני סיגנון. התופעה כאמור קיימת רק ב-IE.
אם מישהו יוכל לעזור לי עם זה – זה ממש יציל אותי.
שוב תודה,
אני לא חושב
שהבעיה תופיע סתם כך.
אני עובד עם התפריט הנ"ל ב-CSS והוא עובד נפלא.
נפתח כמו שצריך ונסגר כמו שצריך.
ייתכן ועשית משהו לא בסדר במהלך בניית התפריט?
מה שאני יכול להציע לך זה רק לבנות אותו מחדש או לבנות תפריט שהוא בכלל לא ב-CSS אלא רק ב-JS ולבנות הכל בצורה שונה.
כבר בניתי את התפריט הזה 9000 פעם.
הקדשתי לו הרבה הרבה הרבה הרבה יותר
מדי זמן.
להגיד לי לבנות אותו מחדש, זה עונש גדול מדי. ביחוד כשהגעתי לתוצאה שהיא מאד משביעת רצון בעיני, למעט "השריטה" הקטנה הזאת. מה שאני מבקשת זה דבר מאד פשוט: לפתור את הדבר הנקודתי הזה. לבנות את הכל מחדש כדי לפתור את זה נראה לי כמו להרוג זבוב עם תותח, לפחות מבחינת ניצול משאבים.
אני מבינה שלאף אחד מכם אין הצעה יותר קונסטרוקטיבית לפתור את הבעייה הנקודתית. זה מצער אותי מאד, אבל אין מה לעשות. תודה בכל אופן, ולהתראות בשמחות
.
את תמיד יכולה לעבוד
בצורה קצת שונה ולעשות במעבר עכבר על החלק שלא נראה טוב באקספלורר
זה יסתיר את התמונה שקיימת על התפריט ואז בעת יציאה מהאזור של התפריט התמונה תחזור. טכניקה מסוימת שיכולה אולי לעזור.
אני יודע שהתפריט שאני בניתי עם CSS עובד מעולה, גם עם תמונות ואין לי את הבעיה הזו לא באקספלורר ולא במוזילה.
כמו כן אני יודע שיש תפריטים אחרים שעובדים נפלא כמו תפריט CSS ואין להם בעיה כמו שיש לך מסיבה לא כל כך ידועה.
הקוד שלך קצת מבולגן,
ולכן אתחיל באיזה המלצה קטנה. במקום כל פעם להחליף את התמונה במעבר עכבר, דבר שהוא דיי כבד, ואצלי לפחות נראה מאוד צולע – אני חושב שעדיף את כל הפריטים בתפריט לשמור כ-gif עם רקע שקוף, ולעשות שינוי צבע רקע לתג a עצמו.
ככה חסכת קוד JS מיותר, חסכת תעבורה, התפריט מהיר יותר, והכי חשוב לצורך העניין – הקוד יותר נקי 😛
לגבי הבעיה… מאוד מאוד קשה לעקוב אחרי הקוד כשהוא לא מוזח כמו שצריך. גם "חדשות", אגב, נמצא מתחת ל-"צור קשר" (אם תעברי מהר על "צור קשר והתמונה תתחלף, תראי).
באופן כללי, סתם כניחוש, הייתי מהמר שזה איזה תקלה בהחלפת התמונה – היא משום מה מופיעה על התפריט ולא מתחת. לא בטוח את מי להאשים. יש לי 2 הצעות:
1. תנסי להחליף את התמונה בשיטה שונה (innerHTML או משהו), אולי זה יסתדר.
2. להגדיר את התמונה כרקע לריבוע, ולעשות את השינוי ברקע. אם את משתמשת בשיטה הזאת, הייתי ממליץ מאוד שלא להגדיר את הרקע ל-A עצמו ולהישתמש ב-hover כדי לשנות את הרקע (תמונה) – כי זה עובד צולע ביותר.
שנתראה *רק* בשמחות.
לא הבנתי למה אתה מתכוון במשפט
"את תמיד יכולה לעבוד – וBuildHomeו√
בצורה קצת שונה ולעשות במעבר עכבר על החלק שלא נראה טוב באקספלורר". איך לעשות את זה?
תודה,
מיכל
מה זאת אומרת שינוי צבע רקע?
האם ניתן לעשות זאת גם עבור תמונה, ולא רק כצבע רקע חלק? איך אני מגדירה ב-a שינוי צבע לרקע שהוא תמונה?
שוב תודה,
את התמונה עצמה לעשות שקופה
ולשנות את הרקע שמתחתיה.
אבל
לא רק הרקע משתנה.
גם התמונה עצמה. כלומר – גם כפתור הטקסט משנה את הצבע שלו (מלבן על רקע אפור לאפור על רקע תכלת).
לתפריטים הראשיים
(אלה עם השמיים ברקע), פשוט תגדירי רקע עם CSS שזה התמונה עם הכפתור + רקע לבן, ותשני את הרקע במעבר עכבר (obj.style.background). את כל התמונה כחתיכה אחת (בדיוק כמו עכשיו).
לגבי התפריטים הפנימיים, את יכולה להגדיר את התמונה כשקופה ולתג A שעוטף אותה לשנות את ה-background-color באירוע hover (ב-CSS כמובן).
אני לא יודע אם זה בכוונה או שזה "באג", אבל ביציאה מהתפריט כלפי מעלה – התת-תפריט לא נעלם… אני חושב שיש כאן איזה בעיה מבנית כלשהי (אולי שכחת לסגור איזה תג איפהשהו) שהיא שגורמת לכל העסק להיתבלגן.
טוב, בריפרוף קל בקוד
ובאמת שקשה לקרוא את הקוד כשהוא לא מוזח, אני רואה שבאמת יש לך איזה תג סגירת LI אחד מיותר איפשהו לקראת הסוף (egg5) + את לא סוגרת את ה-DIV של התפריט.
בקיצור – תארגני לך את הקוד, אני בטוח שגם בלי שום שינוי מהותי את יכולה לפתור את הבעיה.
אם כלום לא יעזור לבעיה שלך
אז את בעצם יכולה להסתיר את התמונה של השמיים (אם אני לא טועה)
במעבר עכבר על התפריט שנראה חלקי (מצד ימין לתמונה) ובעת יציאה
מהתפריט להחזיר את התמונה של השמיים (obj.style.display/visibility).
קודם כל תודה לשניכם
…
באמת יש שם li מיותר וגם הוספתי את התג הסוגר של ה-div, אבל זה גם לא עוזר. אני אנסה להפריד עכשיו את הרקע מהכפתור ולעבוד עליו לחוד, כמו שהצעתם. מה לעשות, אין מנוחה לרשעים
עדכונים
סידרתי את הקוד ובדקתי אותו ב- w3c validator
ועכשיו הוא לפחות תקני.
נסיתי את מה שהציע השפוי האחרון, וזה לא עוזר. אתם יכולים לראות את זה .
נראה לי שזה בגלל של-div של התפריט יש position relative, לכן הוא תמיד יהיה מעל הבנים שלו, לא משנה איזה z-index יהיה להם. אז כל ה-a, עם הרקע שלו והכל, יהיה תמיד מתחת לבלוק של הרשימה מתחתיו, גם אם יש לו z-index גבוה.
האמת, שאני לא בטוחה שגם אם הייתי משנה את כל הקוד חזרה לקוד המקורי עם קובץ ה-htc של נדרלוף, זה היה עוזר, אז מזל שלא עשיתי את זה…
.
מה שאני בכל זאת לא מבינה זה:
1. איך זה שבכל זאת – בשועל הכל בסדר?
2. איך זה שהבלוק של תת התפריט כן נמצא מעל ה-gif של עצמו, אבל "נדחף" מתחת לכפתור התפריט שאחריו?
זה עדיין מוזר בעיני.
ולשאלתי השניה: כאשר אני שמה URL במקום צבע אחד, אני מקבלת הודעות שגיאה. כנראה שיש לי בעייה עם הסינטקס, אני לא שמה את הגרשים במקום הנכון. איפה בדיוק הם צריכים להיות?
,
this.style.background=url(factoring1_h.gif
מיכל
ככה:
obj.style.background="url(image.gif)";
אני לא רואה איפה יישמת את מה שהצעתי. תגיעי למצב שאין לך שם בכלל תגי תמונות בתפריט הראשי. אפילו תגדירי את הרקע ל-LI עצמו.
טוב, אני מצטערת
אבל אני כנראה ממש ממש לא הבנתי למה התכוונת.
ניסיתי להגדיר את התמונות כרקע של ה-LI. אבל זה גם לא עוזר.
אם את מבטלת את
כל ההחלפת תמונה ב-mouseover – זה מסתדר?