סידור הדף עםCSS

מה שדרוש לנו זה ידע בסיסי בHTML ובCSS, כתבן או כמובן עורך HTML כמו DREAMWEAVER.
אנחנו נעבוד בתוך תיקיה שבה תהיה תיקיית התמונות שלנו (IMAGES) ועוד כמה קבצים: קובץ CSS (אני קראתי לו: STYLE.CSS) וקבצי HTML.
בשלב הראשון נעבוד על דף הבית
(INDEX.HTML). כמו שאמרו לנו האנשים החמודים מ css-g.info ישנה דרך קלה למקם אתר שלם באמצע הדפדפן: כל מה שצריך זה DIV אחד ראשי (הם קראו לו ALL) שלתוכו נכנסים שאר הדיווים וההגדרות שלו הן כך:

#all {
margin-right:auto;
margin-left:auto;
width:800px;
border:0px; }

הרעיון הו שהWIDTH אומר מה יהיה רוחב האתר מעכשיו והלאה ואילו הmargin-auto אומר שמשני הצדדים כמה שטח שיישאר תמיד יהיה שווה מימין ומשמאל. זוהי דרך נפלאה לעמד אתר שלם – כל מה שצריך זה שהDIV שבראש המסמך יהיה עם ID שבדף הCSS יש לו נתונים כאלה והסגירה שלו-/DIV באה בסוף הסמך, ממש לפני הסגירה של BODY. פה אנחנו משתמשים באותו רעיון רק עם כתיבה מקוצרת ולDIV קראנו container:

#container {
width:800px;
margin: 0 auto;
}

מה שעוד שונה כאן זה שלbody נתנו עוד כמה ערכים כדי שייבצר לנו רקע שמשתכפל על ציר ה-X:

body { font-size: 12;
font-family: Arial, Helvetica, sans-serif;
background: url(images/body-bg.gif) repeat-x top #E0CBAE;
direction:rtl;
text-align:right;

}
הבדל גדול נוסף בעיצוב שלנו זה שהDIV שנקרא container נגמר אצלנו לא בסוף המסמך אלא לפני הDIV שנקרא FOOTER כך שגם למטה הפס הצבעוני ימשיך לכל רוחב הדף.
בין פתיחת תגית הdiv שנקרא container לבין סגירתו יש לנו עוד ארבעה דיווים שיוצרים את שלושת העמודות:

main-content
quick-jumps
right-col
left-col

הראשון מחזיק בתוכו את שלושת העמודות וההגדרות נוצרות מחישוב הרוחב כך שיגיע ל-800 פיקסלים בסך הכול.
אנחנו משתמשים בהגדרה FLOAT כדי להגדיר לדיו איפה הו יתמקם יחסית לדיו הבא או במקרה הזה העמודה הבאה.
אם רוצים שדיו מסוים ימתח לכל האורך ולא יהיה לצדו דבר אפשר לתת את ההגדרה:
clear: both;
בדף הCSS שלנו ישנן הגדרות שמתייחסות לכמה דיווים, לכן כדי לחסוך בכתיבה הכנסנו בחלק מהמקרים כמה תגיות ביחד לפני הגדרה, כמו כאן:

div#main-content div#right-col div#quick-jumps p

עוד דבר שכדאי לחשוב עליו זה לתת הגרות של PADDING בתוך התגית P וזה כדי שלא להכניס את הרווחים האלה בתוך הדיווים שמשמשים לעימוד, הגדרות ריווח בתוך הגדרות העימוד יכולות ליצור מצב של עמודות שנמתחות מעבר לגודל שלהן וכך ייוצר בלאגן בעימוד.
החלק אם כן של העימוד בדף הCSS צריך להראות כך:

* {
margin: 0;
padding: 0;
}
body {
font-size: 12;
font-family: Arial, Helvetica, sans-serif;
background: url(images/body-bg.gif) repeat-x top #E0CBAE;
direction:rtl;
text-align:right;
}
.clear { clear: both; }
#container {
width:800px;
margin: 0 auto;
}
div#main-content {
padding-bottom: 50px;
}
div#main-content div#right-col {
float: right;
width: 510px;
}
div#main-content div#right-col div#quick-jumps {
width: 200px;
float: right;
margin-left: 15px;
background: url(images/remote.jpg) bottom center no-repeat;
padding-bottom: 110px;
}
div#main-content div#right-col div#quick-jumps p {
font-weight: bold;
letter-spacing: 1px;
}
div#main-content div#right-col div#quick-jumps p span {
color: #e9bc3d;
}
div#main-content div#right-col div#quick-jumps a {
color: black;
}
div#main-content div#left-col {
float: left;
width: 260px;
border-top: 8px solid #540000;
padding-top: 15px;
}
div#main-content div#left-col p {
font-size: 1.1em;
}
div#footer {
background: #6a3500;
color: white;
padding: 10px 0 10px 0;
border-top: 2px solid red;
text-align: center; }

מה הסיפור עם הבאנר העליון פה?

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

את התמונה העליונה נכניס בכלל לתוך תגית UL כלומר לרשימה שתקבל ID שאנחנו נקרא לו NAV.
זה יופיע בדף הCSS כך:

ul#nav {
height: 236px;
background: url(images/header-bg.jpg) no-repeat;
list-style: none;
padding-left: 60px;
}

עוד על החלק העליון בדף התפריט