We Keep Coding

how to style a tooltip of asp:image

I'm planning to apply a css on ToolTip attribute of asp:Image but it's not working. This is what I've tried so far.
<asp:Image ID="sampleimage" runat="server"
ImageUrl="~/Image/questionmark.png" ToolTip='<%# Eval("NAME") %>'
CssClass="tooltips" />
^ the text on tooltip shows but the css is not. It only has a white
background color.
.tooltips
{
background-color: Green;
width:150px;
height:20px;
}
This is from my stylesheet from other folders.
I'm totally new at using CSS. Any form of instructions will help. Thank you

You can not style tooltips with CSS only, because they are rendered by the browser, not your web page.
But you can use a JS library to render custom tooltips (which allow custom styling).
I like to use qTip2.

asp:Literal strips out title attribute value

I am working on a asp.net website (web forms and mvc) where asp:Literal is used in a few pages.
I needed to change the content of one page to add a simple title attribute to the existing tag.
So i need the rendered result to be:
<a href="test.jpg"
title="title here"
id="testimage"
rel="hint-text: CLICK TO ZOOM"
style="position: relative; display: inline-block">image goes here</a>
But after rendering, it looks like that:
<a href="test.jpg"
title id="testimage"
rel="hint-text: CLICK TO ZOOM"
style="position: relative; display: inline-block">image goes here</a>
At first i thought it could be something to do with the controls Mode property, but even if i change the Mode to PassThrough it still does not render the value of the tittle attribute.
EDIT: The code for the literal is as folows:
LiteralControl.Text = "<a href='test.jpg' title='title here' id='testimage' rel='hint-text: CLICK TO ZOOM' style='position: relative; display: inline-block'>image goes here</a>"
Does any of you guys have this problem and happens to know the solution?

How to make image visible in C#

I declared an picture in my ASP.NET and set it to hidden by default with style="visbility:hidden;". Is there anyway to access this image from the C# and change its visibility? Here is the img line from the ASP.NET:
<img src="canoe.png" alt="Boat Trailer" height="350px" width="600px" id="canoe" style="float:right; margin-right: 100px; visibility:hidden;" />

Use ASP:Image instead.
<ASP:Image id="myImage" Visibile="False" ImgUrl="link" runat="server">
Then you can access it in the backend with:
myImage.Visible = true;

If it is just server side to control the image visibility, just use,
<asp:Image ID="Image1" runat="server" Visible="false" />

You'll need to make this into a server tag first by adding runat='server' and an id. Then you can change its properties before the page loads like so:
<IMG ID>.Style["visibility"] = "visible";
replacing with the ID of your element.
Note about other answers: C# Visibility property will not change the CSS visibility but will actually remove or add the element, if you simply change that while the element is still set to visibility: hidden then it will still not be visible
Discalimer, this is an untested solution, you may have to check the syntax on the use of the Style property

Option 1
You can change it on the server side by adding an ID attribute and runat='server'.
Option 2
You can use an ASP.NET Image control and apply your changes there.
<asp:Image id="myimg" runat='server'.../>
HOWEVER, if you go with this option, you should still use CSS/Javascript to show/hide your image since setting Visible='false' on a server side control will prevent the HTML from rendering altogether which I doubt is the output your are expecting.
If you are performing this logic on the server side, why do you need to render the image as hidden? If you are showing the image based on user input then you should do it on client side Javascript.

Aligning html inputs on same line 2

I have the same behavior from many similar questions here.
But I tried anything and nothing happens to me.
I have 2 html controls. One anchor tag and a input button.
I applied vertical-align:top; float:right; display:inline-block; independently and together and nothing happens.
When I click on Close, I see a shadow like a button! I want them inline both controls
At the end of table I incluided a Div like this.
<div style="float:right;">
<asp:Button ID="btnInput" runat="server" Text="Add selected"></asp:Button>Close
</div>

You need to set a width for each element when you make them display:inline-block, otherwise they default to 100%.
Here is a jsFiddle with the closest equivalent markup I could make. (asp buttons don't work)

As Dolchio said, every element must have display: inline-block for this to work. Note that your float:right will not achieve anything helpful in this scenario.
Try adding the CssClass attribute to the asp button and styling that class.
So it would look like <asp:Button ID="btnInput" runat="server" CssClass="myButton" Text="Add selected"></asp> and in your css myButton{display:inline-block,vertical-align: top, width: 200px substitute width for whatever the width of the button is (not entirely familiar with asp buttons and their implied widths).

Refresh Page On Div Click

I have a div and inside that div I have my site logo etc...
I want that when the user clicks the site logo (my div) it will redirect him to the homepage.
How do I do it? (div onlick??)

<div onclick="window.location.href = '/';">...</div>
replace '/' with your URL or URI.

<div onclick="window.location='http://www.google.com';" style="cursor:pointer;">Content...</div>
Replace http://www.google.com with the relative path to your site's root. The style tag just switches the cursor to a pointer so user's know it's clickable.

<img src="logo" onclick="window.location('myHomePage');">
<div onclick="window.location('myHomePage');">stuff inside the div</div>
you can also change the window.location for a window.refresh(); if you want to refresh the page.

Will an anchor tag work for this (I don't know what your HTML is like, etc.). It will be more semantically correct and will not require javascript. I don't think there are any browsers that object to DIV elements inside A elements.
http://jsfiddle.net/4s87y/
<a href="http://www.google.com">
<div style="height: 100px; background-color: #ffcccc;">
This is a test. Woohoo!
</div>
</a>

one way is to use: onclick="function(){ location.href = 'http://www.yoursite.com'; }"
another one is to put the div with site logo inside an anchor tag like <div>sitelogo</div>

If you want it for OnClick then use it like this
<div OnClick="window.location=http://example.com">Your Content and Logo</div>