عام

حذف الفراغات الموجودة بين عناصر القائمة في أداة Menu

كثيرا ما نقوم بتحويل عناصر القائمة الخاصة بالموقع إلى صور بدلا من النصوص فهي تجعل القائمة تبدو أجمل، ولكن هذا
الجمال سيتلاشى بسبب الفراغات التي ستظهر بين الصور، فتظهر القائمة بشكل سيء لأنها تظهر عبارة عن صور مفككة غير مترابطة وتفقد بذلك معنى القائمة التي يجب أن تبدو عليها.
والحل السريع لهذا الأمر هو وضع خلفية للقائمة وتتم بالطريقة التالية
عمل 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;


هذا يعتبر حلا جذريا للتخلص من الفراغات بين عناصر القائمة

About the author

خليل سليم

Leave a Comment

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.