סידור התפריט עםCSS

תפריטים זה משהו שמסתדר מצוין ברגע שאנחנו מוותרים על הסידור שלהם עם טבלה. פתאום אנחנו מגלים שזה ממש קל ליצור תפריטים מגניבים עם או בלי תמונות רקע, מתמונה או מטקסט. כדי ליצור תפריט ללא טבלה אני ישתמש ברשימה (UL). אני אכתוב במסמך הHTML שלי:

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

ul#nav li a {

כלומר מכאן אני הולך לתת הגדרות לul - רשימה, שהID שלה זה - NAV והי - a - כלומר קישור.
אני אבקש מהרשימה שלי להיות מסוג "בלוק" וכך אוכל להוסיף רוחב לכל פריט.

אני אכניס גם את ההגדרה FLOAT שתגיד לרשימה להסתדר אופקית ואת צבעי הטקסט והקישוטים (אין קו תחתי).
בסופו של דבר הגדרות העיצוב של הרשימה הזו יהיו כך:

ul#nav li a {
display: block;
width: 113px;
float: left;
margin-top: 168px;
color: white;
padding-top: 2px;
font-weight: bold;
text-decoration: none;
}

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

ul#nav {
height: 236px;
background: url(images/header-bg.jpg) no-repeat;
list-style: none;
padding-left: 60px;
}
ul#nav li {
display: inline;
font-size: 12 px;
}
ul#nav li a {
display: block;
width: 113px;
float: left;
margin-top: 168px;
color: white;
padding-top: 2px;
font-weight: bold;
text-decoration: none;
}
ul#nav li a:hover, ul#nav li a:active {
color: yellow;
}
}

מה קורה עם התמונות באזור התפריט?

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

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

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

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