פורומים

גורם לרכיב div למלא את החלל האנכי הנותר? (CSS)

פלויד

פוסטר מקורי
7 באפריל, 2005
מונטרי מקסיקו
  • 27 במרץ, 2006
האם זה אפשרי?
יש לי שני divs. לאחד יש גובה קבוע ואני רוצה שהשני ימלא את החלל האנכי שנותר בחלון. אם אני מגדיר את גובה ה-div האחרון ל-100%, זה יהפוך אותו לאותו גובה כמו החלון, אבל אני רוצה שזה יהיה גובה החלון מינוס גובה ה-div הראשון.

זה הקוד שאני משתמש בו:
קוד: |_+_|
צירפתי גם כמה תמונות שמראות מה אני רוצה לעשות ומה הצלחתי לעשות עד כה. תודה מראש

קבצים מצורפים

  • xa.gif xa.gif'file-meta'> 2.6 KB · צפיות: 10,076
  • xb.gif xb.gif'file-meta'> 3 KB · צפיות: 9,950
נ

NoNameBrand

17 בנובמבר, 2005


הליפקס, קנדה
  • 27 במרץ, 2006
למה לא לקנן את ה-1 בתוך ה-2?

אחרת, אני לא יכול לחשוב על דרך שבה תקבל את מה שאתה רוצה.

סטיפ

13 באוקטובר 2004
בְּרִיטַנִיָה
  • 27 במרץ, 2006
אני חושב שיכול להיות שאתה לא אומר לשכבה השנייה היכן היא צריכה להתחיל, אז בהנחה שהיא מתחילה מלמעלה, ולכן חופפת את השכבה הראשונה.
לְנַסוֹת:




מסמך ללא כותרת










ל






ב


ג




ד


ו







נ.ב. בגדתי בכך שעשיתי את זה ב-DW, הוספתי קצת תוכן לשכבה השנייה ואז התעסקתי עם הקוד - DW אוהב שיש ריפוד בקצוות ולמרות שאתה יכול לציין בדיאלוגים שאתה רוצה שכבה התחל ב-0px מהפינה העליונה, עליך לומר זאת פעמיים, באמצעות תצוגת הקוד. הייתי חייב בכל מקרה.

פלויד

פוסטר מקורי
7 באפריל, 2005
מונטרי מקסיקו
  • 27 במרץ, 2006
NoNameBrand אמר: למה לא לקנן את ה-1 בתוך ה-2?

אחרת, אני לא יכול לחשוב על דרך שבה תקבל את מה שאתה רוצה.

תודה, זה עובד מבחינה ויזואלית, אבל ה-div השני יהיה מיכל עבור הפריסה הזו, אז אני עדיין צריך שיהיו לו את הממדים הנכונים כדי שהתוכן שלו יוכל לרשת אותם.

אז אולי זה פשוט לא אפשרי? אולי אצטרך להשתמש ב-Javascript קטן כדי לגרום לזה לעבוד?

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

פלויד

פוסטר מקורי
7 באפריל, 2005
מונטרי מקסיקו
  • 27 במרץ, 2006
התוכנית הגדולה של הדברים

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

קבצים מצורפים

  • grand_scheme.gif grand_scheme.gif'file-meta'> 40.2 KB · צפיות: 450

סטיפ

13 באוקטובר 2004
בְּרִיטַנִיָה
  • 27 במרץ, 2006
השתמשתי בספארי. העתק והדבק את גוש הקוד לתוך קובץ טקסט - וודא שיש לו את הסיומת html כאשר אתה שומרת אותו. לאחר מכן פשוט גרור את הקובץ החדש לחלון דפדפן פתוח. בדיוק בדקתי את זה עם Firefox וזה בסדר - לפחות אני חושב שזה מה שאתה רוצה.
הקטע שאתה צריך לשחק איתו הוא זה:
#Layer1 {
מיקום: מוחלט;
left:0px;
top:0px;
רוחב: 100%;
גובה:180px;
z-index: 1;
צבע רקע: #99CCFF;
}

גס את הדף שלך על פיסת נייר כדי לקבל את המיקומים הנכונים, וזה ייתן לך את המיקום של הפינה ה-LH העליונה של כל שכבה. גובה שכבה 1 יקבע את מיקום ההתחלה של שכבה 2 - במקרה זה שכבה 2 חייבת להיות אtop:180px;שורת קוד.
אם אתה רוצה את 3 השכבות כפי שאתה מציג בפוסט האחרון שלך, השכבה השמאלית ביותר תהיה:
#Layer1 {
מיקום: מוחלט;
left:0px;
top:0px;
רוחב:200px;
גובה: 100%;
z-index: 1;
צבע רקע: #336699;
}

ושכבת ה-RH העליונה תהיה:
#Layer1 {
מיקום: מוחלט;
left:200px;
top:0px;
רוחב: 100%;
גובה:180px;
z-index: 2;
צבע רקע: #33CCFF;
}

