סידור התוכן עםCSS
הכי מומלץ להתחיל בקובץ הHTML, להסתקל על התוכן שיש ואז להחלית איך לסדר אותו.
כדי לעזור לנו לקבוע איפה נגמר כל גוש טקסט אנחנו יכולים להשתמש בהערות האלה שרואים רק בקוד ולא רואים בדפדפן כדי שיסמנו לנו ריפה נגמר כל קטע:
לDIV הראשון באזור התוכן קראתי main-content הו לא ממש חיוני כי אחריו יש לי עוד שלושיה חלקים אבל לפחות כדי להוסיף pading - ריווח מלמטה אני אשתמש בו ובדף הcss אכתוב:
div#main-content {
padding-bottom: 50px;
}
בשלב הבא אני מוסיף בדף הCSS הגדרה מסוג קלאס:
.clear { clear: both; }
בדף הHTML שלי, אחרי הDIV של התוכן ולפני הDIV של הפותר אני אכניס DIV ריק ואתן לו את הקלאס הזה כדי להיות הטוח שהDIV הבא ימתח לכל האורך.עכשיו, אם הייתי רוצה בתוך אזור התוכן שלי פשות 3 עמודות - מה שקוראים (אל תשאלו אותי למה) הגביע הקדוש. הייתי יכול לכתוב כך בדף הCSS שלי:
right-col div {
width:400px;
padding:0px;
float:right;
}
#quick-jumps{
width:175px;
padding:0px;
float:right;
}
#left-col{
width:225px;
padding:0px;
float:left;
}
ואז הייתי מוסיף ריווחים בתוך התגיות של הטקסט (p, h1, h3...) כמו שהוספתי כאן.
right-col div {
width:34%;
float:left;
}
#quick-jumps{
width:33%;
float:left;
}
#left-col{
width:33%;
}
float:left;
}
בהצלחה.
מה עם החלק התחתון?
לחלק התחתון יצרנו div שגם לו נתנו ID כלומר שם. קראנו לו footer. מה שחשוב בקשר לdiv הזה זה שהו יבוא אחרי שהdiv שנקרא container כבר נסגר.
וזה בגלל שלקונטיינר אמרנו להיות 800 פיקסלים ואילו את הפס שבתוך הפותר אנחנו רוצים להמשיך לכל הרוחב.
שימו לב שבדף הHTML שלכם הdiv שנקרא CONTAINER נסגר ורק אז נפתח הdiv שנקרא FOOTER.
בתוך הdiv נכניס את הקרדיט שלנו ואולי כמה לינקים נוספים.
ובדף הCSS ניתן הגדרות עיצוב לפותר שלנו גך שיהיה לו פס צבע לכל האורך וגם את הפס הדק הזה למעלה(border):
div#footer {
background: #560000;
color: white;
padding: 10px 0 10px 0;
border-top: 2px solid red;
text-align: center;
}