I have an image button inside the div. I am increasing the image size and z-index on the hover on div. but I want to add some text over the image button when the hover is calling. how can I do ?
my css:
.HoverImageClass input[type=image]:hover
{
position: relative;
z-index: 10000;
height: 274px;
width: 226px;
margin-top: -67px;
margin-left: -14px;
padding-bottom: 13px;
background-color: #F7F6EB;
}
my html:
<div id="divImageDisplay" class="HoverImageClass" runat="server">
<asp:ImageButton runat="server" CssClass="course_img" ID="imgbtnCourse" AlternateText='<%#Eval("LevelName") %>' ToolTip='<%#Eval("LevelName") %>' ImageUrl='<%#Eval("CourseImagePath") %>' CausesValidation="False" CommandName="AddToCart" CommandArgument='<%# String.Format("{0},{1},{2},{3},{4},{5}",Eval("ID"),Eval("LevelID"),Eval("CurrencyWithValue"),Eval("CourseImagePath"),Eval("CategoryID"),Eval("MRP")) %>'></asp:ImageButton>
</div>
Well, if you do the text on the button via normal HTML, one possible method would to on the main CSS class make the " color:"" " the same as that of the background, and then on the :hover class, you could change it to a different color that would be readable/eligible. Or possibly you could even set the font size to something really tiny on the original, then bump it up a size on the :hover!
Hope it helps!
Related
I have two panels in my asp.net project. Each having controls of their own. The 2nd panel is contained within the 1st panel. Even if i give lower z-index for the 2nd panel, it is always visible above the 1st panel. Please find code below.
`
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Panelshow.aspx.vb" Inherits="paneltest.Panelshow" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.panelbg {
left: 0;
top: 0;
width: 1000px;
height: 700px;
background-color: palegreen;
z-index:300;
position:relative;
}
.pan2{
top: 200px;
left : 200px;
background-color:aqua;
z-index:1;
position:relative;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel3" CssClass="panelbg" runat="server">
<asp:Button ID="Button2" runat="server" Text="Button" />
<asp:Panel ID="Panel2" CssClass="pan2" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
</asp:Panel>
</div>
</form>
</body>
</html>
`
since you wish the two panel stacking on top of each other. both panel should stand on the same level, not one within another. for example:
<div>
<asp:Panel ID="Panel3" CssClass="panelbg" runat="server">
<asp:Button ID="Button2" runat="server" Text="Button" />
</asp:Panel>
<asp:Panel ID="Panel2" CssClass="pan2" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
</div>
Then your css will make both elements have the position of absolute for the z-index to take effect:
.panelbg {
left: 0;
top: 0;
width: 1000px;
height: 700px;
background-color: palegreen;
z-index: 300;
position: absolute;
}
.pan2 {
top: 200px;
left: 200px;
background-color: aqua;
z-index: 1;
position: absolute;
}
You have a answer, but I will explain how this works.
Think of each "div" (or panel - same thing) as a sheet of paper.
You can stack paper on top of each other.
but, RULE IS:
Stuff you put on EACH sheet of paper can't have a lower z-index then the sheet of paper!!!
So, you nested your div/panels.
So, text, input boxes, anything on ONE sheet of paper can NOT have a lower index then the sheet of paper.
So, in your example?
You don't have 2 sheets of paper, you have ONE sheet of paper with stuff inside!
Stuff inside a sheet of paper can't have a lower z-index - it will not work.
And "stuff" inside ONE sheet of paper ALSO means more div's or more panels.
So, you need 2 sheets of paper so to speak, or better said you can't "nest" the 2nd div/panel inside of the first (well, you can, but any element in/on/placed on that one sheet of paper can't have a lower z-index).
You for this metaphor only have ONE sheet of paper (the first panel). What ever you drop inside/on this sheet of paper can't have a lower z-index.
If you need elements with a lower z-index, you need two sheets of paper - not nested.
So, this would work:
<asp:Panel ID="Panel3" CssClass="panelbg" runat="server" >
<asp:Button ID="Button2" runat="server" Text="Button" />
</asp:Panel>
<asp:Panel ID="Panel2" CssClass="pan2" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
So, above can be thought as 2 sheets of paper, each with stuff inside. But each paper cannot have elements with a lower z-index (it does not work).
however, if you looking to hide/show that nested element, then use style=display:none to hide, and style="display:in-line (or normal) to show.
So, elements placed on our so called "paper" can each have higher, or lower z-index, but NONE can have a z-index lower then the sheet of paper they are placed on/in.
To move such elements LOWER then the paper/sheet they are placed on you thus need 2 separate sheets of paper (2 divs/panels - not nested).
and because they are not nested, then you need to use absolute.
So, say this:
<style>
.panelbg {
left: 0;
top: 0;
width: 500px;
height: 700px;
background-color: palegreen;
z-index: 300;
position: absolute;
}
.pan2 {
top: 200px;
left: 200px;
width: 600px;
background-color: aqua;
z-index: 1;
position: absolute;
}
</style>
and
<asp:Panel ID="Panel3" CssClass="panelbg" runat="server" >
<asp:Button ID="Button2" runat="server" Text="Button" />
</asp:Panel>
<asp:Panel ID="Panel2" CssClass="pan2" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
and now this:
Since we now have 2 sheets of paper, then I need to use absolute position to "stack" the 2 sheets on top of each other. Relative will not work, since we now have 2 separate sheets of paper (2 div/panels).
thus, our simple rule:
stuff dropped into that sheet of paper can't have ANY element with a lower z-index then the sheet of paper being used.
I want the hyperlink centered in the cell of GridView, this is the code for the grid column:
<asp:TemplateField HeaderText="Ticket#" ItemStyle-HorizontalAlign="Center" SortExpression="ows_ID">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
</asp:TemplateField>
HorizontalAlign="Center" doesn't work, nor does ItemStyle-HorizontalAlign="Center". I have set style as described here and that doesn't work either. FYI, bootstrap is involved also. What am I missing? Some setting in the grid declaration? Please help.
In your CSS file, edit the style for td tag.
td
{
text-align: center;
}
GridView will be converted to table structure when rendered on webpage. So GridView takes styles of table
You can do it with css:
Here is a demo from this post: post
And you have to add a css class to the table cell and wrap your css into the class, otherwise it will align all td's that way!
td {
height: 100%;
}
a {
display: table;
position: relative;
height: 100%;
width: 100%;
background-color: yellow;
}
span {
display: table-cell;
text-align:center;
vertical-align: middle;
background-color: red;
}
This can achieve by two methods
1- try to use
< center >
< ItemTemplate >
' Font-Underline="false" NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</ItemTemplate>
< /center >
2- Or you simply goto view souce file of your webpage
try to find rendered html of hyperlink ....and then place your
< asp:Hyperlink >
inside a < span class="class1"> < /span >
< style > .class1 { text-align:center; }
< /style >
The only thing that worked was to place a div around the Hyperlink with alignment in the div.
<div style="text-align:center">
<asp:Hyperlink ID="hlID" Target="_parent" runat="server" Text='<%# Bind("ows_ID")%>' Font-Underline="false"
NavigateUrl='<%#"Default.aspx?TktNo=" & Server.UrlEncode(Trim(Container.DataItem("ows_ID")))%>'/>
</div>
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 menu made of an <ul>. Every <li> has inside an <a>, and every <a> has an image and a label.
the image changes on hover (javascript) into a bigger image, so the size of the images is of no help. I would like to align the image vertically on the middle of the menu item. here you have the code:
<script type="text/javascript">
<!--
function changeImage(element, toReplace, withReplace) {
var str = document.getElementById(element).src;
document.getElementById(element).src = str.replace(toReplace, withReplace)
}
// -->
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Menu.ascx.cs" Inherits="UserControls_Menu" %>
<ul id="navmenu">
<li><a id="default" runat="server" href="~/Default.aspx" onmouseover="changeImage('sideBar_Menu1_Image7', 'Calendar24x24.png', 'Calendar32x32.png');"
onmouseout="changeImage('sideBar_Menu1_Image7', 'Calendar32x32.png', 'Calendar24x24.png');">
<div class="divImage">
<asp:Image ID="Image7" runat="server" ImageUrl="~/Images/Calendar24x24.png" />
</div>
<div class="divLabel">
<asp:Label ID="Label6" runat="server" Text="CALENDAR" meta:resourcekey="Label6Resource1"></asp:Label>
</div>
</a></li>
.divImage
{
width: 29px;
height: 29px;
float: left;
text-align: center;
vertical-align: middle;
}
.divLabel
{
float: left;
padding-top: 3px;
}
no matter what I do, align-vertically doesn't work...the only way I made things work was with tables, but then the click only works on the image, it doesn't on the lable too...I tried without divs too, can't find a way
edit 3
http://jsfiddle.net/HerrSerker/td4jy/2/
edit 2
another proposal is
don't put them inside as <img /> element but as background-image with background-position: 10px 50% or something
edit 1
http://jsfiddle.net/HerrSerker/sftGT/1
orig
Don't use float: left floats are not vertically alignable. use display:inline-block instead together with line-height values.
How can I give spacing between Radio Button and Text using Asp:RadioButton control in ASP.NET?
<asp:RadioButton ID="radio1" runat="server" GroupName="Group1" />
Try:
<asp:RadioButton ID="radio1" CssClass="Space" runat="server" GroupName="Group1" />
and CSS:
.Space label
{
margin-left: 20px;
}
works here...
Use CSS:
input[type="radio"]
{
margin-right: 2px;
}
Or:
input[type="radio"] + label
{
margin-left: 2px;
}
Another method that works is to precede the text property of the radiobutton with the symbol like this Text=" I have pad before me"
where is your text? use a label for the radiobutton or put some margin in CSS around the button.