הגוש האופקי התחתון ביותר של פריסת הדף מכונה לעתים קרובות "כותרת תחתונה". בו, כמו בבלוקים אחרים של הדף, אלמנטים עיצוביים ממוקמים, אך בניגוד לאחרים, לעתים קרובות מתעוררות בעיות ספציפיות במיקום הבלוק המסוים הזה. הם קשורים לעובדה שדפדפנים שונים מבינים את הסטנדרטים של שפת CSS בצורה שונה וזה יכול להיות די קשה לגרום לכותרת התחתונה להיות בקצה התחתון של חלון הדפדפן. להלן הקוד לאחד הפתרונות לבעיה זו.
נחוץ
ידע בסיסי ב- CSS ו- HTML
הוראות
שלב 1
בשורה הראשונה בקוד המקור של הדף, מקם הפניה למפרט המעבר XHTML 1.0:
שלב 2
הצב את הגושים העיקריים של מבנה העמוד בתוך גוף המסמך (בין התגים לתגים). הבלוק אליו יוצב התוכן העיקרי חייב להיות מורכב משתי שכבות מקוננות. לדוגמה, תן לחיצוני להיות המזהה OuterDiv, והפנימי - InnerDiv:
כאן יהיה התוכן העיקרי של הדף.
מאחוריהם מקם גוש תחתונה עם מזהה, למשל FooterDiv:
כותרת תחתונה של הדף.
שלב 3
הצב בחלק העליון של קוד ה- HTML (בין התגים ל-) קישור לקובץ חיצוני עם תיאור סגנונות css:
@import "footerStyle.css";
שלב 4
שמור את קוד עמוד המאסטר השלם בקובץ עם סיומת html. זה עשוי להיראות כך:
כותרת תחתונה לחוצה
@import "footerStyle.css";
כאן יהיה התוכן העיקרי של הדף.
כותרת תחתונה של הדף.
שלב 5
צור קובץ גיליון סגנון - קובץ טקסט רגיל שיש לשמור עם סיומת css והשם שציינת בקוד ה- HTML (footerStyle.css). כתוב לקובץ זה את תיאורי הסגנון הבאים לבלוקים המשמשים בדף:
* {שוליים: 0; ריפוד: 0}
html, גוף {גובה: 100%;}
גוף {
מיקום: קרוב משפחה;
צבע: # 222222;
}
#OuterDiv {
שוליים: 0;
גובה דקות: 100%;
רקע: #aaaaaa;
צבע: # 222222;
}
* html #OuterDiv {גובה: 100%;}
#FooterDiv {
מיקום: קרוב משפחה;
תנקה את שניהם;
שוליים למעלה: -60 פיקסלים;
גובה: 60 פיקסלים;
רוחב: 100%;
צבע רקע: כהה כחול;
יישור טקסט: מרכז;
צבע: #eeeeff;
}
. InnerDiv {
רוחב: 100%;
לצוף: שמאלה;
}
