body, html { height : 100% }

גובה של 100 אחוז מוודא שהרקע יגיע לקצה התחתון של ה- viewport גם אם הדף קצר

body { padding : 0px ; background-color : #4E4A45 ; font-family : arial ;background : url(netz2.jpg); background-size : 100% 100%; }

הרקע נמתח

#wrapper { max-width : 992px ; margin : auto ;position : relative }

wrapper מכיל בתוכו את כל הדף. הוא מתמרכז בעזרת margin : auto

#koteret { background-color : rgba(255,255,255,0.7) ; height : 140px ; position : relative ; border-radius : 30px }

koteret היא החלק העליון של המסמך. העיצוב שלה נקבע בעזרת הרקע והשוליים המעוגלות. היא בעלת התכונה position : relative כי היא מכילה את התפריט שהוא בעל התכונה position : absolute ; הרקע הלבן בעל שקיפות של 0.7

#content { display : inline-block ;max-width : 808px ; background-color : white ; padding-bottom : 30px }

content הוא החלק השמאלי של הדף. הוא קיבל רוחב מירבי של 808

#content_wrapper { background:#bfaa7e ; }

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

h1 {margin : 0px ; padding : 0px ; padding-right : 20px ; margin-top : 21px ; margin-bottom : 30px ; font-size : 150% ; color : #4E4A45 ; border-bottom : 1px dotted #4E4A45 ; text-align : right }

חשוב מאד להשתמש ב- h1 בתור הכותרת הראשית של הדף מטעמי נגישות ומטעמי SEO . אנחנו מאפסים את ה padding וה- margin כדי שלא ישתלטו על העיצוב.

#tafrit1 .current { background-color :white ; }
#side .current { font-weight : 700 }

current הוא class שמוענק לאלמנט על ידי פונקציית הז'ווסקריפט mark() ומשמש לחיווי.

#tafrit1{ padding : 0px ; margin : 0px ; position : absolute ; bottom : 0px ; width : 100% ; background: #e1a11b }
#tafrit1> li {position : relative ;display : inline-block ; text-align : center ; list-style : none; border-left : 1px black dotted; height : 35px ; bottom : 0px } #tafrit1 >li> a { text-decoration : none ; color : black ; min-width : 130px ; display : inline-block ;position : relative ; top : 10px }

התפריט עצמו נמצא על קובץ נפרד ומצורף לדף באמצעות document.write(). לא אכנס לפרוט פרט לכמה נקודות : משתמשים בסימון < ( בן ישיר) כדי להבטיח שהתכונות יחולו רק על התפריט העליון ולא על תפריטי המשנה,
משתמשים ב- relative בתגי "a" כדי שאפשר יהיה למקם את הטקסט בצורה מדויקת, משתמשים בתכונה display : inline-block בתגי "a" כדי שניתן יהיה לתת רוחב לאלמנטים בתפריט

#tafrit1 .submenu {position : absolute ; z-index : 1 ; top : 35px ; right : 0px ; display : none ; list-style-type : none; background-color : #e1a11b ; border-right : 1px black dotted; box-shadow: 3px 3px 20px #888888; }
#tafrit1 .submenu li a { display : block ; padding-bottom: 2px ; direction : rtl ; text-align : right ; font-size : 80% ; margin-right : -30px
; text-decoration : none ; color : black ; }
#tafrit1 li:hover .submenu { display : block }

#tafrit1 .submenu עוסק בתפריט המשנה שמתגלה כשעוברים על האלמנטים בתפריט הראשי. תפריט המשנה הוא אבסולוטי דבר שמאפשר למקם אותו ביחס לאבא הרלטיבי שלו <li> בתפריט הראשי. תפריט המשנה הוא במצב סמוי - display : none עד שעוברים על האבא שלו עם העכבר - li:hover

#sidebar { width : 197px ;background-color : #bfaa7e ; display : inline-block ; vertical-align : top }

sidebar הוא החלק הימני של הדף שבו מוקצה מקום לתפריט המשנה

#side li { list-style-type : none; border-bottom : dotted 1px black }
#side li a { display : block ; padding-bottom: 2px ; direction : rtl ; text-align : right ; margin-right : 5px ; text-decoration : none ; color : black ; }

side מגדיר את תכונות התפריט המשני. תפריט זה מוכנס באופן דינמי לדף לאחר הטעינה ולכן אינו מופיע בדף

current הוא class שמוענק לאלמנט על ידי פונקציית הז'ווסקריפט mark() ומשמש לחיוו.

#footer { background-color : #e1a11b ; height : 20px }
#text1 { width : 730px ; font-size : 130% ; direction : rtl ; margin-left : 30px ; margin-right : 30px }
#texte { width : 730px ; font-size : 130% ; margin-left : 30px ; ; }
.texte { font-family : arial ; direction : ltr ; font-size : 150% }
.heb { font-family : arial ; direction : rtl ; font-size : 100% ;margin : 10px ; border : 1px solid black }