לוגו אתר Fresh          
 
 
  אפשרות תפריט  ראשי     אפשרות תפריט  צ'אט     אפשרות תפריט  מבזקים     אפשרות תפריט  צור קשר     חץ שמאלה ‎print ‎"Hello World!"; if‎ ‎not rules.‎know ‎then rules.‎read(); חץ ימינה  

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



  #1  
ישן 15-04-2012, 20:56
צלמית המשתמש של Narxx
  משתמש זכר Narxx Narxx אינו מחובר  
 
חבר מתאריך: 21.12.04
הודעות: 30,021
עזרה עזרה ב CSS. התנהגות לא אחידה בין דפדפני כרום ופיירפוקס בשבירת שורת טקסט עם אלמנט צף.

בניתי דף מסויים שנראה שונה בין דפדפנים. לצורך העניין פיירפוקס וכרום.
מצ"ב הדף להודעה זו.

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

תבורכו וזה... :-)

https://2012-uploaded.fresh.co.il/20...5/49213839.html
_____________________________________
בברכה, מתן.
www.MatanNarkiss.com

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #13  
ישן 16-04-2012, 22:48
צלמית המשתמש של Narxx
  משתמש זכר Narxx Narxx אינו מחובר  
 
חבר מתאריך: 21.12.04
הודעות: 30,021
בתגובה להודעה מספר 12 שנכתבה על ידי Senda R שמתחילה ב "תקשיב, אף אחד לא בונה CSS רק..."

זה די נחרץ להגיד שאף אחד לא בונה רק עם ציפה.
אני בונה רק עם ציפה ומשתדל שלא להשתמש ב position בכלל.
למעשה, מלבד דברים מאוד מורכבים (בעיקר בטיפול בתפריטים קופצים
עם אלמנים שצריכים להיות ממוקמים אחד על השני), מעולם לא נזדקקתי
ל position.
מיקום בתחתית מסך אתה צודק, אבל אנחנו לא מדברים על זה. אני אומר
שאם ישנה בעיה שניתן לפתור עם position וגם ע"י שיטה אחרת שלא
כוללת position, אז השיטה השניה תנצח. היא עדיפה. או אם אנסח את
אחרת - אם ניתן להמנע מ position, יש להמנע מ position. שימוש ב position
הוא במקרים מאוד מסויימים.
בכלמ קרה, כפי שנוכחתי להבין, מדובר בדרישה סטנדרטית וכנראה שלכרום יש
באג בנושא הזה.
נו ביגי.
_____________________________________
בברכה, מתן.
www.MatanNarkiss.com

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #14  
ישן 16-04-2012, 12:08
  roei_om roei_om אינו מחובר  
 
חבר מתאריך: 22.10.06
הודעות: 169
שלח הודעה דרך ICQ אל roei_om
בתגובה להודעה מספר 1 שנכתבה על ידי Narxx שמתחילה ב "עזרה ב CSS. התנהגות לא אחידה בין דפדפני כרום ופיירפוקס בשבירת שורת טקסט עם אלמנט צף."

שלום לך פותח האשכול!
מצאתי את הדוגמה הזו..

http://css.maxdesign.com.au/floatut...roduction07.htm

ערכתי אותה קצת..
הנה ה html

קוד:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>"float: right" element with content flowing down left edge</title> <link rel="stylesheet" type="text/css" href="./css.css" /> </head> <body> <div class="containingbox"> <div class="floatright"></div> <div class="floatright2">sdfsdf</div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> </body> </html>