והשכבה השלישית למילוי שאר החלון (בכל מקרה שהוא משתנה) צריכה להיות משהו כמו:
#Layer1 {
מיקום: מוחלט;
left:200px;
top:180px;
רוחב: 100%;
גובה: 100%;
z-index: 3;
צבע רקע: #99CCFF;
}

עדיף לשים קצת תוכן דמה בכל שכבה אם אתה משתמש ב-Dreamweaver, למקרה שהשכבה תתכווץ לכלום בתצוגת עמוד, ומכאן ה-a,b,c וכו' ב-html המקורי שלמעלה.

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

NoNameBrand

17 בנובמבר, 2005
הליפקס, קנדה
  • 27 במרץ, 2006
מה זה חומר ה'שכבות' הזה? האם זה בסגנון של Dreamweaver ל'דברים שבור ממש-טובים'?

הנה מה שהייתי עושה:
קוד:
פו   

אתה מאמין!

14 ביוני 2003
MD / VA / DC
  • 27 במרץ, 2006
דקונספט...

בדוק את FlashObject ובהורדה יש ​​קוד לעשות div מסך מלא.. אולי אפשר להתאים אותו איך שאתה רוצה.

http://blog.deconcept.com/flashobject/

פלויד

פוסטר מקורי
7 באפריל, 2005
מונטרי מקסיקו
  • 28 במרץ, 2006
תודה על כל העזרה חבר'ה, אבל רק עכשיו הבנתי שאת הפריסה המדויקת שאני רוצה אי אפשר להשיג בשילוב של רוחבים/גבהים ואחוזים קבועים. כתבתי אותו מחדש באמצעות אחוזים בלבד ועכשיו זה עובד. אם אתה מעוניין בסימון תודיע לי ואני אפרסם אותו.

סטיפ

13 באוקטובר 2004
בְּרִיטַנִיָה
  • 28 במרץ, 2006
floyde אמר: אם אתה מעוניין בסימון תודיע לי ואני אפרסם אותו.
אני רוצה לראות אם יש לך זמן לפרסם שוב.
NoNameBrand אמר: מה זה חומר ה'שכבות' הזה? האם זה בסגנון של Dreamweaver ל'דברים שבור ממש-טובים'?
ובכן, אני לא יודע לגבי 'הדברים הפורצים', אבל אני מניח שהבנת שאני לא בויף של CSS - שכבות הן שם נוח שניתן על ידי DW לדברים שלדעתי צריכים להיקרא 'אלמנטים ממוקמים CSS' - ו אני חושב שהם קוראים להם כך כדי לגרום לאנשים כמוני מרקע DTP / Photoshop להרגיש קצת יותר בנוח. כשמסתכלים על הקוד שכללתם בפוסט שלכם NoNameBrand הוא הרבה יותר אלגנטי משלי - אני אצטרך להסתכל באמת על תגית ה-div. תודה על ה-OP והתשובות. נ

NoNameBrand

17 בנובמבר, 2005
הליפקס, קנדה
  • 28 במרץ, 2006
stevep אמר: ובכן, אני לא יודע לגבי 'הדברים הפורצים' אבל אני מניח שהבנת שאני לא בויף של CSS - שכבות הן שם נוח שניתן על ידי DW לדברים שלדעתי צריכים להיקרא 'אלמנטים ממוקמים CSS '

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

אני אצטרך לדקור באמת להקיף את הראש שלי סביב תג ה-div.

A הוא רק בלוק שרירותי - זה לא אומר שום דבר מבחינה סמנטית, כמו א

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

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

פלויד

פוסטר מקורי
7 באפריל, 2005
מונטרי מקסיקו
  • 28 במרץ, 2006
stevep אמר: אני רוצה לראות אם יש לך זמן לפרסם שוב.
הנה זה, יש שם קצת ספרדית, אני מקווה שזה לא מבלבל מדי:

קוד:
Grand Scheme html { גובה: 100%; } body { margin: 0; ריפוד: 0; גובה: 100%; רוחב: 100%; } #left, #right { float: left; } #left { height:100%; צבע רקע: כתום; רוחב: 10%; } #right { גובה: 100%; עמדה:קרוב משפחה; רוחב: 90%; } #top { רקע-צבע: כחול; גובה: 10%; } #fotos { מיקום: יחסית; גובה: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { גובה: 50%; רוחב: 50%; הצפה: אוטומטי; מיקום: מוחלט; } #foto_sup_izq, #foto_sup_der { top: 0; } #foto_sup_der, #foto_inf_der { שמאל: 50%; } #foto_inf_izq, #foto_inf_der { למעלה: 50%; } img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg 

קבצים מצורפים

  • img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg'file-meta'> 36.3 KB · צפיות: 405