Hi asp.net people,

I have to implement a look and feel for a asp.net gridview where on
hovering a row, it should be highlighted with a (gradient) bar with
round corners. I have come as far as to highlight it with a gadient
bar, but unto now without the round corners as follows: I made an
image with the gradient and use a using a style sheet tot repeat that
image in horizontal direction (repeat-x) accros the cells of the row:

..grid .datatable .row:hover
{
background-position:center;
background-repeat:repeat-x;
background-image:url(../img/hover.png);
}

To add the rounded corners I have made images hoverFirst.png and
hoverLast.png with the rounded corners for respectively the left and
right ends of the highlighting bar. But now I'm stuck: I do not know
how to insert them at the beginning and the end of the bar. When I
place hoverFirst.png in cell[0] it should not repeat but placed only
once and the rest of the cell should be filled with the image
hover.png, that is without the round corners.

How can I accomplish this?

Any other technique to get rounded corners for highlighting a gridview
row are also very welcome.

Regards,
Henk

On 18 jun, 16:07, henk gijsbert <h...@paralax.nl> wrote:
> Hi asp.net people,
>
> I have to implement a look and feel for a asp.net gridview where on
> hovering a row, it should be highlighted with a (gradient) bar with
> round corners. I have come as far as to highlight it with a gadient
> bar, but unto now without the round corners as follows: I made an
> image with the gradient and use a using a style sheet tot repeat that
> image in horizontal direction (repeat-x) accros the cells of the row:
>
> .grid .datatable .row:hover
> {
> * * background-position:center;
> * * * * background-repeat:repeat-x;
> * * * * background-image:url(../img/hover.png);
>
> }
>
> To add the rounded corners I have made images hoverFirst.png and
> hoverLast.png with the rounded corners for respectively the left and
> right ends of the highlighting bar. But now I'm stuck: I do not know
> how to insert them at the beginning and the end of the bar. When I
> place hoverFirst.png in cell[0] it should not repeat but placed only
> once and the rest of the cell should be filled with the image
> hover.png, that is without the round corners.
>
> How can I accomplish this?
>
> Any other technique to get rounded corners for highlighting a gridview
> row are also very welcome.
>
> Regards,
> Henk

Nobody an idea??