ساخت لیست های هدایتی (navigation list)
می توان از تکه تکه کردن تصاویر در ساخت، لیست های هدایتی (navigation list) استفاده کرد.
ما از لیست های HTML استفاده خواهیم کرد، چونکه آنها می توانند لینک باشند و همچنین خصوصیت background را پشتیبانی می کنند:
مثال (ساخت لیست های هدایتی)
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
خودتان امتحان کنید »#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
توضیح مثال:
- در گزینشگر اول یعنی navlist# خصوصیت position را با مقدار "relative" تنظیم کردیم تا اجازه دهد که عناصری که به صورت مطلق (absolute) مکان دهی شده اند داخل آن قرار گیرد.
- در گزینشگر دوم، در تمام تگ های <li> خصوصیت margin و padding آنها با مقدار "0" تنظیم می شود و با مقداردهی خصوصیت list-style با "none"، علامتگذاری لیست حذف می شود و در نهایت آنها را به صورت مطلق (absolute) مکان دهی می کنیم و فاصله از بالا را با مقدار "0" تنظیم می کنیم.
- در گزینشگر سوم، ارتفاع تمام تصاویر را با مقدار "44px" تنظیم می کنیم.
در ادامه Style و موقعیت هر بخش را مشخص می کنیم:
- در گزینشگر home# ، فاصله از سمت چپ "0" و عرض آن با مقدار "46px" تنظیم شده است، همچنین عکس پس زمینه و مکان آنرا مشخص می کنیم.
- در گزینگشر prev# ، فاصله از سمت چپ را با مقدار "63px" تنظیم می کنیم (در home# عرض با "46px" تنظیم شد که آنرا با مقدار 17px به عنوان فضای خالی جمع می کنیم) و در ادامه مانند قبل عرض را با مقدار "43px" تنظیم می کنیم و همچنین عکس پس زمینه و مکان آنرا نیر مشخص می کنیم.
- ...
