css not applying for asp.net hyperlink - html

In my asp.net application, there is a hyperlink. I want to change it's color to white when I hover over it using css, but it is not working.
<asp:HyperLink ID="hlViewItem" class="hplClass" runat="server" NavigateUrl='<%#Eval("Pro_Id","ProductDetails.aspx?ProID={0}") %>' ForeColor="#33ccff">View Item</asp:HyperLink>
My css:
.hplClass:hover
{
color:white;
}

For ASP.NET controls use attribute CssClass instead of 'class'.

Try this (After removing ForeColor="#33ccff") :
<asp:HyperLink ID="hlViewItem" CssClass="hplClass" runat="server" NavigateUrl='<%#Eval("Pro_Id","ProductDetails.aspx?ProID={0}") %>'>View Item</asp:HyperLink>
Also make sure that you have added the reference of css file in your aspx page.

Related

Apply CSS to all page except one specific page

The title says it all. I have a Style.css that apply properties to every <Table> on every page. I have 1 SiteMap page, on which i don't want to apply CSS for <table>. I tried this as a directive:
#page :not(:last) { }
It didn't work, besides i had to apply on any specif page, not the last one.
Edited
The table is auto-generating from XML file.
Edited
SiteMap.aspx
<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
<h3 id="Heading">SiteMap</h3>
<br /><br />
<asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1" >
</asp:TreeView>
Change your CSS to exclude the generated TreeView table, e.g.
table:not(#TreeView1) { ... }

show html table on button click of asp.net server control

I am trying to display a table on the button click,right below the button,but it is getting display on the top of the page(Above the navbar).
This is what I did:
Response.Write("<table border='1' cellpadding='2' WIDTH='20%' height='10px' style=\"margin-bottom:10px\">");
what should be done to align the table below the button?please help
you should place a control and that add it into that control.
You can also take the help of html generic controls to add html control in the controls.
<asp:panel id="panel1" runat="server">
</panle>
and in code behind
panel1.InnerHtml="";
You should not be using Response.write. Either:
1) Use some JavaScript and HTML to show/hide the table.
2) Use server side control for example
ASPX page
<asp:panel runat="server" id="foo" visible="false">
<table border='1' cellpadding='2' WIDTH='20%' height='10px' style=\"margin-bottom:10px\>
....
<asp:panel>
Code
foo.Visible = true;
See Show/Hide panels in ASP.net C# after submitting form

Css class name getting changed in html of aspx page

I'm working on aspx pages and i have asp.net Menu and CSS assigned to it.
But when I run the application the CSS class names get changed and its dynamically created as we see in controls inside "ContentPlaceHolder".
The code is
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal">
<DynamicItemTemplate>
<%# Eval("Text") %>
</DynamicItemTemplate>
<Items>
.
.
.
</Items>
</asp:Menu>
please check this Image what i get when i run this..
I checked my application to know whether the Menu control is placed inside content placeholder or anything. But its not.
Do anyone know how to solve this issue.
class="menu ct100..." means that this element has two classes 1:menu and 2:ct100...
and nothing is wrong with it!the ct100... is generated by asp.net and if it is different any time you run the page it's up to asp.net component and if you dont like that try not to use this built in component, that i think you should do it.
by the way the only thing is changing when using master pages is client side id, that you can avoid this from happening by code below
<asp:TextBox ID="myId" runat="server" ClientIDMode="Static"></asp:TextBox>
set ClientIDMode to Static

Apply CSS style to asp content

I can apply a CSS style to an html link using
<link href="css/style.css" rel="stylesheet" type="text/css" />
Login
Is it possible to apply the same CSS style id loginCSS to the following control?
<div class="buttonCSS">
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/Admin/Default.aspx" >Login as Admin</asp:HyperLink>
</div>
I've tried the following
<asp:HyperLink ID="loginCss" runat="server"
NavigateUrl="~/Members/Default.aspx" >Login as Member</asp:HyperLink>
which gives error 'loginCSS' is not a valid identifier.
In your css, I'm guessing you have a style based on control names:
#loginCss{
//Your styles here
}
If you change it to be based on class name:
.NewLoginCss{
//Your styles here
}
You can reference it in multiple places using the .NET CssClass and HTML class attributes:
Login
<asp:HyperLink ID="loginCss" runat="server"
NavigateUrl="~/Members/Default.aspx"
CssClass="NewLoginCss">Login as Member</asp:HyperLink>
You probably want to avoid using IDs when dealing with .NET web controls as the IDs end up looking something like: ct100_blahblah_controlName_blahblah
So just use the CssClass attribute in the Hyperlink Control:
<asp:Hyperlink ID="hyp1" CssClass="className" />
And your CSS would be:
.className { color: FFF; }
I believe ID's are pretty reserved in the older versions of .NET which is why many backend devs prefer their front-end buddies to use css classes instead.
You can look up how to apply those on your elements, but I believe its CssClass="classname"
<asp:HyperLink ID="" CssClass="loginCss" runat="server"
NavigateUrl="~/Members/Default.aspx" >Login as Member</asp:HyperLink>
when you add "runat='server'"
all ids will be prepended with ContentPlaceHolder_
so if ur id before server side was "bla"
it will be "ContentPlaceHolder_bla"
and thats the name u should use for selectors on client side.
from server side the elements will still be available by old name.
You cannot have same ID of two ASP.Net controls. There are other ways to achieve your goal. A better approach is to use CssClass attribute.

Css for gridview

I developed a gridview by following this tutorial but i want to change it's css, can someone point me to right direction please,
Here's a little bit of markup
<asp:GridView ID="GridView1"
runat="server"
DataKeyNames="CustomerID" AutoGenerateColumns="false"
OnRowDataBound="gv_RowDataBound" Width="80%"
AllowPaging="True" PageSize="20" cssClass="myclass" />
I added a css class but not sure what will go in class so that I make my gridview attractive,
Please check below codeproject link. This may help you.
Add some style to your datagrids
You can use the this : http://msdn.microsoft.com/en-us/library/aa479342.aspx . Skin is easy to maintain and change