הגדלה של div

מצאת אתר שלא נראה טוב ב-Mozilla כי הוא לא תואם לתקן? פרסם כאן. מנסה להתאים את אתרך לעבודה עם מנוע התצוגה Gecko? פרסם וננסה לעזור.
רובוקופ 3000

הגדלה של div

הודעה שלא נקראהעל ידי רובוקופ 3000 » 10 אוקטובר 2012, 17:38

איך אני לגרום ל-div לגדול אוטומטי בהתאם לטקסט שנכנס בו בלי שהוא ידרוס את מה שמתחתיו?
יש לי את הקוד הבא:

קוד: בחר הכל

<div id="div1">
  <div id="divInDiv1">
  </div>
</div>
<div id="div2">
</div>


אני כותב את הטקסט ב-divInDiv1 ואני רוצה שהוא יגדל בהתאם לכמות הטקסט אבל שלא יעלה על div2 או יעלים אותו אלא פשוט ידחוף אותו למטה יחד עם כל התוכן שיש ב-div2.
זה קשור ל-position או למשהו אחר?

תומר
הודעות: 9911
הצטרף: 14 יוני 2002, 01:50
מיקום: חיפה
יצירת קשר:

Re: הגדלה של div

הודעה שלא נקראהעל ידי תומר » 10 אוקטובר 2012, 18:39

div2 מתחיל אחרי div1, ולכן כבררת מחדל ימוקם מתחת לנקודה בה div1 מסתיים.

להלן דוגמה קטנה. שים לב שצבעתי כל div בצבע אחר. השתמשתי בדוגמה ב־contentEditable כדי שתוכל להוסיף דרך הדפדפן שורות לכל אחד מהרכיבים באמצעות הקלדה בדף, כך שתוכל להיווכח שהרכיב div2 (צבע כחול) אכן נדחף כלפי מטה כאשר אתה מוסיף טקסט ל־div1 או לרכיב הפנימי.

קוד: בחר הכל

<!doctype html>
<html>
<head><style>
div {margin: 1ex 5%; border-left: 2px solid black;} div:before { content: "div#" attr(id); background: #eee; }
#div1 {color: red;} #divInDiv1 {color: green;} #div2 {color: blue;}
</style></head>
<body contenteditable="true">
  <div id="div1">
    div1 content
    <div id="divInDiv1">
      divInDiv1 content
    </div>
  </div>
  <div id="div2">
    div2 content
  </div>
</body></html>
נערך לאחרונה על ידי תומר ב 10 אוקטובר 2012, 20:09, נערך פעם 1 בסך הכל.
סיבה: הסרת קוד מיותר; הוספת מזהי רכיבים
מוזילה ישראל בטוויטר: https://twitter.com/MozillaIsrael

רובוקופ 3000

Re: הגדלה של div

הודעה שלא נקראהעל ידי רובוקופ 3000 » 10 אוקטובר 2012, 21:19

אני יכול לבדוק את זה בלי לעשות דף מיוחד של html?
זה אומרת דרך הדפדפן ישר?

תומר
הודעות: 9911
הצטרף: 14 יוני 2002, 01:50
מיקום: חיפה
יצירת קשר:

Re: הגדלה של div

הודעה שלא נקראהעל ידי תומר » 10 אוקטובר 2012, 21:37

רובוקופ 3000 כתב:אני יכול לבדוק את זה בלי לעשות דף מיוחד של html?
זה אומרת דרך הדפדפן ישר?

http://jsfiddle.net/tomer/wczAj/
מוזילה ישראל בטוויטר: https://twitter.com/MozillaIsrael

רובוקופ 3000

Re: הגדלה של div

הודעה שלא נקראהעל ידי רובוקופ 3000 » 11 אוקטובר 2012, 08:44

תודה.
אם אני מעלה עיצוב כלשהו תוכלו להסביר לי איך לכתוב אותו באופן תקין?
זאת תמונה של מה שאני רוצה לעשות:
http://imageshack.us/photo/my-images/87/testgv.jpg/

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

אין צורך בצבעים הם רק בשביל ההסבר

תומר
הודעות: 9911
הצטרף: 14 יוני 2002, 01:50
מיקום: חיפה
יצירת קשר:

Re: הגדלה של div

הודעה שלא נקראהעל ידי תומר » 11 אוקטובר 2012, 13:05

רובוקופ 3000 כתב:אם אני מעלה עיצוב כלשהו תוכלו להסביר לי איך לכתוב אותו באופן תקין?
זאת תמונה של מה שאני רוצה לעשות:
http://imageshack.us/photo/my-images/87/testgv.jpg/


זה מה שאתה רוצה לעשות:

קוד: בחר הכל

#divInDiv1 { float: right; }


עדכנתי את הקישור שבהודעתי הקודמת כך שהוא יציג את הקוד המעודכן.
מוזילה ישראל בטוויטר: https://twitter.com/MozillaIsrael

רובוקופ 3000

Re: הגדלה של div

הודעה שלא נקראהעל ידי רובוקופ 3000 » 11 אוקטובר 2012, 17:43

תודה, לשנות את המיקום של ה-div זה לשנות את ה-float?
וזה יעבוד גם אם יש לי טקסט בגובה של התפריט או יותר ומתחת להכל יש לי תמונות?
אני רוצה שלמשל יהיה 4 תמונות שאחת תהיה מתחת לתפריט והשאר מתחת לטקסט והתמונות יהיה באותו גובה
ואולי גם עוד כמה תמונות שיהיו מתחת ל-4 הראשונות כך שיהיה 4 בשורה ויהיה כמה שורות

תומר
הודעות: 9911
הצטרף: 14 יוני 2002, 01:50
מיקום: חיפה
יצירת קשר:

Re: הגדלה של div

הודעה שלא נקראהעל ידי תומר » 12 אוקטובר 2012, 02:23

תשמע, יהיה קצת קשה להסביר את כל התורה של CSS על גבי הפורום, אבל אני ממליץ לך לפנות למאמרים מקצועיים, כמו שמופיע בקישורים שבהמשך:

http://docs.webplatform.org/wiki/css/tutorials
https://developer.mozilla.org/en-US/docs/CSS
http://www.w3.org/TR/CSS2

בעקרון ישנן שתי דרכים לשנות את מיקומם של רכיבים בדף; באמצעות קביעת המיקום שלהם ובאמצעות הפיכתם לרכיבים צפים. בעוד שקביעת המיקום שלהם יוצרת למעשה שכבה נוספת בדף כך שהרכיבים יסתירו רכיבים אחרים ויהיה צריך לעשות כל מיני תעלולים כדי להתגבר על בעיה זו, רכיבים צפים משנים את המיקום שלהם באופן יחסי למיקום הנוכחי וצפים לקצה השמאלי או הימני של הרכיב שמעליהם, ובאמצעות קביעת ממדי הרכיב הצף (אורך ורוחב) ניתן לקבוע גם כמה רכיבים יכנסו בשורה.
מוזילה ישראל בטוויטר: https://twitter.com/MozillaIsrael


חזור אל “כתיבה לפי התקן”



מי מחובר

משתמשים הגולשים בפורום זה: אין משתמשים רשומים ו־ 2 אורחים