מילוי טופס pdf באתר שלי אונליין - איך אפשר?

[ששא]

@dovid אני אכן צריך שיהיה ממש 'צורת הדף' - שהמשתמש יקבל ממש את הטופס עם הרקע ועם השדות מעל כל שדה בוורד רק יוכל למלאות אונליין

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

השאלה איך אפשר לבנות מאפס קובץ html שהרקע יהיה תמונות ומעליהם יהיו שדות קלט במיקומים מסויימים?
בעצם מה שאני צריך עכשיו זה פשוט לקחת שדה שדה ולמקם אותו בפיקסלים בדיוק במקום שלו, יש איזשהוא דרך לעשות את זה באופן יותר אוטומטי/קל או שצריך לעבור אחד אחד?
התחלתי קצת ליצור אלמנטים ולהזיז אותם בכרום עם המאפיינים top: 272px;right: 287px;width: 200px; אבל איך אני יודע לעצב את הדף בכרום בדיוק בגודל כך שכשהמשתמש יכנס אח"כ יקבל את כל השדות במקום הנכון?

מקווה שהובנתי...

[חגי]

@ששא כתב במילוי טופס pdf באתר שלי אונליין - איך אפשר?:

השאלה איך אפשר לבנות מאפס קובץ html שהרקע יהיה תמונות ומעליהם יהיו שדות קלט במיקומים מסויימים?

זה בדיוק מה שהבאתי מקודם, מה מבולגן בזה?

[ששא]

@חגי כתב במילוי טופס pdf באתר שלי אונליין - איך אפשר?:

מה מבולגן בזה?

כי במקום לעשות צילום מסך מכל הטופס ולהביא את הכל כתמונת רקע הוא עשה תמונה רק מהרקע ואת הטקסטים הוא עשה כל מילה כdiv בפני עצמו...
אתה יכול לתאר כמה div'ים יש בגלל זה במקום שהכל יהיה בתמונת רקע עצמה

אני רציתי לעשות תמונות רקע מכל דף כולל המלל כמו זה למשל

ואז נצטרך רק להוסיף imput'ים על כל שדה

[חגי]

@ששא כתב במילוי טופס pdf באתר שלי אונליין - איך אפשר?:

אתה יכול לתאר כמה div'ים יש בגלל זה במקום שהכל יהיה בתמונת רקע עצמה

מה רע בזה?

@ששא כתב במילוי טופס pdf באתר שלי אונליין - איך אפשר?:

ואז נצטרך רק להוסיף imput'ים על כל שדה

למה לא באמת לעשות ככה? תמיר לתמונה, ותגדיר את הגודל של התמונה בצורה מוחלטת עם CSS, ותיצור inputים עם מיקומים אבסולוטיים עם CSS.

[ששא]

@חגי כתב במילוי טופס pdf באתר שלי אונליין - איך אפשר?:

למה לא באמת לעשות ככה? תמיר לתמונה, ותגדיר את הגודל של התמונה בצורה מוחלטת עם CSS, ותיצור inputים עם מיקומים אבסולוטיים עם CSS.

@ששא כתב במילוי טופס pdf באתר שלי אונליין - איך אפשר?:

התחלתי קצת ליצור אלמנטים ולהזיז אותם בכרום עם המאפיינים top: 272px;right: 287px;width: 200px; אבל איך אני יודע לעצב את הדף בכרום בדיוק בגודל כך שכשהמשתמש יכנס אח"כ יקבל את כל השדות במקום הנכון?

מקווה שהובנתי...

[חגי]

@ששא
במקום להשתמש בפיקסלים, להשתמש בviewport
100vh זה 100 אחוז מגובה המסך הנראה
100vw כנ"ל לגבי רוחב.
לאחרונה הוסיפו בCSS עוד המון אמות מידה מוזרות שאולי יעניינו אותך.
https://developer.mozilla.org/en-US/docs/Web/CSS/length

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

[ששא]

@חגי אני חשבתי להשתמש פשוט ב-mm
מה אתה אומר? יש הבדל בין mm ל vh/w?

[צדיק תמים]

@ששא כתב במילוי טופס pdf באתר שלי אונליין - איך אפשר?:

@חגי אני חשבתי להשתמש פשוט ב-mm
מה אתה אומר? יש הבדל בין mm ל vh/w?

הוא הסביר מה ההבדל

[ששא]

@צדיק-תמים כתב במילוי טופס pdf באתר שלי אונליין - איך אפשר?:

הוא הסביר מה ההבדל

הוא אמר בין פיקסלים לבין viewport
איפה דובר על מ"מ?

@חגי כתב במילוי טופס pdf באתר שלי אונליין - איך אפשר?:

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

יש לך דוגמא בשבילי?

סורי אבל אני עם הארץ בCSS...

[צדיק תמים]

@ששא פיקסל/מ"מ זה יחידת מידה קבועה
vh/vw זה באחוזים מהמסך בפועל

[חגי]

@ששא כתב במילוי טופס pdf באתר שלי אונליין - איך אפשר?:

מה אתה אומר? יש הבדל בין mm ל vh/w?

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

VW\VH נשארים יחסיים למסך.