I have the following code but it doesnt seem to work:
<td align="center" style="padding-bottom:52.5px">
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png"/>
</td>
And a CSS class to change image on hover:
.RightArrow:hover
{
background-image: url('/_Layouts/Right_GreenArrow.png') !important;
}
Please advise.
Thanks
I prefer this way:
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png" onmouseover="this.src='/_layouts/Right_GreenArrow.png'" onmouseout="this.src='/_layouts/Right_GrayArrow.png'"/>
bye
An ImageButton controls renders as a <input type="image" /> element with the ImageUrl property becoming the src attribute like:
<input type="image" src="/_layouts/Right_GrayArrow.png" />
Therefore you are applying a background image to this, which you cannot see as the src image is being overlayed on top of it.
You have 2 choices:
1) Change the ImageButton to use a background image:
.RightArrow
{
width: /* width of image */
height: /* height of image */
background-image:url('/_layouts/Right_GrayArrow.png');
}
.RightArrow:hover
{
background-image: url('/_Layouts/Right_GreenArrow.png');
}
If you are going to use this method though, I would recommend using an <asp:Button /> instead. It seems pointless using an <asp:ImageButton /> if you're not even making use of the src attribute.
2) Use jQuery to change the image on hover:
$(".RightArrow").hover(function(){
$(this).attr("src", "/_Layouts/Right_GreenArrow.png");
},
function(){
$(this).attr("src", "/_Layouts/Right_GrayArrow.png");
});
Worth noting this will only work with javascript enabled, and you must include the jQuery library.
The ImageUrl property isn't the same as setting the background-image. Remove the CSS and set the onmouseout and onmouseover properties in your page.
Related
I want to write css for textbox in asp.I'm familiar with html,php. Struck to convert html css to asp css.
css for html input
input[type=text],textarea,select,input[type=password]{
float:right;
margin-right:20%;
width:155px;
}
I want to convert this to input boxes
<asp:textbox runat="server"></asp:textbox>
<asp:dropdownlist runat="server"></asp:dropdownlist>
You need to find something which has the type attribute equal to text in HTML
CSS
input:not([type]), input[type="text"] {
background: green;
}
or make the HTML explicit.
<input name='t1' type='text' id='txt1' />
Now you can customize the CSS attribute according to your requirement.
Hope it helps
You can use CssClass property and then style it as you require. For example
<asp:TextBox runat="server" ID="MyTextBox" CssClass="MyCss"></asp:TextBox>
and then style it using MyCss
Further info here
I am using radcombobox to display data, now I am not using any css style for the radcombox, but it still has gray color background.
I want to remove that color.
Below is my rad combobox code :
<telerik:RadComboBox ID="RadCountry" runat="server" CssClass="rcbInput rcbEmptyMessage"
AutoPostBack="False" EmptyMessage="Select a Customer" EnableAutomaticLoadOnDemand="True"
ItemsPerRequest="10" ShowMoreResultsBox="True" EnableVirtualScrolling="True" Filter="Contains" DataTextField="Contact_First_Name"
Font-Names="Arial" Font-Size="11px" ShowToggleImage="false">
</telerik:RadComboBox>
I am also attaching the output of the given code.
i solve this by using below css
<style type="text/css">
div.CustomCssClass .rcbInputCell INPUT.rcbInput {
color: black;
height: 1px;
padding-top: 10px;
}
</style>
Use browser debugger and goto to Inspect Element, find which class / element is the reason for background. Then overwrite css to background:none!important for that element / css rule.
I have a login FORM inside a Hidden DIV, this DIV is hidden using CSS display:none; when I click on some other DIV, I show this DIV using jquery .slideDown(), so I can be able to use this form.
When I click on the button, the OnClick="Login" doesn't seem to work,and when I removed this form from this hidden div to simply another place in the body, it worked. What's the problem?
ASP.NET:
<div id="userCPContainer">
<form id="loginForm" runat="server">
<asp:Label ID="Label1" runat="server" Text="Username" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="usernameField" runat="server" MaxLength="50" class="loginFields"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Password" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="passwordField" runat="server" MaxLength="50"
TextMode="Password" class="loginFields"></asp:TextBox>
<asp:Button ID="loginButton" runat="server" Text="Log in" onclick="Loginn" class="loginButton"/>
</form>
</div>
JQUERY:
function showUserCP() {
$("#userCPContainer").slideDown(200);
$(".userCPDiv").css("background-color", "#000000");
$(".userCPDiv").css("border-color", "#000000");
}
function hideUserCP() {
$(".userCPDiv").css("background-color", "rgb(43, 147, 206)");
$(".userCPDiv").css("border-color", "rgb(43, 147, 206)");
$("#userCPContainer").slideUp(200);
}
$(".userCPDiv").click(function (e) {
//Either way, hide Main Menu
hideMainMenu();
if ($("#userCPContainer").is(":visible")) {
hideUserCP();
}
else {
showUserCP();
}
e.stopPropagation();
});
CSS:
#userCPContainer
{
overflow:hidden;
border-style:solid;
border-top-style:none;
border-color:rgb(43,147,206);
border-width:2px;
position:absolute;
right:0px;
top:0px;
display:none;
z-index:1;
width:300px;
background-color: #000000;
}
Nothing really complicated...
When you use CSS display: none; the problem is that all that's inside that DIV gets removed completely from the HTML Document and that causes that ASP.NET does not recognize this element when you show it via jQuery. I see to possible solutions:
Use visibility: hidden instead of display: none;, if you do this you will probably have some problems with the DIV height because it will take the space needed to render but it will not be visible.
Use a ScriptManager and an UpdatePanel and put the div and the form inside those elements, so the server will know when you render the Button in the client. Also, make sure that you register your jQuery scripts inside the ScriptManager
Hope this helps you
A rectange is appearing outside the link which i dont want. How do u remove it.
No Image
<a href="~/Web Pages/Home.aspx" runat="server">
<img src="<%= ResolveUrl("~/Images/TestToday.png") %>" alt="No image" width="200" height="200"/>
</a>
border = "0"
that will do the trick
or in css:
img {
border:0px;
}
You need this CSS rule:
a img {border: none; }
Put this in your css:
:link img { border: 0; }
You probably see the anchor tags border.
Try adding BORDER="0" to your a tag. Or set border to none in your stylesheet
Are you talking about the dotted outline that appears when clicking a link?
Try
a:active
{
outline: none;
}
this removes the outline when clicking, but not when entering the link using the keyboard (which is when it's really needed).
try this use ForeColor="White"
<asp:hyperlink runat="server" ImageUrl ="Images/back.jpg" D="hlBack" ForeColor="White" >
</asp:hyperlink>
I add hover images to .Net LinkButtons using the following method:
.rollover a
{
background-image:url(/images/shoppingcart/butpill_continue.gif);
}
.rollover a:hover
{
background-image:url(/images/shoppingcart/butpill_continue_over.gif);
}
<div class="rollover">
<asp:LinkButton ID="btnContinue" runat="server"></asp:LinkButton>
</div>
This works fine with regular link buttons.
I need to add this to my next/previous buttons in a DataPager. I tried setting the ButtonType to "Link" and applying the ButtonCssClass="rollover" but this doesn't work. Is there a way to accomplish this?
Try changing your css to
a.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }
a.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }
Or just
.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }
.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }
You'll also have to change your other images to something like this
<asp:LinkButton ID="btnContinue" runat="server" CssClass="rollover" />