Welcome!

[popbogdan]

Is there a css 2.1 technique to produce a dynamically sized vertical gradient within a div that meets the following requirements.

1. does not need to be transparent
2. will dynamically resize with the height of the div.

using this as a background in the edit view template in an asp.net listview conrtol. when the edit view is activated the height of the div is determined by height of a nested gridview

I only had this issue come up yesterday so my amount of googleshooting is minimal. what i did find was not very helpful and personally i don't think it can be done with pure css 2.1. I think css 3.0 has something called background-size or something...

I thought about somehow using the 2d graphics class in [dot]net but that seems inefficient,

your thoughts..

=Scott

A bit late with the answer, and the answer would be no, there isn't a CSS technique that would make this possible. Perhaps with a bit of javascript, it would.

[popbogdan]

Hi Chris, my question is

How to place an image behind a container? Let's say i have a container of the 960gs grid and I what to put a shadow (shadow.png) How I achive that?

Code: Select all

<div class="shadow">
<div class="container_12" id="container">



</div> <!-- end of the container_12 -->
</div> <!-- end of the shadow -->


What are the dimensions of the 2 divs? Could you be more precise about what exactly you want to achieve? Because the solution I see based on your question is to remove the shadow div and have a background-image: url(shadow.png) for the container div

[lukasz]

@iCatalin: it's done with CSS browser specification (-moz-border-radius, -webkit-border-radius). It goes something like this:

Code: Select all

a.title, a.title:visited {
font: normal 16px Arial, Helvetica, bla bla;
display: block; /*IE doesn't add top and bottom paddings to inline elements*/
padding: 4px 8px;
}
a:hover {
background: #f00;
-moz-border-radius: 4px; /*specific CSS selector for Firefox*/
-webkit-border-radius: 4px;/*specific CSS selector for webkit based browsers*/
}


Also, if you have a fixed with link (somethign that doesn't change dinamicly) , you could just add a background image on the hover property (you need to specifiy the width and height).

have to be careful with this method though. it's CSS3 correct?

[popbogdan]

No it is not CSS3. That is browser specific coding. The CSS3 equivalent, which is not yet finalized, is the following one

Code: Select all

border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius


I think that almost no browsers support the above specification which will probably be CSS3. Some however support the specific Mozilla or Webkit specific ones.