"כותרת תחתונה" היא בדרך כלל החסימה התחתונה ביותר של פריסת דף אינטרנט. הקושי השכיח ביותר במיקום כותרת תחתונה זו הוא לגרום למיקום זה תמיד בתחתית החלון, ללא קשר למלא הדף או סוג הדפדפן. היו לא מעט פתרונות לבעיה מאז המעבר המסיבי לחסימת פריסה, ואחד מהם מובא להלן.
זה הכרחי
ידע בסיסי ב- CSS ו- HTML
הוראות
שלב 1
בואו ניקח את ערכת פריסת העמודים הנפוצה ביותר כבסיס - שלושה בלוקים הממוקמים זה מעל זה. החלק העליון (הכותרת) תמיד צריך להיות מיושר לגבול העליון של החלון, התחתון (כותרת התחתונה) - לגבול התחתון, והראש (גוף) צריך תמיד למלא את כל הרווח ביניהם. קוד המקור חייב להכיל קישור למפרט המעבר XHTML 1.0, ואת תיאור הסגנונות יש למקם בקובץ CSS חיצוני (כדי למנוע בעיות באופרה 9. XX). יש למקם את תיאור ה- HTML של המבנה גוף העמוד. זה יתחיל, כמובן, מהגוש העליון, שבתג שלו יש להציב תכונת מזהה עם ערך, למשל, divHead:
כותרת חסומה.
הבלוק הראשי צריך להיות מורכב מצמד בלוקים מקוננים. החיצוני יקבל את המזהה divOut, ואת זה הפנימי - divContent:
תוכן עיקרי.
כותרת התחתונה מוגדרת כ- divFoot:
כותרת תחתונה של הדף.
שלב 2
קוד ה- HTML המלא של הדף צריך להיראות כך:
שלושה בלוקים
@import "style.css";
זהו גוש כותרת עליונה.
תוכן עיקרי.
זהו כותרת התחתונה של הדף.
שלב 3
תיאור הסגנון מיישם את מנגנון הפריסה הבא: הבלוק האמצעי (divOut) מוגדר ל- 100% גובה, הבלוק העליון (divHead) יקבל מיקום מוחלט, והתחתון - יחסי. בבלוק התוכן הראשי (divContent), חייב להיות מקום פנוי בחלק העליון השווה לגובה בלוק הכותרת, כך שהוא לא חופף את התוכן העיקרי של הדף. ולגוש התחתון (כותרת התחתונה) צריך להיות שוליים שליליים בחלקו העליון, השווה לגובה הבלוק הזה. זה יעלה אותו מעל הגבול התחתון של חלון הדפדפן. ניתן ליישם מנגנון זה באמצעות קובץ css עם התוכן הבא: * {margin: 0; ריפוד: 0}
html, גוף {גובה: 100%;} גוף {
מיקום: קרוב משפחה;
צבע: # 000;
}
#divOut {
שוליים: 0;
גובה דקות: 100%;
רקע: #FFF;
צבע: # 000;
}
* html #divOut {גובה: 100%;}
# divHead {
עמדה: מוחלט;
משמאל: 0;
למעלה: 0;
רוחב: 100%;
גובה: 80 פיקסלים;
רקע: # 2F5000;
הצפה: מוסתרת;
יישור טקסט: מרכז;
צבע: #FFF;
} # divFoot {
מיקום: קרוב משפחה;
תנקה את שניהם;
שוליים למעלה: -60 פיקסלים;
גובה: 60 פיקסלים;
רוחב: 100%;
צבע רקע: # 2F5000;
יישור טקסט: מרכז;
צבע: #FFF;
}
.divContent {
רוחב: 100%;
לצוף: שמאלה;
ריפוד עליון: 81 פיקסלים;
} השם שציינת עבור גיליון הסגנונות בקוד ה- HTML הוא style.css.
