איך אני שם תמונת רקע שתתאים לכל המסכים ?

[avi123]

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

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

תודה מראש

 

[tapnack]

לגבי שאלה 1 - צריך פשוט לקחת חלק מהרקע ולהגדיר אותו בחלק שמתמתח לפי הצורך. זה נעשה בתגית BODY או עפ"י CSS
כפתורים מועוגלים זה כבר סיפור טיפה מורכב, להלן לינק לכמה רעיונות: http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

 

[יריב]

אבי
אתה יכול לשים רוחב 100%
רק תדאג שאתה בתוך אלמנט שלוקח 100% רוחב

 

[יריב]

לגביי הכפתורים תגדיר 10% ואל תגדיר לעולם רוחב וגובה
תן לבראוזר של הגולש לעשות את שלו - תגדיר רק רוחב.

 

[avi123]

תודה על התשובות הפלאות, רק עוד קצת הסבר אם אפשר בבקשה

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

ב. מה ז"א שאתה בתוך אלמנט של 100% ?

ג. איפה אני מגדיר בכפתורים 10% הלא לפי הידוע לי זה או באורך או בגובה, האם כוונתך למקום שלישי ?

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

 

[יריב]

אבי, תקבל החלטה,

או שאתה הולך ללמוד את התחום 4 שנים ואז בא לעבוד אצלי,
או שאתה פשוט מצטרף למועדון הלקוחות שלנו.

תאמין שהתשובות שקיבלת מסבירות את עצמן והשאר בניסוי וטעייה - פשוט אין דרך אחרת.

 

[מיכל וובר]

אבי באיזה תוכנה אתה בונה את האתר?

 

[תמנתי ווב דיזיין]

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

 

[יריב]

אבי,
תדגים לי בדיוק מה אתה עושה ומה אתה רוצה שיקרה ואני יראה לך איפה הבעייה.
למעשה זה מאד פשוט,
כאשר את מוסיף אובייקט אתה יכול לתת לו את הפרמטר width=100% והוא יתרחב לגודל מקסימלי במרחב,
לדוגמא בתוך body אם תשים img ברוחב 100% התמונה תהיה על כל רוחב המסך
אבל שים לב שבשינוי גודל המסך תמיד התמונה תתאים את עצמה ל-100% וזה לא נראה כ"כ טוב.
צריך לקבע אותה - זאת עושים בעזרת javascript.
אם יש עניין זה יהיה שיעור מס' 2

 

[avi123]

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

תודה רבה

 

[יריב]

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

קבל :
אני חייב להוריד סימני HTML בגלל שהאתר מנסה להציג את זה....
body
table width="100%" border="1"
tr
td img src="resstreka.gif" alt="" width="100%" /td
/tr
/table
/body

לגביי הבעייה השניה שמת 5 תמונות ברוחב 40% מהמסך - מה רצית לקבל?
קיבלת טבלה ברוחב 200% מסך.

יום טוב,
יריב.

 

[avi123]

תודה על התשובה. אבל כאן צצה בעיה חדשה, והיא:

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

בקשר לכפתורים: שיניתי כל כפתור ל10% ועדיין הדף באותו גודל ענקי. ז"א שהגודל זה לא מהאחוזים שהגדרתי.

אודה לכם על התשובות.

 

[יריב]

שיעור מס' 2...

כאשר רוצים להכניס תמונה היא מקבלת את המקום בדיוק כמו טקסט ולכן טקסט שנוסף יהיה אחרי התמונה!
אם התמונה היא תמונת רקע לטקסט או לדף אזיי יש להשתמש באלמנט אחר ולהגדיר לו רקע תמונה לדוגמא:
שורת הקוד הבאה :div style="width:300px;height:300px;background:url('http://www.prog.co.il/images/styles/prog/misc/new_logo.gif') top center no-repeat;border:1px solid red" כאן אפשר לכתוב טקסט שיהיה בתוך הקוביה שלנו /div

<div style="width:300px;height:300px;background:url('http://www.prog.co.il/images/styles/prog/misc/new_logo.gif') top center no-repeat;border:1px solid red">כאן אפשר לכתוב טקסט שיהיה בתוך הקוביה שלנו</div>



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