كثيرا ما نقوم بتحويل عناصر القائمة الخاصة بالموقع إلى صور بدلا من النصوص فهي تجعل القائمة تبدو أجمل، ولكن هذا
الجمال سيتلاشى بسبب الفراغات التي ستظهر بين الصور، فتظهر القائمة بشكل سيء لأنها تظهر عبارة عن صور مفككة غير مترابطة وتفقد بذلك معنى القائمة التي يجب أن تبدو عليها.
والحل السريع لهذا الأمر هو وضع خلفية للقائمة وتتم بالطريقة التالية
عمل style يحتوي على الخلفية ووضعه بين head tag
<style type="text/css">
.menuItem
{
background-image : url(http://www.gc.ca/images/lfblt.gif);
padding:2px 5px;
}
</style>
وبعد ذلك يستدعى في ال Menu
<asp:Menu ID="Menu2" StaticMenuItemStyle-CssClass="menuItem"
DynamicMenuItemStyle-CssClass="menuItem" runat="server" Orientation="Horizontal" >
<Items>
<asp:MenuItem ImageUrl="~/images/2_05.jpg" NavigateUrl="~/haj.aspx">
</asp:MenuItem>
</Items>
</asp:Menu> هذا يعتبر حل، ولكن هنالك أفضل منه وذلك عبر جعل جميع خصائص القائمة الخاصة بال padding وهي الإزاحة بقيمة صفر بالشكل التالي :
<asp:Menu ID="Menu2" DynamicMenuStyle-HorizontalPadding="0"0"
DynamicMenuItemStyle-HorizontalPadding="0 StaticMenuStyle-HorizontalPadding="0"
StaticMenuItemStyle-HorizontalPadding="0" runat="server" Orientation="Horizontal" >
<Items>
<asp:MenuItem ImageUrl="~/images/2_05.jpg" NavigateUrl="~/haj.aspx"></asp:MenuItem>
</Items>
</asp:Menu>;t;
هذا يعتبر حلا جذريا للتخلص من الفراغات بين عناصر القائمة
