הוסטס - פורום אחסון האתרים הגדול בישראל

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)
-   פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)
-   -   גובה ורוחב של תיבה (https://hosts.co.il/forums/showthread.php?t=98324)

MasterNetwork 03-07-12 06:12

גובה ורוחב של תיבה
 
ניסיתי לשים רקע לתיבת טקסט וזה גורם לי לבעיות אם שאר העיצוב לכן אני שם את הרקע ע"י left ו top
הבעיה שכל דפדפן קורא את הגובה/רוחב שונה גוגל כרום או פיירפוקס או אקספלורר

קוד:

<td width="161" height="27">
                <input type="password" size="1" name="password" style="width:161px;height:27px;background-image:url('images/unlogged_04.gif');position:absolute;left:571;top:15;border:0px none"></td>

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

IgalSt 03-07-12 09:48

קודם כל, אין שום סיבה שבעולם שתעבוד עם טבלאות עבור תוכן שהוא לא טבלאי. וטופס זה בהחלט דוגמה מעולה לתוכן שאיננו טבלאי. זה מאוד מאוד לא מומלץ ונחשב ל-bad practice בקרב ה-FEDs.

כמו כן, מקיראת השאלה והקוד, לדעתי אתה מתבלבל במהות של position:absolute ומה תפקידו. שים לב שהוא ממקם את האלמנט עצמו ביחס לאלמנט הרלטיבי או האבסולוטי הקרוב ביותר אחד האבות שלו בעץ ה-DOM.

ולסיום, כדי לפתור את העיה שלך, ייתכן ותרצה להוסיף את פקודת ה-CSS הבאה:
box-sizing: border-box
מה שהפקודה הזאת עושה, היא בעצם מיישרת קו באופן בו הדפדפן מתייחס להגדרות הרוחב והגובה (כידוע IE מחשב זאת שונה משאר הדפדפנים, בעקבות מה שמכונה box module bug).
http://upload.wikimedia.org/wikipedi...box_models.svg


כמו כן, ייתכן ותרצה גם להשתמש בתכונת ה- appearance: none של css על מנת לבטל את העיצוב הדיפולטי שהדפדפן נותן לאלמנט.


שים לב ששתי התכונות הללו שייכות לטיוטת css3 ולכן יש להשתמש בהן יחד עם ה-vendor prefix.

MasterNetwork 03-07-12 11:53

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


עריכה: אתה מדהים!!!!!!!!!
רק האקספלורר עדיין בעייתי, חפיף במילא אף אחד לא משתמש בו :)

IgalSt 03-07-12 15:30

ציטוט:

נכתב במקור על ידי MasterNetwork (פרסם 849731)
אני משתמש בזה ככה ביגלל שאני חותך את העיצוב שהכנתי בפוטושופ הוא מביא לי את זה מוכן בטבלאות אני פשוט מעביר את זה במקום תמונה אני הופך אותה לרקע הטבלה באותו הגודל והאורך.
תכף אני אנסה מה שאתה אומר מקווה לבשורות טובות תודה :) אני יעדכן!


עריכה: אתה מדהים!!!!!!!!!
רק האקספלורר עדיין בעייתי, חפיף במילא אף אחד לא משתמש בו :)

ראשית, כדי לתמול באקספלורר נסה להוסיף גם padding:0 וגם margin:0, בנוסף ל-border:0 שכבר מוגדר לך.

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


כל הזמנים הם GMT +2. הזמן כעת הוא 19:48.

מופעל באמצעות VBulletin גרסה 3.8.6
כל הזכויות שמורות ©
כל הזכויות שמורות לסולל יבוא ורשתות (1997) בע"מ