שלום, אני מנסה לייצר את הדף הבא:


מה שעשיתי היה לתת לתמונה גודל בפיקסלים ואת שתי המשולשים מצידי התמונה למטה הגדרתי עם margin-top שלילי כדי שיצמדו לתמונה
הבעיה היא ברזולציות נמוכות זה מתעוות, לדוגמא:


לא יודע מה קורה ברזולציות יותר גדולות מ 1366/768
מה אפשר לעשות לפתור את הבעיה?

קישור לדף הקוד: http://www.dmworld24.com/profile.php?act=show&id=1

לא יודע למה שהעליתי לשרת עכשיו המשולשים לא צמודים

חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

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

ראה דוגמאות כאן: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

נמאס לכם לזכור סיסמאות? לחצו כאן!

כשאתה בונה את העמוד, תשתדל שכל האלמנטים שאתה רוצה שיהיו קרובים אחד לשני יהיו קרובים/קשורים גם מבחינת הDOM.

לא צריך להתחיל למקם דברים בצורה כללית על הדף.

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

הייתי נותן לדיב position:relative,

ולמשולשים הייתי מגדיר -

קוד:

position: absolute;
bottom: 0;
left: -34px; /* for left side */
או
right: -34px; /* for right side */

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

** בגלל שלא נגדיר overflow: hidden בשום שלב, התמונות של המשולשים עדיין יופיעו למרות שכביכול הם יהיו מחוץ לדיב. **

http://www.dmworld24.com/profile.php?act=show&id=1
אם תוכל להסתכל בבקשה בקוד מקור תוכל לראות שעשיתי כמו שאמרת או לפחות כמו שהבנתי אותך, אבל המשולשים נעלמו, הם נמצאים בצדדים משום מה אני צריך לתת left ו right חיוביים בשביל שהם יופיעו ואין לי מושג למה זה ככה

עריכה:
הבעיה הייתה שלא כתבתי position נכון בדיב, בכל מקרה עכשיו הם מתחת לתמונה וגם את זה אני לא מבין למה

עריכה 2: רק עכשיו ראיתי שכתבת גם bottom , עכשיו עובד, תיכף אני אשאל עוד שאלה אבל בנושא הזה כי זה עדיין לא מושלם

חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

טוב כפי שאפשר לראות בתמונה הבאה:

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

חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

לא הבנתי מה שאתה מתאר.

מה עלה למעלה? מה התרחב?

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

תסתכל על המשולשים ותראה שהם עולים על הרקע והתמונה התקצרה וכל הבלוק הימני ירד למטה.

אני חושב שזה בגלל הגודל של הטסט ברזולוציה קטנה הוא גדל ולכן הבלוק גדול איתו

חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

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

הגודל של התמונה לא משתנה.

אני עדיין לא מבין מה השאלה שלך.

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

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

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

אז אני מבין ממך שאין ברירה אלא להקטין את גודל הטקסט ברזולציות קטנות כן?

חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

תוריד דוגמא של css media עם תמיכה בהכל ותראה איפה הטעות בכתיבה שלך., כשבלי לשלוט ב css media באופן מלא, תהיה לך בעיה לבנות אתרים שמתאימים לכל.

will you marry me nesli barda? Operating system: Linux The day Microsoft & apple makes a product that does not suck will be the day they start making vacuum cleaners. say no to Apple&Facebook&MS&Samsung IL&Nokia&Hot&Yes,but say yes to Google

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

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

סבבה, עשיתי עם media תודה לכולם

רק עוד שאלה, רזולציות של לפטופ זה רזולציות שיש במחשב רגיל? כאילו מה שאפשר לשנות

חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

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

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

בהצלחה

will you marry me nesli barda? Operating system: Linux The day Microsoft & apple makes a product that does not suck will be the day they start making vacuum cleaners. say no to Apple&Facebook&MS&Samsung IL&Nokia&Hot&Yes,but say yes to Google

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

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

יש דוגמאות מוכנות של css media בגוגל, קוד פתוח, תוריד כמה ותקרא הקוד כיצד התוכן מוצג בהתאם לדרישה.

will you marry me nesli barda? Operating system: Linux The day Microsoft & apple makes a product that does not suck will be the day they start making vacuum cleaners. say no to Apple&Facebook&MS&Samsung IL&Nokia&Hot&Yes,but say yes to Google