וזה ה css
קוד:
body { margin: 20px; padding: 0; font: normal 85% arial, helvetica, sans-serif; color: #000; background-color: #fff; } .containingbox { text-align: justify; width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; } .floatright { float: right; width: 100px; height: 100px; background-color: #facaba; clear: both; margin-left: 15px; margin-bottom: 6px; } .floatright2 { float: right; width: 250px; height: 300px; background-color: #febcda; clear: both; margin: 10px 0 6px 15px; }


תמשיך לשחק עם זה עד שתגיע לתוצאה שאתה רוצה
מקווה שעזרתי..
_____________________________________
"כמים הפנים לפנים כך לב האדם לאדם"

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #16  
ישן 16-04-2012, 15:47
  fadey fadey אינו מחובר  
 
חבר מתאריך: 15.07.02
הודעות: 1,027
בתגובה להודעה מספר 15 שנכתבה על ידי Narxx שמתחילה ב "תודה! אני אבדוק את זה ואעדכן..."

יש תחושה שאתה לא ממש מנסה את מה שהוסבר לך,
אם אתה לא מכיר את inspect element שקיים בכרום (שמאפשר לך לשנות את ה css בצורה חיה וכך לראות את התוצאות), אז כדאי שתכיר כי זה נורא מקל במציאת פתרונות בדיוק עבור בעיות כמו שלך.

בכל מקרה, פשוט הוספתי padding-left לside אצלך ונראה כאילו זה מסתדר יפה יותר.
אני אמנם לא כ"כ הצלחתי להבין מה אתה בדיוק מנסה להשיג, אבל אני יכול להבטיח לך שניתן להגיע כמעט לכל תוצאה רצויה ללא איבוד הדעת.. ואני אומר את זה מתוך נסיון.

קח זאת לתשומת ליבך, ותבדוק שוב את העניינים עם ה css reset, לא כולם ממש טובים, יותר מאוחר אציג כאן את מה שאני משתמש איתו, אולי זה יהיה לך לעזר.
_____________________________________
ציטוט:
Different people use different tools, but its mostly morons who pretend that the problems with PHP actually matter.

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #17  
ישן 16-04-2012, 16:14
צלמית המשתמש של Narxx
  משתמש זכר Narxx Narxx אינו מחובר  
 
חבר מתאריך: 21.12.04
הודעות: 30,021
בתגובה להודעה מספר 16 שנכתבה על ידי fadey שמתחילה ב "יש תחושה שאתה לא ממש מנסה את..."

למה נראה לך שאני לא ממש מנסה?
אני כרגע בעבודה ואין לי זמן לשחק עם זה. אגיע הביתה ואנסה שוב.

לשחק עם ה element inspector אני יודע, ואני גם רמזתי שיש לשחק עם הגדלים של
ה margin-top כדי לראות בלייב את הבעיה.

את ה css-reset שלי לקחתי מ mivzakim.net. מישהו שהגיב באשכול הזה רמז לי שהוא טוב, וזה
מה שהוא כותב באתרים שלו... אם זה טוב לו - זה טוב לי. אם בכל זאת אתה מתעקש שהבעיה היא
באתחול הפרמטרים של הדפדפן, אשמח לנסות את ה css-reset שלך.

אגב, זה משהו שאתה יכול לנסות בעצמך עם ה element inspector בלייב, מבלי להגיד לי לנסות
בעצמי.

מה שאני מנסה להשיג הוא שהטקסט לא יעלה על האיזור של הריבוע הצבעוני. ברגע שטקסט גולש
על איזור הריבוע, הוא אמור להשבר לשורה חדשה. בפיירפוקס זה עובד טוב - בכרום לא.
שנה את ה margin-top של האלמנט p (ב style) לערך 19-20 פיקסלים ותראה על מה אני מדבר.
הוספת padding-left לא עוזר. הטקסט מתעלם ממנו וממשיך 'לעלות על' הריבוע הצבעוני.
תמונה שהועלתה על ידי גולש באתר ולכן אין אנו יכולים לדעת מה היא מכילה
_____________________________________
בברכה, מתן.
www.MatanNarkiss.com

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #23  
ישן 16-04-2012, 21:08
  fadey fadey אינו מחובר  
 
חבר מתאריך: 15.07.02
הודעות: 1,027
בתגובה להודעה מספר 22 שנכתבה על ידי Narxx שמתחילה ב "אצלי לא, וזה מחסל לי את ה..."

לאחר בירור קליל, מצאתי שזו "בעיה" נפוצה בכרום שכן יש עניין עם הצפות של אלמנטים עם רוחב שונה.
כידוע כאשר מציפים אלמנט הוא כבר אינו "תופס" רוחב בדף (כאילו ממוקם אבסולוטית), מנוע ה webkit כנראה מתקשה עם העניין הזה כמו שהציג שימי (ראה הודועות מס 2 ו4) ומנוע המוזילה דווקא מתמודד בצורה טובה עם התופעה.

כמו שכבר אמרתי, תמיד ניתן לתקן דברים על מנת שיראו טוב אפילו כאשר המנוע עצמו כושל, והפתרון לדברים כאלה לרוב לא יהיה כללי, אלא פרטני (ואין שום דבר רע בכך). ניתן לדוגמא להגדיר margin קל לקופסא העליונה ובכך "לדחוף" אותן למטה מתחת לטקסט.
ניתן להפוך את סדר הציפה, כלומר להציף דווקא את הטקסט וכך רוחב האלמנטים השונים ישמר.
ויש עוד כמה אופציות יותר כלליות אך הן יותר מעייפות בלשון המעטה, לעניות דעתי יותר מדיי התעסקות בתפל.
_____________________________________
ציטוט:
Different people use different tools, but its mostly morons who pretend that the problems with PHP actually matter.

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #25  
ישן 16-04-2012, 22:38
  fadey fadey אינו מחובר  
 
חבר מתאריך: 15.07.02
הודעות: 1,027
בתגובה להודעה מספר 24 שנכתבה על ידי Narxx שמתחילה ב "אני לא יודע איזה טקסט יהיה לי..."

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

בנוסף הסברתי לך שניתן להפוך את סדר הציפות, כך שדווקא הטקסט הוא זה שיצוף..(כמובן שתיאלץ להדפיס את הפסקאות קודם לתמונות)

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

אתה גם לא חייב להשתמש בציפה בכלל.. אם בכוונתך לשים שם תמונה, תוכל להשתמש ב align של התמונה ולקבוע אותו לימין. ראה דוגמא:
http://helpdeskgeek.com/how-to/imag...-wrap-css-html/

אתה בכלל ניסית מה שאמרתי לך? או שאתה סתם מבטל כי זה לא נראה לך?
_____________________________________
ציטוט:
Different people use different tools, but its mostly morons who pretend that the problems with PHP actually matter.


נערך לאחרונה ע"י fadey בתאריך 16-04-2012 בשעה 22:55.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #26  
ישן 16-04-2012, 23:16
צלמית המשתמש של Narxx
  משתמש זכר Narxx Narxx אינו מחובר  
 
חבר מתאריך: 21.12.04
הודעות: 30,021
בתגובה להודעה מספר 25 שנכתבה על ידי fadey שמתחילה ב "אם תעשה מה שכתבתי לך זה לא..."

ניסיתי מה? כתבתי שניסיתי את ה web-kit האק הזה וזה לא עובד.
גם css reset לא עובד, אפילו שאמרת שתביא לי מתישהו אחד טוב (אם כי זה שאני לקחתי
אמור להיות טוב... בכל מקרה, זה לא עוזר).
מה הקשר בין ה margin-top שאני מגדיר בפסקאות, ל margin-top שיקבל כל אלמנט שאינו
פסקה? או שלא הבנתי את הכוונה שלך...
להפוך את סדר הציפות זו אפשרות שאני צריך לבדוק. אני לא בטוח שזה יעבוד אבל אפשרי לבדוק.
מבלי להכנס לקוד, אני צופה בעיתיות בכך שאני לא יודע כמה פסקאות יהיו לי ומה יהיה אורכן.
אני לא יודע אם הפסקאות יהיו ארוכות יותר מהקופסאות בצד או לא. אני לא בטוח שזה יפריע, אבל
זה משהו שצריך לקחת בחשבון.
בלי קשר, גם אם זה ניתן יהיה למימוש, אני עדיין תקוע עם הבעיה שהציפה לא שוברת לי את השורה
בזמן ואז אני יכול להגיע לאותה הבעיה בחזרה.

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

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

בנוגע לדוגמא של רועי, זה לא עבד.
אתה פשוט שינית לי שם מלא דברים שאני לא יודע למה החלטת שמותר לך לשנות - כמו הפונט שאני
משתמש בו, ביטול הפסקאות והמרווחים שבינהם... לקחתי את הקוד שלך, הוספתי לו פסקאות, מרווחים
ביטלתי את הפונט וחזרתי לאותה הנקודה.
קוד:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>"float: right" element with content flowing down left edge</title> <link rel="stylesheet" type="text/css" href="./css.css" /> <style type="text/css"> body { margin: 20px; padding: 0; /*font: normal 85% arial, helvetica, sans-serif;*/ color: #000; background-color: #fff; } .containingbox { text-align: justify; width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; } .floatright { float: right; width: 100px; height: 100px; background-color: #facaba; clear: both; margin-left: 15px; margin-bottom: 6px; } .floatright2 { float: right; width: 250px; height: 300px; background-color: #febcda; clear: both; margin: 10px 0 6px 15px; } p { margin-top: 20px; margin-bottom: 0px; } </style> </head> <body> <div class="containingbox"> <div class="floatright"></div> <div class="floatright2"></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p> <p>euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> </body> </html>
_____________________________________
בברכה, מתן.
www.MatanNarkiss.com

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #29  
ישן 17-04-2012, 00:43
  משתמש זכר dorM dorM אינו מחובר  
מנהל
 
חבר מתאריך: 26.07.08
הודעות: 6,473
בתגובה להודעה מספר 1 שנכתבה על ידי Narxx שמתחילה ב "עזרה ב CSS. התנהגות לא אחידה בין דפדפני כרום ופיירפוקס בשבירת שורת טקסט עם אלמנט צף."

אני לא יודע אם זה בוודאות יפתור את הבעיה (אין לי chrome), אבל עדיף לך לעשות את הדבר הבא:

לפני הקוד הבא:
קוד:
<html>

תוסיף:
קוד:
<!DOCTYPE html>


זה נובע מכך שהגדרת ה-DTD הנ"ל מכניסה את הדפדפן למצב ‎(Almost) Strict Mode‏, שזה המצב בו ה-CSS ו-HTML אמורים להתנהג כמצופה.
במצב Quirks mode, שזה המצב שהדפדפן נמצא בו כעת, לא יהיה אפשר להשתמש לדוגמא בחוק ה-CSS הנדוש הבא:
קוד:
margin:auto; /* element alignment to the center */

הכלל הנ"ל אמור למרכז את האלמנט לאמצע השורה. זה לא אמור לעבוד ב-Quirks mode (רק שתבין כמה משמעותי ההבדל בין המצבים)

כתבתי קצת על הנושא הנ"ל באשכול העוגן: http://www.fresh.co.il/vBulletin/sh...ad.php?t=446612
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
תגובה

כלי אשכול חפש באשכול זה
חפש באשכול זה:

חיפוש מתקדם
מצבי תצוגה דרג אשכול זה
דרג אשכול זה:

מזער את תיבת המידע אפשרויות משלוח הודעות
אתה לא יכול לפתוח אשכולות חדשים
אתה לא יכול להגיב לאשכולות
אתה לא יכול לצרף קבצים
אתה לא יכול לערוך את ההודעות שלך

קוד vB פעיל
קוד [IMG] פעיל
קוד HTML כבוי
מעבר לפורום



כל הזמנים המוצגים בדף זה הם לפי איזור זמן GMT +2. השעה כעת היא 15:54

הדף נוצר ב 0.07 שניות עם 10 שאילתות

הפורום מבוסס על vBulletin, גירסא 3.0.6
כל הזכויות לתוכנת הפורומים שמורות © 2024 - 2000 לחברת Jelsoft Enterprises.
כל הזכויות שמורות ל Fresh.co.il ©

צור קשר | תקנון האתר