22-06-2005, 11:34
|
 |
|
|
חבר מתאריך: 20.06.03
הודעות: 5,616
|
|
|
מבוא לעיצוב div+css
אחת השאלות הרבות בתחום עיצוב אתרים באמצעות div נובעת מהעובדה ש-div לא מתנהג כמו טבלה, ויש קושי לשים אובייקט div אחד לצד השני.
בדפדפנים שתומכים ב-css2, כמובן שהבעיה לא קיימת, ויש לנו מגוון כלים עיצוביים המקלים עלינו את החיים וגורמים ל-div להתנהג כמו תא בטבלה.
שיעור 1, איך להציב div לצד div
ברירת המחדל היא כמובן להשתמש במאפיין position עם הערך absolute ואזי אנו קובעים את מיקומו של כל div. הבעייה הנובעת ממתן ערך זה, היא חוסר גמישות של האתר כאשר מותחים אותו, מגדילים את הדף וכו...(זה לא אומר שאין סיבות אחרות להשתמש במאפיין זה, יש לו מספיק שימושים טובים אחרים).
על מנת "להניח" div לצד div, כך שכל אחד מהם יכול להיות בעל אורך שונה (בשונה מתגי טבלה שבהם אנו מוגבלים ל-colspan ול-rowspan לפריסת התאים) היא כזו -
זהו קוד css, העתיקו אותו למקום מתאים במסמך שלכם:
קוד:
<style type="text/css">
div#left {
background-color:#FF0000;
width:100px;
height:100px;
float:left;
}
div#center {
background-color:#0000FF;
width:200px;
height:200px;
float:left;
}
div#right {
background-color:#FFFF00;
width:50px;
height:50px;
float:left;
}
</style>
זהו קוד html, שימו אותו בין תגי ה-body:
קוד:
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
מסמך המציג את קוד זה תוכלו ללמצא כאן: http://www.fat-fish.co.il/div_css.htm
להערות שאלות, בקשות לשיעורים שונים בנושאי עיצוב, הבהרה מה זה כל מאפיין ב-css, וכו....
רק תגיבו...
|
ראשי
צ'אט
מצב כלאיים
