Jul
2
I am not a CSS expert, but the following technique can be used to easily apply an image next to virtually any link.
First you need to define your CSS class which sets the background to a referenced image.
.icon-cancel { background: url(../images/icons/cancel.gif) no-repeat left top; display:inline; padding-left:18px; margin-left: 10px; padding-right:10px; }
Once defined, assign the class to your hyperlink.
<a href="#" class="icon-cancel">Cancel</a>
You may need to play with padding and margin, but you will end up with something similar to the following result:
I used this technique to pretty up a very plain GridView display by applying classes to my edit, update and cancel linkbuttons today. All it took was the creation of a few more CSS classes and linkbutton class tag updates. ![]()
<asp:TemplateField ShowHeader="False"> <EditItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" class="icon-save" Text="Update"></asp:LinkButton> <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" class="icon-cancel" Text="Cancel"></asp:LinkButton> </EditItemTemplate> <ItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" class="icon-edit" Text="Edit"></asp:LinkButton> </ItemTemplate> </asp:TemplateField>
Great, just what i was looking for.. Many thanks!
Your article’s code mentions “class” as one of the properties associated with a LinkButton, but there is no such thing. I’m assuming, of course, you meant the “CssClass” property. However, this doesn’t work for me. I’ve tried making a class within my style sheet and adding that CssClass to a LinkButton…but nada.
I wonder what the solution is.
Thanks,
Frank
Hi Frank, You might not get intellisence support, but try including the class attrib in your markup as shown in the example. It really should work. Best of luck.