I was working on a project and was looking for more control over the elements I was creating in the HTML.  More specifically, I had a MasterPage setup and I wanted all pages to have the same background image throughout the site.

Simple.  Add a runat=server to your markup.  See below. 

<div id="bgimg" runat="server">
</div>

You now have control of this element from the code-behind.

To add a background image to the div, you could do something like this:

bgimg.Style[HtmlTextWriterStyle.BackgroundImage] = ResolveUrl("~/images/bodyback.jpg");

The only thing to realize is what your generated markup is.  Asp.Net will auto-generate this tag to prevent naming collisions.  Just look out for it if you are trying to style the element with CSS or call it using javascript.

<div id="ctl00_bgimg" style="background-image:url(/HRR/images/bodyback.jpg);">
</div>

Enjoy!

The other day we had a request from a client to provide a rollover effect to display data.  They only wanted it to display when a text area was hovered.  One of my coworkers and I came up with a solution that fit our needs.  I tweaked it a bit from using a DIV to using links and span tags. This makes it more flexible. Here is what I came up with. This solution that is cross-browser compatible.

First I start by setting up the link.  The point of setting the z-index is to make sure the "popup" effect floats above all other elements on the page. 

I am made two classes, rollover for the link and tooltip for the text to show.  This will distinguish between other a link and span tag attributes on the page. 

Initially the span tooltip is set to not display.  The final part of the CSS is what the span tag looks like when the link is hovered.  This is where there is a lot of flexibilty on how you want your tooltip to look.  I positioned the tooltip absolute based on the relative position of the link. 

I played with the colors and padding to come up with something I liked.  This can be changed to fit your sites needs of course.

Here is the full code for your enjoyment!

PureCSSRolloverPopupEffect.zip (2.28 kb)