Css Question

[David S Johnston]

Hi,

 

is there anyone who could help me with this issue?:

 

in my category cover images I have both light and dark images, the category name and category description looks fine on the lighter images, but cannot be seen well on the dark images.

 

So I decided to use a shadow box, what I mean by this is I would like to use a solid border with a gradient effect. I have the CSS prepared like this:

border-radius: 25px;
width: 75%;
background: yellow; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left,rgba(255,255,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,255,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,255,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,255,0,1), rgba(255,0,0,0)); /*Standard*/

If I put this in category.css in the .content_scene_cat p section, I have the box around the description, and the same goes for the .content_scene_cat span.category-name { 

 

But I would like my shadowbox to encompass both elements at the same time.

 

Any hints, tips or solutions ?

 

Regards,

Dave

 

[Daresh]

It's hard without seeing the live site, put probably adding a common div around them woul solve this.

[David S Johnston]

Thanks Daresh,

 

your comment made me look further, and I noticed that there is a <div class="cat_desc"> around the part I want to highlight,

 

I simply added this:

.cat_desc{
border-radius: 25px;
width: 75%;
background: yellow; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left,rgba(255,255,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,255,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,255,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,255,0,1), rgba(255,0,0,0)); /*Standard*/
}

To category.css and the area s now highlighted, not it is a matter of positioning the box where I want it!

 

Thanks!!